我现在有一个显示实时信息的图表。我试着禁用y轴的动画，因为点在y轴上跳来跳去，这会产生一种奇怪的效果。但我仍然希望新的点在x轴上平滑地淡入。
我尝试了以下配置：

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

结果是完全没有动画。y轴上没有，x轴上也没有。看起来不再平滑。
在25个数据点之后，我将shift()/push(newDataPoint)放在一个单独的数组中，然后替换图表的整个data数组，因为我使用了带有vue-chartjs库的ChartJS。

我需要完全相同的行为，就像在上面的GIF，除了它不应该口吃，但滚动沿着x轴平滑。

全视图图表示例供参考

<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>