Javascript flot多线图动画

我有一个图形上的多个系列，并希望他们的动画，但它不工作。我正在使用flot和animator插件

---

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

没有曲线插件（就像你问题中的小提琴）：

1） 如果您有多个数据系列并使用animator，它将仅为最后一个系列设置动画。所有其他系列都会立即绘制。（在注释第三个数据系列时，您可以在小提琴上看到这一点。）

2） 您的上一个数据系列在同一日期只有两个点，因此没有任何动画（这也会导致此系列的curvedLines插件出现问题）

要逐个设置多个数据系列的动画，请参见下面的问题

带曲线插件：

3） curvedLines插件不能与animator插件一起工作（可能是因为animator插件为每个步骤生成新的部分数据系列）。但我们可以通过以下步骤解决此问题：

a） 在没有动画师的情况下绘制曲线图，
b） 从该图表中读取数据点并替换原始数据，
c） 更改选项（由于新数据已弯曲，因此停用曲线，并将步长计数调整为新数据），
d） 用新数据绘制动画图表

有关一个数据系列的工作示例，请参见此。相关代码：

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

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

var plot=$.plot（$（'CAGraph'），数据集，选项）；
var newData=plot.getData（）[0].datapoints.points；
数据集[0]。数据=[]；
对于（变量i=0；i

完整解决方案：

结合以上两部分，我们得到了一个动画，它一个接一个地为两条曲线制作动画（第三个数据系列由于下面提到的问题而被省略）。相关代码：

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

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

var chartcount=datasets.length；
var-chartsdone=0；
变量图=$.plot（$（'#CAGraph'），数据集，选项）；
对于（变量i=0；i