Javascript 是否可以自动更新Highchart数据并产生动画效果？

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

例如，它显示上传其他数据的进度。我通过

this.props.progress

传递进度。但是，我不能在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

类Highchart扩展了React.Component{
静态类型={
数据：React.PropTypes.array，
文本：React.PropTypes.string，
颜色：React.PropTypes.array，
大小：React.PropTypes.any，
bgcolor:React.PropTypes.string，
宽度：React.PropTypes.number
}
建造师（道具）{
超级（道具）
此.state={
uuid:uuid（）
}
}
组件安装（）{
Highcharts.chart（this.state.uuid{
图表：{
renderTo:'容器'，
键入“pie”，
宽度：this.props.width，
背景颜色：this.props.bgcolor
},
标题：{
text:this.props.text，
是的，
垂直排列：'中间'，
浮动：对
},
打印选项：{
馅饼：{
影子：错，
allowPointSelect:false，
大小：“100%”，
数据标签：{已启用：错误}
},
系列：{
国家：{
悬停：{
已启用：false
}
}
}
},
工具提示：{enabled:false}，
信用证：{已启用：错误}，
颜色：这个。道具。颜色，
系列：[{
数据：this.props.data，
尺寸：这个。道具。尺寸，
内部尺寸：“90%”，
showInLegend:false，
数据标签：{
已启用：false
}
}]
})
}
渲染（）{
返回(
)
}
}
导出默认高度图表

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

从“React”导入React
从“组件/Highchart”导入Highchart
类ProgressMeter扩展了React.Component{
静态类型={
进度：React.PropTypes.number，
}
渲染（）{
返回(
)
}
}
导出默认进度计

仅更改选项对Highcharts无效-这些选项仅用于生成图表一次。如果您想更改这些选项，您应该使用新选项或更专门的更新来调用，例如，对于系列数据，您可以使用

其他人是如何处理的：

官方Highcharts React包装器正在使用

图表。更新
-

第三方正在使用新选项重建Highcharts图表。它的优化程度较低，但通常对他们来说是一种更安全的方法（这是第三方代码，因此在出现任何bug时，他们需要等待bug得到解决）。相关代码：和

第三方也会在更新时重建图表-

关于动画：

重建（重新创建）图表时，初始动画将运行（中另有规定的除外），并用于动态更新，如

图表。默认情况下，更新
图表将在启用动画的情况下重新绘制