How to animate jquery flot lines 1 by 1

问题

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

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."

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.

回答1:

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

1. Plot first data series with animation and hide second and third data series
2. Plot first data series without animation and second data series with animation, hide third data series
3. Plot first and second data series without animation and third one with animation

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.

来源：https://stackoverflow.com/questions/32644779/how-to-animate-jquery-flot-lines-1-by-1