浮动多线图动画

Question

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

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

Answer 1

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

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

2) 您的最后一个数据系列在同一日期只有两个点，因此没有动画效果（这也会导致该系列的曲线插件出现问题）。

要一个一个地为多个数据系列制作动画，请参阅answer 到另一个问题。

带有曲线插件：

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

a) 在没有动画师的情况下绘制曲线图，
b) 从此图表中读取数据点并替换原始数据，
c) 更改选项（停用曲线线，因为新数据已经弯曲，并将步数调整为新数据），
d) 用新数据绘制动画图表。

请参阅此fiddle，了解一个数据系列的工作示例。相关代码：

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

完整解决方案：

结合上面的两个部分，我们得到一个fiddle，它一个接一个地为两条曲线设置动画（第三个数据系列由于2下提到的问题而被省略）。相关代码：

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