2012-11-18 85 views
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); 

回答

0

我相信這是由於繪圖涉及到一些處理和更多的數據意味着更多的處理,這就是爲什麼它會減慢一段時間後,瀏覽器的事實。

我可以建議你在plot達到一定的時間範圍後從數據數組的開始處開始移動。

if(time limit has reached) myData.shift(); 

它可能不是最好的解決方案。但是,你仍然可以查看數據的最後10分鐘(或任何時間你決定開始修剪陣列)對劇情沒有崩潰的瀏覽器。

+0

謝謝您的回答GayashanNA。我已經在做我的代碼中的建議了。但是使用myData.splice(0,diff)代替myData.shift()im,其中diff是數組中超出樣本窗口的數據。 – Fracu

+0

對不起。這是我的錯誤,我沒有看到。 – GayashanNA