jqPlot animate data change without reloading graph

问题

I want to have a button that users can press so that the data on the graph changes in an animation without the bars starting from the bottom of the graph again. Here's an example of how I would like my jqPlot to behave: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate. I'm not married to using jqPlot if there's another plugin that will let me do this. Thanks!

My current code is as follows:

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

});

回答1:

This is how close i could get. You might want to remove the bar labels and keep only final values. 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 }
    });

});

来源：https://stackoverflow.com/questions/18535670/jqplot-animate-data-change-without-reloading-graph

标签

javascript

jquery

graph

jqplot