19

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

返信をいただければ幸いです。ありがとう。

4

9 に答える 9

26

やりたいことは、新しいチャートを描画するときに jqPlot の .replot() メソッドを呼び出すことです。ajax 呼び出しを次のように変更します。

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

            $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)).replot();
        }});
于 2011-03-07T00:41:41.957 に答える
13

次のように、チャート オブジェクトをスクリプト内のグローバル変数として使用してみてください。

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

于 2012-06-05T16:56:57.327 に答える
8

グラフを再描画する前に毎回、既存の 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));
}});
于 2012-08-24T10:49:25.720 に答える
2

ページをリロードせずに新しいデータでプロットを動的に更新する方法の完全な例を次に示します。

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

これは、この男の投稿の簡略版です：動的なajaxデータを使用したJQPlot自動更新チャート

于 2013-03-18T06:55:28.523 に答える
2

スクリプトで生成されたデータの答えを見つけるのに時間がかかったので、ここに投稿します。上記のコードを組み合わせて使用​​しました。

スクリプト ファイル内に plot3 という名前のグローバル変数を作成しました。次に、以下の関数を作成しました。これが再描画ブール値で呼び出されると、破棄して再描画する必要があるか、初めて描画する必要があるかを決定します。

コードの最初のビットは、(別の関数で更新されている) jqgrid からデータを取得し、配列を更新します。2 番目のビットは、データの長さに応じて 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'
              }
            },
          }
      });
     }
}
于 2012-09-21T14:07:22.923 に答える
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));
    }});
于 2011-03-29T21:31:15.873 に答える
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
      }
    }
  });
    }});

  });
于 2012-02-16T10:40:27.757 に答える
-2

私が得た最良の方法は、描画している div を、新しいグラフを描画する前にクリアすることです。

$('#graph_area).children().remove();
于 2012-09-25T07:01:55.793 に答える