Я использую Highcharts в React и у меня проблемы с производительностью в Firefox 60.0.
Изначально он хорошо отображает пустой график, но всякий раз, когда я пытаюсь обновить его данными, он выдает мне сообщение «Веб-страница замедляет работу вашего браузера. Что бы вы хотели сделать?»
Веб-приложение всегда будет отображать от 20 до 100 тыс. Точек, иногда миллионы в зависимости от фильтров, выбранных пользователем.
Я пробовал большинство оптимизаций Рекомендуется Highcharts . Это мой код для инициализации графика:
componentDidMount() {
let myChart = Highcharts.chart('my-plot', {
chart: {
zoomType: 'xy',
marginTop: 40
},
boost: {
useGPUTranslations: true,
usePreAllocated: true
},
title: {
text: null
},
xAxis: {
events: {
afterSetExtremes: function(event) {
this.onZoom(event);
}.bind(this)
}
}
yAxis: {
type: 'datetime',
reversed: true,
events: {
afterSetExtremes: function(event) {
this.onZoom(event);
}.bind(this)
}
}
plotOptions: {
series: {
turboThreshold: 0,
events: {
legendItemClick: function(event) {
this.onLegendClick(event);
}.bind(this);
},
stickyTracking: false
},
tooltip: {
snap: 0
}
},
series: [[]]
});
this.setState({myPlot: myChart});
}
И я обновляю данные, используя:
componentDidUpdate(prevProps, prevState) {
if(prevProps.plotData !== this.props.plotData) {
let chart = this.state.myPlot;
while(chart.series.length) {
chart.series[0].remove(false);
}
chart.redraw();
this.props.plotData.forEach((series) => {
chart.addSeries(series, false);
}
chart.redraw();
}
}
Вот суть того, что я пытаюсь сделать в codesandbox .
Я попытался установить для логического значения перерисовки значение false при добавлении серии в надежде, что он не будет так часто зависать, и выполнил chart.redraw () после forEach, чтобы он полностью перерисовывался в самом конце. Это было в другом SO или сообщении в блоге, чтобы помочь уменьшить задержку, что помогло сократить количество раз, когда появлялось сообщение "эта веб-страница тормозит браузер". Но я бы хотел, чтобы это сообщение полностью исчезло.
Этого не происходит, когда я использовал другие библиотеки графиков, такие как Plotly. Но мне нравятся высокие графики и гибкость, которую они предлагают, поэтому я хотел бы продолжать их использовать.