Question

是否可以跳过初始动画？

我尝试将持续时间设置为0，然后将其更改为2000。但是似乎永久禁用动画，直到我销毁并重新创建图表。

我要做什么：

最初在图的中间显示带有平线的折线图。
然后在数据更改时，我希望它可以对数据位置进行动画处理。

Answer 1

您可以首先将动画持续时间设置为0，然后设置：

立即设置动画时长，或
在调用update()方法时指定持续时间。

示例：

let max = 10,
  min = -10,
  myChart = new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
      labels: ['a', 'b', 'c'],
      datasets: [{
        label: 'series1',
        data: [5, 5, 5]
      }]
    },
    options: {
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            max: 10,
            beginAtZero: true
          }
        }]
      },
      animation: {
        duration: 0
      }
    }
  });

// 1. immediately set the animation duration.
//myChart.config.options.animation.duration = 1000;

setInterval(function() {
  let a = getRandomInt(0, 3), // index to modify.
    b = getRandomInt(0, 11); // new value.
  myChart.config.data.datasets[0].data[a] = b;
  myChart.update(1000); // 2. specify the duration.
}, 2000); // update the chart every 2 seconds with a random value.

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

跳过折线图的初始动画

1 个答案: