时间戳

首页 > 解决方案 > Highcharts 更新大数组

reactjs - Highcharts 更新大数组

问题描述

在 React Redux 应用程序中，我有一个包含时间序列数据（大约 10k 数据点）的大型数组。数据由 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%'}}}
/>

标签： reactjsreduxhighchartsreact-highcharts

解决方案

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

推荐阅读