作为免责声明，我对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 点是一个很大的数字，从我所读到的数据来看，默认情况下启用数据分组，我认为这会有所帮助。我过去遇到渲染问题，禁用工具提示似乎可以解决这个问题。我是否在做一些本质上是错误的事情并使其变慢？
提前感谢您的任何建议和/或提示。
>33k足以降低性能。使用特殊的图表组，如主从图表或高库存系列