我在本地有一个具有
JSON格式数据的文件.我创建了很少的
PHP脚本,以便在通过AJAX调用时回显此文件的输出.数据文件的大小为59k.我按照highcharts建议禁用动画和阴影.当我加载图表时,渲染需要非常长的时间.我已粘贴下面的脚本.我能做些什么来更快地渲染这个图表？就目前而言,这绝对是不可接受的.
[{"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
如果在你的情况下你有太多的点可能你应该采取一些机制来划分代表性样本,因为它没有意义显示一个图表,眼睛无法区分不同的值.
