如何关闭Chart.js折线图从底部弹出的显示动画效果？

• 问题根源：默认情况下，Chart.js会为新添加的数据点添加入场动画，表现为从底部弹出，这就是引发眼疲劳的原因。
• 直接解决方案：关闭相关动画，有两种可选方式：
  1. 全局关闭所有动画：在图表初始化的options中设置animation: false，彻底禁用所有动画效果，适合不需要任何动画的场景。
  2. 仅关闭折线过渡动画：如果需要保留tooltip等其他动画，可精细控制动画配置，针对折线的张力过渡设置duration: 0，避免折线的弹出/拉伸动画。
• 正确的数据刷新姿势：不要每次刷新都重新创建Chart实例，而是更新现有实例的数据集后调用update({ duration: 0 })，强制无动画更新。

代码示例 #

// 初始化折线图
const ctx = document.getElementById('myChart').getContext('2d');
const realtimeChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: '实时数据',
      data: [],
      borderColor: '#4bc0c0',
      backgroundColor: 'rgba(75, 192, 192, 0.1)',
      tension: 0.1
    }]
  },
  options: {
    // 方式1：全局关闭动画
    animation: false,
    // 方式2：仅关闭折线张力动画（保留其他动画）
    // animations: {
    //   tension: {
    //     duration: 0
    //   }
    // },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

// 定时刷新数据函数
function refreshData() {
  // 生成模拟新数据
  const newVal = Math.floor(Math.random() * 100);
  const currentTime = new Date().toLocaleTimeString();
  
  // 更新数据
  realtimeChart.data.labels.push(currentTime);
  realtimeChart.data.datasets[0].data.push(newVal);
  
  // 限制数据点数量，防止图表过宽
  if (realtimeChart.data.labels.length > 20) {
    realtimeChart.data.labels.shift();
    realtimeChart.data.datasets[0].data.shift();
  }
  
  // 无动画更新图表
  realtimeChart.update({ duration: 0 });
}

// 每3秒刷新一次
setInterval(refreshData, 3000);

注意事项 #

如果之前配置未生效，检查是否犯了以下错误：

• 动画配置放在了datasets层级而非options层级；
• 每次刷新数据时重新创建了Chart实例，导致默认动画被重复触发；
• 调用update()时没有传递{ duration: 0 }参数，仍使用了默认动画时长。

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