ChartJS如何仅禁用y轴动画 保留x轴新增数据平滑动画效果

开发实时信息展示图表时，需要禁用y轴方向动画，避免数据点沿y轴跳动产生异常视觉效果，同时保留新增数据点沿x轴平滑淡入、整体平滑滚动的效果。

最初尝试用如下配置实现需求：

const chartOptions: ChartOptions = {
    animations: {
        x: {
          duration: 500
        },
        y: false,
    },
    // ...其余配置
};

实际运行后所有动画完全失效：y轴动画确实被禁用，但x轴动画也未生效，图表展示失去平滑效果。

当前基于vue-chartjs集成ChartJS开发，更新逻辑为：存储的数据点达到25个后，对独立数组执行shift()/push(newDataPoint)操作，再整体替换图表的完整data数组实现数据更新。

需要实现和参考动图完全一致的交互行为，消除现有卡顿问题，实现x轴方向的平滑滚动效果。

附完整vue-chartjs示例代码：

<script setup lang="ts">
const chartData = ref<ChartData<'line'>>({
  labels: [],
  datasets: []
})

const chartLabels: string[] = Array(maxDataPoints).fill('');
const chartDataPoints: number[] = Array(maxDataPoints).fill(18.3);

function fillData() {
  if (chartDataPoints.length > maxDataPoints) {
    chartLabels.shift();
    chartDataPoints.shift();
  }

  chartLabels.push(new Date().toLocaleString())
  chartDataPoints.push(Number((currentDistance.value * 0.1).toFixed(1)))

  const updatedChartData: ChartData<'line'> = {
    labels: [...chartLabels],
    datasets: [
      {
        label: 'Distance',
        tension: 0.5,
        data: [...chartDataPoints],
      }
    ]
  }

  chartData.value = { ...updatedChartData }
}

onMounted(() => {
  fillData();

  setInterval(() => fillData(), 500)
})

const chartOptions: ChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  //animation: false,
  animations: {
    x: {
      duration: 500
    },
    y: false,
  },
  scales:{
    x: {
      display: false,
    },
    y: {
      suggestedMin: 0,
      suggestedMax: 20,
    }
  },
  plugins: {
    legend: {
      display: false
    },
  },
}
</script>

<template>
  <LineChart :chartData="chartData" :chartOptions="chartOptions" />
</template>

解决方案 #

配置失效的核心原因是ChartJS的动画配置规则里，直接给某个动画属性（比如y）赋值false，会重置整个动画配置树，导致其他未完整声明的动画属性全部被禁用，不是只关闭对应方向的动画。

按以下两点修改即可实现预期效果：

• 调整动画配置：不要直接给y设false，而是将y轴动画时长设为0实现禁用效果，同时补全必要的动画属性声明，避免配置被覆盖
• 优化数据更新逻辑：不要每次全量新建数组、替换整个chartData对象，减少不必要的全量重绘解决卡顿问题

修改后的动画配置：

const chartOptions: ChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  // 全局基础动画配置，避免属性缺省导致动画失效
  animation: {
    duration: 500
  },
  animations: {
    x: {
      duration: 500 // x轴位移保留500ms平滑动画
    },
    y: {
      duration: 0 // y轴动画时长设为0，等同于禁用，不会干扰其他动画
    },
    // 新增数据点淡入效果
    opacity: {
      duration: 400
    }
  },
  // 其余scales、plugins配置保持不变
}

优化后的数据更新逻辑：

function fillData() {
  if (chartDataPoints.length >= maxDataPoints) {
    chartLabels.shift();
    chartDataPoints.shift();
  }

  chartLabels.push(new Date().toLocaleString())
  chartDataPoints.push(Number((currentDistance.value * 0.1).toFixed(1)))

  // 直接更新已有响应式对象的属性，不要全量替换，大幅降低重绘开销
  chartData.value.labels = [...chartLabels]
  chartData.value.datasets[0].data = [...chartDataPoints]
}

调整后即可实现旧数据点沿x轴平滑左移、新数据点淡入展示，同时y轴数值更新无跳动动画，也不会出现卡顿问题。

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