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)

图表确实更新了，但它没有任何动画，它只是直接跳转到新显示。如果我只是先保存现有数据而不先将其删除，是否会为新显示设置动画。

当我替换上面示例中的数据时，动画是否有效？

提前感谢任何建议

为什么Chartjs折线图不会为新值设置动画？

0 个答案: