0
對於一個項目,我需要實現使用jqPlot一個實時更新的圖表。現場圖:性能問題
請看下面的jsfiddle:http://jsfiddle.net/fracu/HrZcj/242/ (爲簡單起見,值是隨機產生的)
我成功地設法做的工作,但我有性能問題:某些分鐘的圖表後運行瀏覽器開始變慢,直到關閉圖表選項卡。 (與Firefox和Chrome測試)
我看不出是哪裏的問題,因爲我沒有做什麼特別的,只是每型重構n秒與在圖表值存儲陣列圖表。
我遇到的另一個問題是,當我調整x軸的「滴答」定位在圖表的左側,他們不是沿軸均勻分佈。
能否請你給我什麼可能會發生的線索?
在此先感謝!
的Javascript:
var plot1 = $.jqplot('chart1', [new Array(1)], {
series: [{yaxis:'y2axis',showMarker:true,fill:false,neighborThreshold:3,rendererOptions:{smooth:true}}],
axes: {
xaxis: {renderer: $.jqplot.DateAxisRenderer,tickOptions:{formatString:'%H:%M:%S'}},
y2axis:{tickOptions:{formatString:'%.2f'}}
},
});
var myData = [], x, y, samples = 0, secsBuffer = 60, refreshInterval = 1, sampleWindow = secsBuffer/refreshInterval;
$("#refreshInterval").change(function() {
clearInterval(cInt);
cInt = window.setInterval(updateSeries, $("#refreshInterval").val() * 1000);
refreshInterval = $("#refreshInterval").val();
sampleWindow = secsBuffer/refreshInterval;
});
$("#secsBuffer").change(function() {
secsBuffer = $("#secsBuffer").val();
sampleWindow = secsBuffer/refreshInterval;
});
function updateSeries() {
if (samples > sampleWindow) {
var diff = samples - sampleWindow;
myData.splice(0, diff);
samples -= diff;
}
x = (new Date()).getTime();
y = Math.floor(Math.random() * 100);
myData.push([x, y]);
plot1.resetAxesScale();
plot1.axes.xaxis.numberTicks = 15;
plot1.axes.y2axis.numberTicks = 15;
plot1.axes.xaxis.min = x - (secsBuffer * 1000);
plot1.axes.xaxis.max = x;
plot1.series[0].data = myData;
plot1.replot();
samples++;
}
cInt = window.setInterval(updateSeries, refreshInterval * 1000);
謝謝您的回答GayashanNA。我已經在做我的代碼中的建議了。但是使用myData.splice(0,diff)代替myData.shift()im,其中diff是數組中超出樣本窗口的數據。 – Fracu
對不起。這是我的錯誤,我沒有看到。 – GayashanNA