5
ファイルはローカルにJSONという形式のデータがあります。 AJAX経由でこのファイルの出力をエコーアウトするスクリプトを作成しました。PHPデータファイルのサイズは59kです。アニメーションとシャドウを無効にするハイチャートの勧告に従った。グラフを読み込むと、レンダリングに非常に非常に時間がかかります。私は以下のスクリプトを貼り付けました。私はこのチャートをより速くレンダリングするために何ができるでしょうか？それがそのままで、これは間違いなく受け入れられません。ハイチャートチャートの作成とレンダリングのパフォーマンスを向上させるには
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
});
}
});
はこのアイデアを使用してみてください：http://www.highcharts.com/stock/demo/lazy-loading – svillamayor
@svilamayor、私は運なしていることを試してみました。 – user1471980
グラフに何点表示しますか？サーバーからデータを取得する時間ではなく、レンダリング時間であることを確認してください。 – svillamayor