我在本地有一个包含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
});
}
});