Highcharts обновляет большой массив - PullRequest
Новая
       86

Highcharts обновляет большой массив

0 голосов
/ 04 мая 2020

В приложении React Redux у меня есть большой массив, содержащий данные временных рядов (около 10 тыс. Точек данных). Данные поступают из магазина редуксов. Приложение использует 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%'}}}
/>

1 Ответ

1 голос
/ 04 мая 2020

Оболочка 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

...