Question

我在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

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。

其他人如何处理此问题：

官方Highcharts React包装highcharts-react正在使用chart.update - the relevant code line。
第三方react-highcharts正在使用新选项重建Highcharts图表。它不是最优的，但通常是一种更安全的方法（它的第三方代码，所以如果有任何错误，他们需要等待错误解决）。相关代码：call renderChart on updates和creating the chart in the renderChart。
第三方react-highcharts-wrapper也会在更新时重建图表 - here is explained why。

关于动画：

当图表重建（重新创建）时，初始动画运行（除非chart's animation option中另有说明），并且动态更新如chart.update图表重绘，默认情况下启用动画。

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

1 个答案: