flot多线图动画 [英] flot multiple line graph animation

问题描述

我在图表上有多个系列，并希望为它们制作动画，但它不起作用。我正在使用flot和animator插件。

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

我遇到的问题是当我添加曲线时它不起作用。 https://github.com/MichaelZinsmaier/CurvedLines

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

推荐答案

没有curvedLines插件（就像你问题中的小提琴一样）：

1）如果您有多个数据系列并使用动画制作器，则它只会为最后一个系列设置动画。所有其他系列都会立即绘制。 （当你注释掉第三个数据系列时，你可以在你的小提琴中看到这一点。）

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）你的上一个数据系列在同一天只有两个点，所以那里没有任何动画（这也导致本系列的curveLines插件出现问题）。

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.

使用curvedLines插件：

3）curvedLines插件不能与动画插件一起使用（可能是因为动画插件为每个步骤生成一个新的部分数据系列）。但我们可以通过以下步骤解决此问题：

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）绘制没有动画制作者的curveLines图表，

b）读取此图表中的数据点并替换原始数据，

c）更改选项（由于新数据已经弯曲并将步数调整为新数据，因此停用curveLines），

d）使用新数据绘制动画图表。

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.

请参阅小提琴。相关代码：

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

完整解决方案：

结合上面两部分，我们得到一个小提琴，逐个动画两条曲线（由于2中提到的问题，第三个数据系列被遗漏））。相关代码：

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

这篇关于flot多线图动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！