我在图形上有多个系列,想为其设置动画,但不起作用。我正在使用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
最佳答案
没有CurveLines插件(例如您问题中的小提琴):
1)如果有多个数据系列并使用动画器,则它将仅对最后一个系列进行动画处理。所有其他系列均立即绘制。 (在注释掉第三个数据系列时,您可以在小提琴中看到这一点。)
2)您的最后一个数据系列在同一日期只有两个点,因此没有任何动画(这也导致该系列的CurvedLines插件出现问题)。
要为多个数据系列一个动画,请参见answer另一个问题。
使用curvedLines插件:
3)CurvedLines插件无法与animator插件一起使用(可能是因为animator插件为每个步骤生成了一个新的部分数据系列)。但是我们可以通过以下步骤解决此问题:
a)在没有动画师的情况下绘制CurvedLines图表,
b)从该图表中读取数据点并替换原始数据,
c)更改选项(由于已经弯曲了新数据,因此停用了curvedLines,并将步数调整为新数据),
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);
}
});