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

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

---

如蒙答复，将不胜感激。谢谢。

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

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

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

---

也许这会有帮助。另一方面，我在让replot工作时遇到了问题，但我使用的是数据渲染器

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

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

希望这有帮助

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

  });

---

尝试将图表对象作为脚本中的全局变量，如下所示：

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

然后，在成功重置数据时，axesScale和replot为：

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

---

Ref:

每次重新绘制图形之前，只需销毁现有的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));
}});

---

我花了一段时间才找到脚本生成数据的答案，所以我将在这里发布这篇文章。我使用了上述代码的组合

我在脚本文件中创建了一个名为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'
              }
            },
          }
      });
     }
}

函数绘图（bRedraw）{
var testTimes=[]；
testTimes=$（'#polarizationTable'）.jqGrid（'getCol'，'TestTime'，testTimes，false）；
var RdgA=$（“#偏振表”）.jqGrid（'getCol'，'RdgA'，RdgA，false）；
var RdgB=$（'#polarizationTable'）.jqGrid（'getCol'，'RdgB'，RdgB，false）；
var readingLineA=[]；
对于（var i=0；i我得到的最佳方法是，在绘制新图形之前，先清除正在绘制的div

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

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

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


新数据点
var storedData=[3,7]；
变量1；
渲染图（）；
$（“按钮”）。单击（函数（）{
doUpdate（）；
});
函数renderGraph（）{
如果（图1）{
plot1.destroy（）；
}
plot1=$.jqplot（'chart1'，[storedData]）；
}
函数doUpdate（）{
var newVal=Math.random（）；
存储数据推送（newVal）；
渲染图（）；
}

这是这家伙帖子的简化版本：
$（'#chart.html（''）

chart是创建图表的DIV

这就成功了，没有什么花哨的效果。
谢谢你的回答，但这不起作用。它还在上一个分区的上方绘制图表。对我来说不起作用，只是在旧分区的上方绘制另一个图表。目前我正在调用jQuery（“#chart1”）.html（”），强制清除上一个分区，然后再次绘制它（看起来不错，但会导致内存泄漏…。Shivanand Darur（上图）提供的destroy（）解决方案性能良好。+1用于destroy（）方法转义，这是在动态调整图表大小时使我的ipad浏览器崩溃的主要原因。谢谢！！我在IE中遇到问题，这解决了问题-谢谢