jqPlot動畫數據更改無需重新加載圖形

Question

我想要一個按鈕，用戶可以按下，以便圖形上的數據在動畫中更改，而不會再次從圖形底部開始顯示條形。以下是我希望我的jqPlot表現如何的示例：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate。如果還有另一個插件可以讓我這樣做，我還沒有結婚使用jqPlot。謝謝！

我當前的代碼如下：

function myReplot() { 
    var newdata = [[1,3],[2,6],[3,8],[4,11]]; 
    plot1.series[0].data = newdata; 
    plot1.replot(); 
} 

$(document).ready(function(){ 
    $.jqplot.config.enablePlugins = true; 
    var data = [[2, 6, 7, 10]]; 
    var ticks = ['a', 'b', 'c', 'd']; 

    plot1 = $.jqplot('chart1', data, { 
     // Only animate if we're not using excanvas (not in IE 7 or IE 8).. 
     animate: !$.jqplot.use_excanvas, 
     animateReplot: !$.jqplot.use_excanvas, 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      pointLabels: { show: true } 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: ticks 
      } 
     }, 
     highlighter: { show: false } 
    }); 

}); 

Answer 1

這是多麼接近我能得到。您可能想刪除條形標籤並只保留最終值。 JsFiddle link

function myReplot() { 
    var newdata = [[1,3],[2,6],[3,8],[4,11]]; 
    plot1.series[1].data = newdata; 
    plot1.replot(false); 
} 

$(document).ready(function(){ 
    $.jqplot.config.enablePlugins = true; 
    $("#button1").on("click",function(){ 
    myReplot(); 
    }); 
    var data = [[2, 6, 7, 10],[0,0,0,0]]; 
    var ticks = ['a', 'b', 'c', 'd']; 

    plot1 = $.jqplot('chart1', data, { 
     // Only animate if we're not using excanvas (not in IE 7 or IE 8).. 
     stackSeries : true, 
     animate: !$.jqplot.use_excanvas, 
     //animateReplot: !$.jqplot.use_excanvas, 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      pointLabels: { show: true, 
          stackedValue: true}, 
      color: "orange" 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: ticks 
      }, 
      yaxis:{ 
       min:0, 
       max:50 
      } 
     }, 
     highlighter: { show: false } 
    }); 

});