如何为jquery flot第1行动画 [英] How to animate jquery flot lines 1 by 1

问题描述

我想为我的jQuery flot图表设置动画，该屏幕由3条线组成，如屏幕截图所示.

I want to animate my jQuery flot chart consist of 3 lines as you can see in the screenshot.

方案是加载页面时，我要从左侧开始对线进行动画处理，并一直向右绘制.要对所有行分别进行此操作，直到绘制完所有3条线为止."

The scenario is "when the page is loaded, i want to animate the line from the left and draw all the way to the right.This is to be done individually for all the lines until all 3 lines are drawn."

我从2天开始一直在搜索此文件，但没有找到实现此目的的任何方法.还尝试了此插件

I have been searching for this from 2 days but haven't found any method to achieve this.Also tried this plugin http://www.codicode.com/demo/flotanimator but, it is only animating 1 line and every example in this plugin is based on 1 line.

任何帮助或有关插件的信息都可以实现.

Any help or information about plugin which can achieve this is appreciated.

推荐答案

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

This is possible by using the animatorComplete event of the plugin. It works something like this:

1. 用动画绘制第一个数据系列并隐藏第二个和第三个数据系列
2. 绘制不带动画的第一个数据系列，并绘制不带动画的第二个数据系列，隐藏第三个数据系列
3. 在没有动画的情况下绘制第一个和第二个数据序列，在有动画的情况下绘制第三个数据

如果将所有数据放在一个数据系列数组中，则可以使用for循环和计数器轻松实现.有关包含两个数据系列的简单示例，请参见小提琴.

If you have all your data in one array of data series this is easily acheived by using a for loop and a counter. For a simple example with two data series see this fiddle.

这篇关于如何为jquery flot第1行动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！