为什么Chartjs折线图没有设置新值的动画？

Question

我正在使用chartjs折线图显示时间数据，我想使用ajax调用中的新值进行更新。

我在X轴上有时间（每15天间隔1天），在Y轴上只有数字。

因此，它看起来如下所示。

我的设置如下。

        this.chartSetup = {
          type: 'line',
          data: {
            labels: this.times,
            datasets: [{
              fill: true,
              lineTension: 0.1,
              backgroundColor: "rgba(75,192,192,0.4)",
              borderColor: "rgba(75,192,192,1)",
              label: title,
              data: this.vals,
              pointRadius: 0,
            }]
          },
          options: {
            spanGaps: true,
            legend: {
              position: 'bottom',
              labels: {
                boxWidth: 10
              }
            },
            tooltips: {
              enabled: false
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              xAxes: [{
                ticks: {
                  stepSize: 6,
                  unitStepSize: 5
                },
                type: 'time',
                time: {
                  displayFormats: {
                    hour: 'h:mm a',
                    minute: 'h:mm a',
                  }
                }
              }],
            },
          }
        };

   Chart.defaults.global.animation.easing = "easeOutBounce";
   this.chart = new Chart(this.canvas.nativeElement, this.chartSetup);

当图表第一次绘制时，它将对新值进行动画处理。但是，如果我随后删除数据并添加新的集，则它不会动画化为新值。

例如，若要使用计时器模拟新服务器数据，如果执行以下操作，其中this.times保存X数据，this.vals保存Y。

setTimeout(() => {
  let temp = this.makeDummyData(20);
  //let dataToUpdate = (<any>(this.chart.data)).datasets[0].data;
  //let labels = (<any>(this.chart.data)).labels;     
  this.times.splice(0, this.times.length);      
  this.vals.splice(0, this.vals.length);
  for (let item of temp) {
    this.times.push(item.time);
    this.vals.push(item.val);

  }

  this.chart.update();
}, 8000)

图表会更新，但没有任何动画，只是直接跳到新显示。如果我只是对现有数据添加日期而没有先删除它，则会为新显示做动画。

如上例所示，替换数据时，动画是否有任何原因不起作用？

在此先感谢您的任何建议