是否可以自动更新Highchart数据并制作动画效果？

Question

我在React应用程序中使用Highchart。我想为Highcart制作动画效果。

例如，它显示了上传其他数据的进度。我通过传递进度this.props.progress。但是，我无法将道具传递给Highchart的data属性。

通过更新数据可以制作动画效果吗？最佳做法是什么？

Highchart.js

class Highchart extends React.Component {
static propTypes = {
data: React.PropTypes.array,
text: React.PropTypes.string,
colors: React.PropTypes.array,
size: React.PropTypes.any,
bgcolor: React.PropTypes.string,
width: React.PropTypes.number
}

constructor (props) {
super(props)

this.state = {
  uuid: uuid()
}
}

componentDidMount () {
Highcharts.chart(this.state.uuid, {
  chart: {
    renderTo: 'container',
    type: 'pie',
    width: this.props.width,
    backgroundColor: this.props.bgcolor
  },
  title: {
    text: this.props.text,
    useHTML: true,
    verticalAlign: 'middle',
    floating: true
  },
  plotOptions: {
    pie: {
      shadow: false,
      allowPointSelect: false,
      size: '100%',
      dataLabels: { enabled: false }
    },
    series: {
      states: {
        hover: {
          enabled: false
        }
      }
    }
  },
  tooltip: { enabled: false },
  credits: { enabled: false },
  colors:this.props.colors,
  series: [{
    data: this.props.data,
    size: this.props.size,
    innerSize: '90%',
    showInLegend:false,
    dataLabels: {
      enabled: false
    }
  }]
})
}
render () {
return (
  <div id={this.state.uuid} className='high-chart' />
)
}
}

export default Highchart

ProgressMeter.js

import React from 'react'
import Highchart from 'components/Highchart'

class ProgressMeter extends React.Component {
static propTypes = {
progress: React.PropTypes.number,
 }

render () {
return (
  <div
    className='signup-percents-meter'
  >
   <DonutChart data={[this.props.progress, 100-this.props.progress]}
   //this code does not work.
      colors={['#ee382a', '#eaeaea']}
      />
  </div>
  )
  }
  }

  export default ProgressMeter

Answer 1

仅更改选项对Highcharts不起作用-这些选项仅用于生成图表。如果要更改这些选项，则应调用chart.update新选项或进行更专用的更新，例如可以使用系列数据series.setData。

其他人如何处理此问题：

1. 官方Highcharts React包装器highcharts-react正在使用chart.update- 相关代码行。

2. 第三方react-highcharts正在使用新选项重建Highcharts图表。它不是最佳选择，但对他们来说通常是更安全的方法（这是第三方代码，因此，如果有任何错误，他们需要等待错误被解决）。相关代码：调用renderChart更新并在中创建图表renderChart。

3. 第三方react-highcharts-wrapper也会在更新时重建图表- 在此说明原因。

关于动画：

重建图表（重新创建）时，将运行初始动画（除非在图表的animation选项中另行指定），并且对于动态更新（如chart.update图表），默认情况下会启用动画重绘。