flot multiple line graph animation

问题

I have multiple series on a graph and would like to animate them but it is not working. I am using flot and animator plugin.

https://jsfiddle.net/shorif2000/L0vtrgc2/

var datasets = [{"label":"IT","curvedLines":{"apply":true},"animator":{"start":0,"steps":7,"duration":3000,"direction":"right"},"idx":0,"data":[{"0":1433156400000,"1":"095.07"},{"0":1435748400000,"1":"097.80"},{"0":1438426800000,"1":"096.72"},{"0":1441105200000,"1":"097.62"},{"0":1443697200000,"1":"097.68"},{"0":1446379200000,"1":"098.49"},{"0":1448971200000,"1":"098.59"},{"0":1451649600000,"1":"098.69"}]},{"label":"Network","curvedLines":{"apply":true},"animator":{"start":0,"steps":7,"duration":3000,"direction":"right"},"idx":1,"data":[{"0":1433156400000,"1":"095.07"},{"0":1435748400000,"1":"097.80"},{"0":1438426800000,"1":"096.72"},{"0":1441105200000,"1":"097.62"},{"0":1443697200000,"1":"097.68"},{"0":1446379200000,"1":"098.49"},{"0":1448971200000,"1":"098.59"},{"0":1451649600000,"1":"098.69"}]},{"label":"Success Rate","curvedLines":{"apply":true},"animator":{"start":0,"steps":7,"duration":3000,"direction":"right"},"idx":2,"data":[[1433156400000,98.58],[1433156400000,null],[1433156400000,95.18],[1433156400000,null],[1435748400000,null],[1438426800000,null],[1441105200000,null],[1443697200000,null],[1446379200000,null],[1448971200000,null],[1451649600000,null]]}];

var options = {"series":{"lines":{"show":true},"curvedLines":{"active":true}},"xaxis":{"mode":"time","tickSize":[1,"month"],"timeformat":"%b %y"},"grid":{"clickable":true,"hoverable":true},"legend":{"noColumns":3,"show":true}};

$.plotAnimator($('#CAGraph'), datasets, options);

Problem I have is when I add curved lines it does not work. https://github.com/MichaelZinsmaier/CurvedLines

回答1:

Without curvedLines plugin (like in the fiddle in your question):

1) If you have multiple data series and use animator, it will only animate the last series. All other series are drawn instantly. (You can see this in your fiddle when you comment out the third data series.)

2) Your last data series has only two points at the same date, so there is nothing to animate (this leads also to problems with the curvedLines plugin for this series).

To animate multiple data series one by one see this answer to another question.

With curvedLines plugin:

3) The curvedLines plugin doesn't work together with the animator plugin (probably because the animator plugin generates a new partial data series for each step). But we can work around this issue with these steps:

a) plot a curvedLines chart without animator,
b) read the data points from this chart and replace the original data,
c) change the options (deactivate curvedLines since the new data is already curved and adjust the step count to the new data),
d) plot the animated chart with the new data.

See this fiddle for a working example with one data series. Relevant code:

var plot = $.plot($('#CAGraph'), datasets, options);
var newData = plot.getData()[0].datapoints.points;

datasets[0].data = [];
for (var i = 0; i < newData.length; i = i+2) {
    datasets[0].data.push([newData[i], newData[i+1]]);
}
datasets[0].animator.steps = (newData.length / 2) - 1;
options.series.curvedLines.active = false;

var ani = $.plotAnimator($('#CAGraph'), datasets, options);

Full solution:

Combining the two parts above we get a fiddle which animates two curved lines one by one (the third data series is left out because of the issues mentioned under 2)). Relevant code:

var chartcount = datasets.length;
var chartsdone = 0;

var plot = $.plot($('#CAGraph'), datasets, options);
for (var i = 0; i < chartcount; i++) {
    var newData = plot.getData()[i].datapoints.points;
    datasets[i].data = [];
    for (var j = 0; j < newData.length; j = j + 2) {
        datasets[i].data.push([newData[j], newData[j + 1]]);
    }
    datasets[i].animator.steps = (newData.length / 2) - 1;
}

options.series.curvedLines.active = false;
var ani = $.plotAnimator($('#CAGraph'), [datasets[0]], options);
$("#CAGraph ").on("animatorComplete", function() {
    chartsdone++;
    if (chartsdone < chartcount) {
        ani = $.plotAnimator($('#CAGraph'), datasets.slice(0, chartsdone + 1), options);
    }
});

来源：https://stackoverflow.com/questions/35259594/flot-multiple-line-graph-animation

标签

javascript

jquery

flot