如何提高HighChart创建和呈现的性能
我在本地有一个具有
JSON
格式化数据的文件。我已经创建了一些PHP
脚本,以便在通过AJAX
调用时回显该文件的输出。数据文件的大小为59k
。我按照Highcharts的建议禁用了动画和阴影。当我加载图表时,渲染需要很长时间。我已经粘贴了下面的脚本。你知道我能做些什么来更快地呈现这张图表吗?照目前情况来看,这绝对是不可接受的。
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]]}]
这是脚本:
$(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
});
}
});
解决方案
即使文件是本地文件,也必须将数据传输到浏览器,由于图表是在那里绘制的,因此这里是一个52k点的示例,图表加载速度相当快。
参见http://highcharts.com/stock/demo/data-grouping
如果您的点数太多,您可能应该采取某种机制来划分有代表性的样本,因为显示人眼无法区分不同值的图表是没有意义的。
参见http://highcharts.com/stock/demo/lazy-loading
相关文章