jqPlot：如何更新圖表

我無法弄清楚我自己或找到一個正確的例子來說明如何在jqPlot中以類似的方式執行實時更新，如本高點example所示。jqPlot：如何更新圖表

2012-05-05 doberkofler

+1我喜歡你正在努力實現的目標。你已經有一些代碼？你可以在http://jsfiddle.net分享嗎？ – Boro

我在我的原帖中發佈了一個關於jsFiddle的例子。 – doberkofler

是的，我注意到了這個例子。雖然在我以前的評論中，我指的是你爲'jqPlot'編寫的代碼，所以我們可以從你使用'jqPlot'開始工作。 – Boro

基於this，我製備了以下示例：

$(document).ready(function() { 
    var plot1 = $.jqplot('chart1', [new Array(1)], { 
     title: 'Live Random Data', 
     series: [ 
      { 
      yaxis: 'y2axis', 
      label: '', 
      showMarker: false, 
      fill: false, 
      neighborThreshold: 3, 
      lineWidth: 2.2, 
      color: '#0571B6', 
      fillAndStroke: true} 
     ], 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.DateAxisRenderer, 
       tickOptions: { 
        formatString: '%H:%M:%S' 
       }, 
       numberTicks: 10 
      }, 
      y2axis: { 
       min: 100, 
       max: 150, 
       tickOptions: { 
        formatString: '%.2f' 
       }, 
       numberTicks: 15 
      } 
     }, 
     cursor: { 
      zoom: false, 
      showTooltip: false, 
      show: false 
     }, 
     highlighter: { 
      useAxesFormatters: false, 
      showMarker: false, 
      show: false 
     }, 
     grid: { 
      gridLineColor: '#333333', 
      background: 'transparent', 
      borderWidth: 3 
     } 
    }); 

    var myData = []; 
    var x = (new Date()).getTime() - 101000; 
    var y; 
    var i; 
    for (i = 0; i < 100; i++) { 
     x += 1000; 
     y = Math.floor(Math.random() * 100); 
     myData.push([x, y]); 
    } 

    plot1.series[0].data = myData; 
    plot1.resetAxesScale(); 
    plot1.axes.xaxis.numberTicks = 10; 
    plot1.axes.y2axis.numberTicks = 15; 
    plot1.replot(); 

    function updateSeries() { 
     myData.splice(0, 1); 
     x = (new Date()).getTime(); 
     y = Math.floor(Math.random() * 100); 
     myData.push([x, y]); 

     plot1.series[0].data = myData; 
     plot1.resetAxesScale(); 
     plot1.axes.xaxis.numberTicks = 10; 
     plot1.axes.y2axis.numberTicks = 15; 
     plot1.replot(); 
    } 

    window.setInterval(updateSeries, 1000); 
});

See this jsfiddle to test it out.

來源

2012-08-16 18:37:37 Fracu

這不工作了。 – uesports135

@ uesports135我只是試過它，它的工作原理，請你再試一次嗎？ – Fracu

不適合我。 – nomad

我添加上的jsfiddle jsfiddle.net/meccanismocomplesso/QAr4r/其再現你鏈接的示例的示例。

我試圖保持主題儘可能一般。如果您需要更多解釋請閱讀this article。

var plot1 = $.jqplot('myChart', [data], options); 
... 
plot1.series[0].data = data; // update the graph

來源

2013-12-24 12:48:38

var plot1; 

function updatePlot(data){ 
plot1 = $.jqplot('myChart', [data], options); 
} 


function reDrawPlot(data){` 
updatePlot(data); 
plot1.replot(); 
} 

.... 
initialize plot 
plot1 = $.jqplot('myChart', [data], options); 
.... 


call function reDrawPlot with the new data as a parameter

來源

2014-05-23 21:02:44

jqPlot：如何更新圖表

回答

相關問題