jqPlot: cách cập nhật trực tiếp biểu đồ

Question

Tôi không thể tự tìm ra hoặc tìm một ví dụ thích hợp về cách thực hiện cập nhật trực tiếp trong jqPlot theo cách tương tự như được hiển thị trong cột cao này example.

Answer 1

Dựa trên this, tôi đã chuẩn bị các ví dụ sau:

$(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.

Answer 2

tôi đã thêm một ví dụ về JSFiddle jsfiddle.net/meccanismocomplesso/QAr4r/ mà tái tạo ví dụ bạn được liên kết.

Tôi đã cố gắng giữ cho chủ đề càng chung chung càng tốt. Nếu bạn cần giải thích thêm đọc this article về điều đó.

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

Answer 3

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