flot多线图动画

我在图表上有多个系列，并希望为它们设置动画，但它不起作用。 我正在使用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插件（就像你问题中的小提琴）：

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

2）你的最后一个数据系列在同一天只有两个点，所以没有任何动画（这也导致了本系列的curveLines插件的问题）。

要逐个动画多个数据系列，请参阅另一个问题的答案 。

使用curvedLines插件：

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

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

有关一个数据系列的工作示例，请参阅此小提琴 。 相关代码：

 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中提到的问题，第三个数据系列被遗漏））。 相关代码：

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