【发布时间】：2017-06-20 17:20:39
【问题描述】：
作为免责声明，我对 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 点是一个巨大的数字，并且从我所阅读的内容来看，默认情况下启用数据分组，我认为这会有所帮助。我过去遇到过渲染问题，禁用工具提示似乎可以解决这个问题。我是否在做一些本质上是错误的事情并让它变慢？
提前感谢您提供任何建议和/或提示。
【问题讨论】：
-
常规图表没有分组功能 - 要进行分组，您需要 Highstock 库和 StockChart（而不是 Chart）。尝试在 jsfiddle 或其他沙箱上重现问题 - 如果没有现场示例，就不可能说出问题所在。您还可以查看延迟加载示例highcharts.com/stock/demo/lazy-loading - 在缩放时获取数据比一次显示这么多点更有意义。也可以查看boost模块highcharts.com/blog/news/175-highcharts-performance-boost
-
@morganfree，使用 boost 模块显着提高了性能。所有系列情节都非常敏感。谢谢！
标签： javascript highcharts