javascript 如何提高 highcharts 图表创建和渲染的性能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17550014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you increase the performance of highcharts chart creation and rendering
提问by user1471980
I have a file locally that has JSONformatted data. I have created little PHPscript to echo out the the output of this file when call via AJAX. The data file's size is 59k. I followed the highcharts recommendation to disable animation and shadow. when I load the chart, it takes a very very very long time to render. I have pasted the script below. Any ideas what I can do to render this chart faster? As it stands, this is definitely not acceptable.
我在本地有一个已JSON格式化数据的文件。我创建了一个PHP小脚本来在通过AJAX. 数据文件的大小是59k. 我按照 highcharts 的建议禁用动画和阴影。当我加载图表时，渲染需要非常非常长的时间。我已经粘贴了下面的脚本。有什么想法可以更快地呈现此图表吗？就目前而言，这绝对是不可接受的。
echo_file.phpoutput looks like this:
echo_file.php输出如下所示：
[{"name":"loess","data":[[1373241600000,3.49571041760408],[1373241660000,3.4844505982485],[1373241720000,3.47324293684199],[1373241780000,3.46208745646435],[1373241840000,3.45098418019539],[1373241900000,3.43993313111491],[1373241960000,3.42893433230273],[1373242020000,3.41798780683864],[1373242080000,3.4070935778
43611722495],[1373243400000,3.18069824879358],[1373243460000,3.17101320762565],[1373243520000,3.16138101680096],[1373243580000,3.15180169939934],[1373243640000,3.14227527850057],[1373243700000,3.13280177718446],[1373243760000,3.12338121853083],[1373243820000,3.11401362561948],[1373243880000,3.10469902153021]]}]
this is the script:
这是脚本：
$(document).ready(function() {
var seriesOptions = [],
yAxisOptions = [],
colors = Highcharts.getOptions().colors;
function myAjax() {
$.ajax({
url: 'echo_file.php',
datatype: 'json',
success: function(data) {
seriesOptions=data;
createChart();
},
cache: false
});
}
setInterval(myAjax, 300000);
function createChart() {
$('#container').highcharts('StockChart', {
chart: {
animation: false,
shadow: false
},
title : {
text : 'CPU Utilization'
},
plotOptions: {
series: {
lineWidth: 2
}
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'hourly'
}, {
type: 'all',
text: 'All'
}]
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
minPadding:0.02,
maxPadding:0.02,
ordinal: false
},
yAxis: {
labels: {
formatter: function() {
//return (this.value > 0 ? '+' : '') + this.value + '%';
return (this.value);
}
}
},
yAxis : {
title : {
text : '% CPU Utilization'
},
min:0,
max:100,
plotLines : {
value : 70,
color : '#FFA500',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'Threshold',
align:'right'
}
}
},
scrollbar: {
enabled: true
},
navigator : {
adaptToUpdatedData: false
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
采纳答案by svillamayor
Even if the file is local data must travel to the browser, since the chart is drawn there, here is an example with 52k points and the chart is loaded pretty fast.
即使文件是本地数据，也必须传输到浏览器，因为图表是在浏览器中绘制的，这里是一个包含 52k 点的示例，并且图表加载速度非常快。
See http://highcharts.com/stock/demo/data-grouping
见http://highcharts.com/stock/demo/data-grouping
If in your case you have too many points maybe you should take some mechanism to divide on representative samples, as it has no sense to show a chart where the eye can not distinguish between the different values??.
如果在你的情况下你有太多的点，也许你应该采取一些机制来划分代表性样本，因为显示一个眼睛无法区分不同值的图表是没有意义的？？。
回答by TWilly
Highcharts just released a boost module that helps speed up charts with large amounts of data points. You need a modern browser to use this.
Highcharts 刚刚发布了一个 boost 模块，可以帮助加速具有大量数据点的图表。您需要一个现代浏览器才能使用它。
https://github.com/highslide-software/highcharts.com/blob/master/js/modules/boost.src.js
https://github.com/highslide-software/highcharts.com/blob/master/js/modules/boost.src.js
This is my highcharts options when I want to speed up rendering. It removes all animation, click events and tooltips.
当我想加快渲染速度时，这是我的 highcharts 选项。它会删除所有动画、点击事件和工具提示。
Highcharts.setOptions({
plotOptions: {
area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
},
chart: {
reflow: false,
events: {
redraw: function() {
console.log("highcharts redraw, rendering-done");
$('body').addClass('rendering-done');
}
},
animation: false
},
tooltip: {
enabled: false,
animation: false
},
exporting: {
enabled:false
},
credits: {
enabled: false
}
});
