javascript - 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 链接

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

});