作为免责声明，我对JS很新。话虽这么说，我有多个系列，我从数据库加载到Highcharts。如果加载单个系列，图表呈现正常并且响应迅速。加载多个系列后，数据的十字准线在悬停时会大幅延迟，并且图表甚至无法在Chrome屏幕上呈现（版本59.0.3071.104（官方版本）（64位）），除非我放大相当一点点。然而，它将在Firefox和IE中呈现，但响应时间较慢。它还可以在所有浏览器上保存到磁盘。
图表是简单的线条，每行包含大约33k个数据点。我使用一些简单的php函数来遍历数据集并生成脚本。
<div id="container" style="width: 1200px; height: 600px; margin: 0 auto"></div>
<!-- 1. Add JQuery and Highcharts in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- 2. You can add print and export feature by adding this line -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
exporting:{
url:"http://localhost:8080/highcharts-export-web/"
};
var chart = Highcharts.chart("container", {
chart: {
zoomType: "x",
panning: true,
panKey: "shift",
//~ plotShadow: true,
plotBorderWidth: 1
},
tooltip: { enabled: false},
title: {
text: "Experiments"
},
yAxis: {
minorTickInterval: "auto",
lineColor: "#000",
lineWidth: 1,
tickWidth: 1,
tickColor: "#000",
crosshair: {
color: "blue",
},
title: {
text: "Y",
}
},
xAxis: {
//type: "datetime",
minorTickInterval: "auto",
lineColor: "#000",
lineWidth: 1,
tickWidth: 1,
tickColor: "#000",
crosshair: {
color: "blue",
},
title: {
text: "X",
},
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
series : []
});
$.getJSON('./from-sql.php?callback=data&zone=1055&ma=120', function(data) {
chart.addSeries({
data: data.data,
});
});
$.getJSON('./from-sql.php?callback=data&zone=1056&ma=120', function(data) {
chart.addSeries({
data: data.data,
});
});
$.getJSON('./from-sql.php?callback=data&zone=1&ma=120', function(data) {
chart.addSeries({
data: data.data,
});
});
</script>
我不会认为33k点是一个巨大的数字，而且我默认启用了数据分组，我认为这会有所帮助。我过去曾经有渲染问题，禁用工具提示似乎解决了这个问题。我是在做一些内在错误并使其变慢的事情吗？
提前感谢任何建议和/或提示。