如何刷新jqplot条形图而不重绘图表

9 回答

• 2

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

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

  回复于 2024-05-04T00:58:28+08:00
• 8

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

  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

  回复于 2024-05-04T00:58:28+08:00
• 13

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

  回复于 2024-05-04T00:58:28+08:00
• 2

  花了一些时间找到脚本生成数据的答案，所以我将在这里发布 . 我使用了上面代码的组合 .

  我在我的脚本文件中创建了一个名为plot3的全局var . 然后创建了以下功能 . 当使用重绘布尔值调用它时，它确定我是否需要首次销毁和重绘或绘制 .

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

  回复于 2024-05-04T00:58:28+08:00
• -1

  以下是如何使用新数据动态更新绘图而无需重新加载页面的完整示例：

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

  它's a simplified version of this guy'的帖子：JQPlot auto refresh chart with dynamic ajax data

  回复于 2024-05-04T00:58:28+08:00
• 26

  $（ '＃图表） . html的（''）;

  图表是创建图表的DIV .

  这样做的伎俩，没有什么花哨的有效 .

  回复于 2024-05-04T00:58:28+08:00
• 1

  也许这会有所帮助 . 另一方面，我在让replot工作时遇到问题，但我使用的是dataRenderer .

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

  回复于 2024-05-04T00:58:28+08:00
• 1

  希望这可以帮助

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

  回复于 2024-05-04T00:58:28+08:00
• 2

  我得到的最好的方法是，你绘制的div，在绘制新图形之前清楚 .

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

  回复于 2024-05-04T00:58:28+08:00