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

Question

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

比如显示上传其他数据的进度。我通过 this.props.progress 传递进度。但是，我无法将 Prop 传递给 Highchart 中的数据属性。

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

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

进度表.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 - the relevant code line .

2. 第三方 react-highcharts正在使用新选项重建 Highcharts 图表。它不太理想，但通常对他们来说是一种更安全的方法(它是第三方代码，因此如果出现任何错误，他们需要等待错误被解决)。相关编码:call renderChart on updates和 creating the chart in the renderChart .

3. 第三方 react-highcharts-wrapper还在更新时重建图表 - here is explained why .

关于动画:

当图表重建(重新创建)时，初始动画运行(除非在 chart's animation option 中另有说明)，并且对于像 chart.update 这样的动态更新，图表默认启用动画重新绘制。