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

});

jqPlot动画数据更改，无需重新加载图形

1 个答案: