ChartJS 页面加载时如何同步动画并解决图表初始尺寸跳动问题

1. 同步所有图表的动画效果 #

实现同时开始、同时结束的核心逻辑是统一动画配置 + 手动批量触发动画，具体实现步骤如下：

• 首先定义全局统一的动画参数，保证所有图表的动画时长、缓动函数完全一致
• 初始化所有图表时禁用自动动画启动
• 所有图表实例创建完成后，统一触发动画
  代码示例：

// 1. 定义统一的全局动画配置
const COMMON_ANIMATION = {
  duration: 1200, // 单位ms，所有图表动画时长保持一致
  easing: 'easeOutCubic'
}
// 2. 存储所有图表实例的数组
const chartInstances = []

// 3. 逐个初始化图表，禁用自动动画
const chart1 = new Chart(document.getElementById('chart1').getContext('2d'), {
  type: 'line',
  data: yourData,
  options: {
    animation: {
      ...COMMON_ANIMATION,
      autostart: false // 关键：禁止自动启动动画
    }
    // 其他业务配置
  }
})
chartInstances.push(chart1)
// 按相同逻辑初始化其余所有图表，全部存入chartInstances数组

// 4. 所有图表初始化完成后，批量触发动画
chartInstances.forEach(chart => chart.update())

2. 固定图表尺寸避免页面加载跳动 #

页面跳动的原因是ChartJS默认响应式适配时，会先读取父容器尺寸渲染，如果父容器没有提前定义固定宽高，会先使用默认尺寸渲染，后续适配时就会出现跳动，解决方案如下：

方案A：固定父容器尺寸（保留响应式能力） #

• 给每个图表的canvas外层套一个父容器，提前在CSS中写死父容器的宽高
• 图表配置中开启响应式，关闭强制宽高比
  代码示例：

<!-- 页面结构 -->
<div class="chart-wrapper">
  <canvas id="chart1"></canvas>
</div>

/* 提前定义父容器尺寸，必须在图表渲染前加载该CSS */
.chart-wrapper {
  width: 100%;
  height: 450px;
  position: relative;
}

// 图表配置
options: {
  responsive: true,
  maintainAspectRatio: false, // 关键：不强制保持宽高比，完全适配父容器尺寸
  // 其他配置
}

方案B：固定canvas尺寸（不需要响应式场景） #

如果不需要适配不同屏幕尺寸，可以直接固定canvas的宽高，关闭响应式即可：

<canvas id="chart1" width="800" height="400"></canvas>

options: {
  responsive: false // 禁用响应式，直接使用canvas标签定义的宽高
}

内容的提问来源于stack exchange，提问作者RAT