如何在不重繪圖表的情況下刷新jqplot條形圖

Question

我有一個jqplot條形圖，我希望在用戶更改下拉列表中的值時更改圖表數據。這很有效，但問題在於每次用戶更改值時，條形圖都會重新繪製，而不是重繪。

如何更新或重新加載酒吧而不再繪製整個事情？是否有任何財產價值被設定？根據AJAX調用

圖表數據的變化：

$.ajax({ 
    url: '/Home/ChartData', 
    type: 'GET', 
    data: { Id: Id }, 
    dataType: 'json', 
    success: function (data) { 
     $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); 
}}); 

function CreateBarChartOptions(xAxis) { 
    var optionsObj = { 
     title: 'Stat', 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: xAxis 
      }, 
      yaxis: { min: 0 } 
     }, 
     series: [{ label: 'A' }, { label: 'B'}], 

     seriesDefaults: { 
      shadow: true, 
      renderer: $.jqplot.BarRenderer, 
      rendererOptions: { 
       barPadding: 8, 
       barMargin: 10 
      } 
     }, 

    }; 
    return optionsObj; 
} 

的答覆將高度讚賞。謝謝。

Answer 1

當您繪製新圖表時，您要做的是調用jqPlot的.replot（）方法。改變你的阿賈克斯看起來是這樣的：

$.ajax({ 
     url: '/Home/ChartData', 
     type: 'GET', 
     data: { Id: Id }, 
     dataType: 'json', 
     success: function (data) { 

      $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)).replot(); 
     }}); 

Answer 2

也許這將有所幫助。另一方面，我有重新工作的問題，但我使用的是dataRenderer。

$.ajax({ 
    url: '/Home/ChartData', 
    type: 'GET', 
    data: { Id: Id }, 
    dataType: 'json', 
    success: function (data) { 

     $('chartDiv').empty(); 
     $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); 
    }}); 

Answer 3

希望這有助於

jQuery(document).ready(function(){ 
    jQuery.ajax({ 
    url: '/review_graphs/show', 
    type: 'GET', 

    success: function (data) { 

     var plot1 = jQuery.jqplot('chartDiv', [data,data], 
    { 
    title: 'Bianual Reviews percentage', 
    series:[ 
     { 
     renderer:jQuery.jqplot.BarRenderer, 
     label:'Average', 
     stackSeries: true, 
     dragable: {color: '#ff3366',constrainTo: 'x'}, 
     trendline:{show: false} 
     }, 
     { 
     label:'Trend Line',trendline:{show: false}} 
     ], 
    legend: { 
      show: true, 
      placement: 'outsideGrid' 
     }, 
    axesDefaults: { 
     tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer , 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
     renderer: jQuery.jqplot.CategoryAxisRenderer 
     } 
    } 
    }); 
    }}); 

    }); 

Answer 4

試着讓你的圖表對象在你的腳本作爲一個全局變量：

var plot1 = $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); 

然後在成功重置數據，axesScale和重繪爲：

var newData = [['a',1],['b',2],['c',3]]; 
plot1.series[0].data = newData; 
plot1.resetAxesScale(); 
plot1.replot(); 

Re f：https://groups.google.com/group/jqplot-users/browse_thread/thread/59df82899617242b?pli=1

Answer 5

每次重繪圖之前，只要銷燬現有的1。

$.ajax({ 
    url: '/Home/ChartData', 
    type: 'GET', 
    data: { Id: Id }, 
    dataType: 'json', 
    success: function (data) { 
     if(plot) 
     { 
      plot.destroy(); 
     } 
     var plot=$.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); 
}}); 

Answer 6

花了我一段時間找到腳本生成的數據的答案，所以我打算在這裏發佈這個。我使用了上述代碼的組合。

我在腳本文件中創建了一個名爲plot3的全局變量。然後創建下面的函數。當用重繪布爾值調用它時，它確定是否需要首次銷燬並重繪或繪製。

代碼的第一部分是從我的jqgrid獲取數據（正在使用不同的函數進行更新），並更新數組。第二位決定了我的間隔時間，在X軸上取決於我的數據長度。

function DrawGraph(bRedraw){ 
     var testTimes = []; 
     testTimes = $('#polarizationTable').jqGrid('getCol', 'TestTime', testTimes, false); 
     var RdgA = $('#polarizationTable').jqGrid('getCol', 'RdgA', RdgA, false); 
     var RdgB = $('#polarizationTable').jqGrid('getCol', 'RdgB', RdgB, false); 

     var readingLineA = []; 
     for (var i=0; i<testTimes.length; i++){ 
     readingLineA.push([testTimes[i], RdgA[i]]); 
     } 

     var readingLineB = []; 
     for (var i=0; i<testTimes.length; i++){ 
     readingLineB.push([testTimes[i], RdgB[i]]); 
     } 

    var maxX = $("#testLength").val(); 
    var lengthX = testTimes.length; 
    var tickIntervalX = Math.round(maxX/10); 
    if(bRedraw == true) 
    { 
     plot3.destroy(); 
     bRedraw = false; 
    } 
    if(bRedraw == false) 
    { 
     plot3 = $.jqplot('chart3', [readingLineA, readingLineB], 
     { 
      title:'Graph', 
      series:[{label:'Reading - A'}, {label:'Reading - B'} ], 
      legend:{show:true, location:'se'}, 
      // You can specify options for all axes on the plot at once with 
      // the axesDefaults object. Here, we're using a canvas renderer 
      // to draw the axis label which allows rotated text. 
      axes:{ 
      xaxis:{ 
       label:'Minutes', 
       syncTicks: true, 
       min: 0, 
       numberTicks: 10, 
       tickInterval: tickIntervalX, 
       max: maxX*1.1, 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       labelOptions: { 
       fontSize: '12pt' 
       }, 
      }, 
      yaxis:{ 
       label:'Data', 
       min: 0, 
       numberTicks: 10, 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       labelOptions: { 
       fontSize: '12pt' 
       } 
      }, 
      } 
     }); 
    } 
} 

Answer 7

我得到的最好的方法是，你繪製的div，在你繪製新圖之前清除它。

$('#graph_area).children().remove(); 

Answer 8

下面是如何動態地用新數據更新劇情無需重新加載頁面的完整例子：

<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div> 
    <button>New data point</button> 

    <script type="text/javascript"> 
    var storedData = [3, 7]; 

    var plot1; 
    renderGraph(); 

    $('button').click(function() { 
     doUpdate(); 
    }); 

    function renderGraph() { 
     if (plot1) { 
      plot1.destroy(); 
     } 
     plot1 = $.jqplot('chart1', [storedData]); 
    } 

    function doUpdate() { 
     var newVal = Math.random(); 
     storedData.push(newVal); 
     renderGraph(); 
    } 
    </script> 

這是這傢伙的帖子的簡化版本：JQPlot auto refresh chart with dynamic ajax data

Answer 9

$（ '＃圖表）。HTML（ ''）;

圖表是創建圖表的DIV。

這樣做的伎倆，沒有什麼花哨的有效。