如何在不重绘图表的情况下刷新 jqplot 条形图

Posted 2023-02-22

【中文标题】如何在不重绘图表的情况下刷新 jqplot 条形图

【英文标题】：How to refresh jqplot bar chart without redrawing the chart

【发布时间】：2011-07-07 21:13:33

【问题描述】：

我有一个 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;

我们将不胜感激。谢谢。

【参考方案1】：

您要做的是在绘制新图表时调用 jqPlot 的 .replot() 方法。将您的 ajax 调用更改为如下所示：

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

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

【讨论】：

感谢您的回答，但这不起作用。它还在前一个之上绘制图表。

对我不起作用，只是在旧图表上绘制另一个图表。目前我正在调用 jQuery("#chart1").html('');强制清除前一个 div，然后重新绘制它。

:( 看起来不错，但会导致内存泄漏...... Shivanand Darur 的“.destroy()”解决方案（上图）表现良好。

【参考方案2】：

尝试将图表对象作为脚本中的全局变量：

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(); 

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

【参考方案3】：

每次重绘图表前，只要销毁已有的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));
);

【讨论】：

我无法让它在 IE 中运行，这解决了它 - 谢谢

【参考方案4】：

我花了一段时间才找到脚本生成数据的答案，所以我将在此处发布此内容。我使用了上述代码的组合。

我在脚本文件中创建了一个名为 plot3 的全局变量。然后创建了以下函数。当使用 redraw 布尔值调用它时，它会确定我是否需要销毁并重绘或第一次绘制。

第一段代码的作用是从我的 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'
              
            ,
          
      );
     

【参考方案5】：

这是一个完整示例，说明如何在不重新加载页面的情况下使用新数据动态更新绘图：

    <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

【讨论】：

+1 用于 destroy() 方法转义，这是动态调整图表大小时导致 ipad 浏览器崩溃的主要原因。谢谢！！

【参考方案6】：

$('#chart).html('');

chart 是创建图表的 DIV。

这可以解决问题，没有什么花哨的效果。

【参考方案7】：

也许这会有所帮助。另一方面，我根本无法让 replot 工作，但我正在使用 dataRenderer。

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

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

【参考方案8】：

希望对你有帮助

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
      
    
  );
    );

  );

【参考方案9】：

我得到的最好方法是，在你绘制新图表之前，在你绘制的 div 中清除它。

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