Здравствуйте, уважаемые программисты,
Я столкнулся с проблемой производительности при использовании highcharts () в браузере Firefox (firefox квант 60.0 (64-разрядная версия)).У меня есть диаграмма с различными типами рядов (площадь, сплайн и т. Д.), Где каждая серия может содержать несколько тысяч точек данных (x, y).Я реконструировал диаграмму в jsfiddle (ссылка ниже), которая имитирует мой отображаемый график.
Если я запускаю jsfiddle в firefox, браузер в основном выключается.Он отстает при рендеринге, и отображение любых всплывающих подсказок в лучшем случае идет медленно.
Если я запускаю тот же jsfiddle в google chrome (Версия 66.0.3359.139 (64-разрядная версия)), все работает должным образом, без задержек.
Время, затрачиваемое на создание диаграмм, не сильно отличается, если вообще есть, хром даже занимает немного больше времени:
хром: https://i.imgur.com/dNW47UK.png
firefox: https://i.imgur.com/el9enCL.png
К сожалениюэто не возможность уменьшить количество отображаемых точек или всплывающих подсказок на графике, поскольку это востребованная функция.График должен работать правильно и в Firefox.Код jsfiddle содержит наименьшее количество необходимых функций для моей диаграммы.Я использую модуль повышения, и я уже пытался изменить связанные параметры, такие как boostthreshhold, turbothreshhold, useGPUTranslations или usePreAllocated.
Английский не мой родной язык.Пожалуйста, извините за любые ошибки, касающиеся грамматики или словарного запаса.И это также мой первый пост на stackoverflow.Извините, если что-то не соответствует правилам форматирования.
JSFiddle-Link: https://jsfiddle.net/pjwpujs0/1/
Код JavaScript:
function getAreaData(amountOfValues) {
var arr = [];
var i;
// 10 minutes
var timeinterval = 10 * 60 * 1000;
// start time: 2016-02-12 10:00:00
var starttime = 1455271200000;
var temptime = starttime;
for (i = 0; i < amountOfValues; i = i + 1) {
temptime += timeinterval;
arr.push([
temptime,
Math.random() * Math.floor(4000)
]);
}
return arr;
}
function getLineData(amountOfValues) {
var arr = [];
var i;
// 10 minutes
var timeinterval = 10 * 60 * 1000;
// start time: 2016-02-12 10:00:00
var starttime = 1455271200000;
var temptime = starttime;
for (i = 0; i < amountOfValues; i = i + 1) {
temptime += timeinterval;
arr.push([
temptime,
Math.random() * Math.floor(20)
]);
}
return arr;
}
var amount = 20000;
var series = [];
series.push({
name: "Area",
data: getAreaData(amount),
lineWidth: 0.5,
type: 'area',
tooltip: {
followPointer: false,
valueSuffix: 'kW'
}
});
series.push({
name: "Line",
data: getLineData(amount),
lineWidth: 0.5,
type: 'spline',
yAxis: 1,
tooltip: {
followPointer: false,
valueSuffix: 'm/s'
}
});
console.time('testchart');
this.testChart = new Highcharts.Chart({
boost: {
allowForce: true,
enabled: true,
useGPUTranslations: true,
debug: {
showSkipSummary: true,
timeBufferCopy: true,
timeKDTree: true,
timeRendering: true,
timeSeriesProcessing: true,
timeSetup: true
}
},
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x'
},
title: {
text: "testchart"
},
xAxis: {
type: 'datetime'
},
yAxis: [{
// primary axis
labels: {
format: '{value}kW'
},
title: {
text: "Leistung in [kW]"
}
}, {
//secondary axis
labels: {
format: '{value}m/s'
},
title: {
text: "Windgeschwindigkeit in [m/s]"
},
opposite: true
}],
tooltip: {
shared: true,
valueDecimals: 2
},
plotOptions: {
series: {
animation: false,
marker: {
enabled: false,
symbol: 'circle',
radius: 1
}
}
},
series: series
});
console.timeEnd('testchart');
Edit1: Я простопопытался экспортировать график как svg и получил ошибку:
" 413 Слишком большой объект запроса "
, возможно, это помогает