Highcharts更新大数组

Question

在React Redux应用程序中，我有一个很大的数组，其中包含时间序列数据（大约1万个数据点）。数据由redux存储提供。该应用程序使用highcharts-react-official 2.x.x。大数组经常通过附加新数据点来更新（仅追加，现有数组元素是不可变的）。

由于这些更新，似乎每次图表都被完全渲染。如何避免这种情况？

const options = {
  series: [
    {
      type: 'line',
      data: objectFromReduxStore.map(p => ([p.time.toMillis(), p.value])),
    }
  ]
}
...

<HighchartsReact
  highcharts={Highcharts}
  options={options}
  containerProps={{style: {height: '300px', width: '100%'}}}
/>

Answer 1

highcharts-react-official包装器使用chart.update(options)方法来应用更改。在您的情况下，更有效的解决方案是获取图表参考并直接在系列上调用addPoint方法。

constructor(props) {
  super(props);
  this.afterChartCreated = this.afterChartCreated.bind(this);
}

afterChartCreated(chart) {
  this.internalChart = chart;
}

componentDidMount() {
  setInterval(() => {
    this.internalChart.series[0].addPoint(Math.random() * 5);
  }, 1500);
}

render() {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      callback={this.afterChartCreated}
    />
  );
}

---

实时演示： https://codesandbox.io/s/highcharts-react-demo-gp6n6?file=/demo.jsx

API参考： https://api.highcharts.com/class-reference/Highcharts.Series#addPoint