如何动画jquery flot line 1 by 1

Question

我想在屏幕截图中看到包含3行的jQuery flot图表的动画。

场景是“当页面加载时，我想要从左边开始设置线条并一直向右绘制。这是为所有线条单独完成的，直到绘制完所有3条线。”< / p>

我从2天开始一直在寻找这个，但是没有找到任何方法来实现这一点。也试过这个插件http://www.codicode.com/demo/flotanimator但是，它只是动画1行，这个插件中的每个例子都基于1线。

任何有关插件的帮助或信息都可以实现这一目标。

Answer 1

这可以通过使用插件的animatorComplete事件来实现。它的工作原理如下：

1. 使用动画绘制第一个数据系列并隐藏第二个和第三个数据系列
2. 绘制没有动画的第一个数据系列和带动画的第二个数据系列，隐藏第三个数据系列
3. 绘制第一个和第二个数据系列，没有动画，第三个数据系列包含动画

如果您将所有数据都放在一个数据系列中，则可以通过使用for循环和计数器轻松实现。有关两个数据系列的简单示例，请参阅此fiddle。