flot 多线图动画

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

没有 curvedLines 插件（就像你问题中的 fiddle）：

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

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

要对多个数据系列进行动画处理，请参阅此 answer 到另一个问题。

使用 curvedLines 插件:

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

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.

有关一个数据系列的工作示例，请参阅此 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);
    }
});

flot 多线图动画

flot multiple line graph animation

javascript

jquery

flot