Chart.js v4.3.0初始加载动画无法禁用问题求助

问题原因 #

Chart.js v4.x版本中，默认的过渡（transitions）配置会覆盖全局的animation设置，仅设置animation: false或animation: {duration: 0}只会影响tooltip等插件动画，无法禁用初始柱状图的增长动画。

解决方案 #

需要在图表配置中明确禁用过渡效果，以下是几种可行方案：

方案1：全局禁用所有过渡动画 #

在图表的options中添加transitions配置，指定none过渡的时长为0：

const chart = new Chart(ctx, {
  type: 'bar',
  data: yourData,
  options: {
    animation: false, // 禁用插件相关动画
    transitions: {
      none: {
        duration: 0 // 禁用所有过渡动画
      }
    },
    // 其他配置项...
  }
});

方案2：仅禁用初始加载的过渡动画 #

如果需要保留hover等交互场景的动画，可单独针对initial过渡设置时长为0：

const chart = new Chart(ctx, {
  type: 'bar',
  data: yourData,
  options: {
    animation: {
      duration: 0 // 禁用基础动画
    },
    transitions: {
      initial: {
        duration: 0 // 仅禁用初始加载的柱状图增长动画
      }
    },
    // 其他配置项...
  }
});

方案3：处理响应式重绘触发的动画 #

如果图表开启了responsive: true，容器尺寸变化可能触发重绘动画，可同时设置responsiveAnimationDuration: 0避免：

options: {
  responsive: true,
  responsiveAnimationDuration: 0, // 禁用响应式重绘动画
  animation: false,
  transitions: {
    initial: { duration: 0 }
  }
}

验证效果 #

配置完成后，柱状图会直接渲染为最终状态，不会出现从0增长到目标高度的初始动画，同时tooltip等插件动画也会被禁用（若保留animation: false设置）。

内容的提问来源于stack exchange，提问作者Michael Schäfer