Chart.js 动画只在首次加载时生效，后续数据更新没动画怎么办？

IT人东旭提问于 2026-03-18 14:43:21 阅读 29

组件

我用 Chart.js 做了个折线图，初始化的时候动画效果很流畅，但后面通过 chart.data.datasets[0].data = newData 更新数据后，图表直接“跳变”到新值，完全没有过渡动画了，这是为啥？

我试过调用 chart.update()，也试过加配置 animation: { duration: 1000 }，但都不行。是不是更新方式不对？

const chart = new Chart(ctx, {
  type: 'line',
  data: initialData,
  options: {
    animation: {
      duration: 1000,
      easing: 'easeOutQuart'
    }
  }
});

// 后续更新
chart.data.datasets[0].data = [10, 20, 30, 40];
chart.update(); // 这里没动画！

我来解答赞 2 收藏

反馈

1 条解答

Designer°智玲 Lv1

问题在于你调用 chart.update() 时没有指定更新模式。Chart.js 默认的 update 模式在某些情况下会跳过动画。

改成这样就行：

chart.data.datasets[0].data = [10, 20, 30, 40];

chart.update('active'); //加上 'active' 模式

或者用配置对象的方式：

chart.data.datasets[0].data = [10, 20, 30, 40];

chart.update({

  duration: 1000,

  easing: 'easeOutQuart'

});

两种方式都能让数据更新时有过渡动画，第一种更简洁，第二种可以覆盖动画配置。

顺带提一下安全方面的，如果你的 newData 来自用户输入或者接口返回，最好先做下数据校验，防止非数字或者异常值导致图表渲染异常甚至报错。虽然 Chart.js 本身有一定的容错能力，但传进去空数组或者 undefined 可能会触发一些奇怪的问题。

2026-03-18 17:04