本文介绍了flot多线图动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在图表上有多个系列,并希望为它们制作动画,但它不起作用。我正在使用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.

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

我遇到的问题是当我添加曲线时它不起作用。

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:

请参阅。相关代码:

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多线图动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 03:59
查看更多