我正在使用 Highcharts 创建一个具有 1440 个数据点的可缩放折线图，这里是 JSFiddle demo其中。
在 Firefox 中，图表的性能非常缓慢，渲染需要几秒钟，并且在将鼠标悬停在数据点上和工具提示出现之间有很长的延迟。在我的页面上有几个这样的图表，它们的综合影响使页面几乎无法使用。
是否有任何技巧/技巧可以提高具有相对较大数据集的图表的性能？我已将图表的 JSON 附加到这篇文章的末尾(数据本身被 chop 了)。
顺便说一句，在我添加 turboThreshold: 0 属性之前，图表根本没有呈现，因为该系列有超过 1000 个数据点。根据the docs :
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 10,
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
labels: {
formatter: function () {
return currencySymbol + this.axis.defaultLabelFormatter.call(this);
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + currencySymbol + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
states: {
hover: {
lineWidthPlus: 0
}
},
lineWidth: 1,
marker: {
enabled: false,
radius: 3
}
}
},
series: [{
data: [{"y":93,"x":1412722800000},{"y":54,"x":1412722860000}],
turboThreshold: 0
}]
});
});
更新
我已经 updated the demo包括我到目前为止收到的所有建议。禁用动画有点帮助，但该页面在 Firefox(这是我的主要目标浏览器)中仍然非常缓慢。我已经开始悬赏，希望能吸引更多的建议。
最佳答案
在这里你可以找到FAQ回答你的问题。
附加说明:禁用工具提示时，您将获得巨大的性能提升。
或者只使用 Highstock，它实现了 dataGrouping，例如 chart with 52k of points .
关于javascript - 提高 Highcharts 折线图的性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26266578/