Svelte中Chart.js响应式异常：energy数据更新后图表未实时刷新

你的代码里有几个关键问题导致图表无法响应energy数组的变化：

1. 直接修改数组元素不触发Svelte响应式
   Svelte的响应式依赖赋值操作触发，你用energy[index] = ...直接修改数组元素的方式，Svelte检测不到数组变化。

2. data对象未同步更新
   data对象初始化时引用了energy，但后续energy变化后，data的引用没有改变，Line组件不会感知到内部数据的变化。

3. 定时器清理错误
   clearInterval(1)里传的是数字1，应该用你声明的interval变量，否则定时器无法被正确清理。

4. 无效的响应式声明
   $: labels, energy, data这条语句只是列出了依赖，但没有执行任何更新逻辑，对响应式没有帮助。

修复后的完整代码 #

<script lang="ts">
import { Line } from "svelte-chartjs";
import { onMount } from "svelte";

let labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
let energy = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 用响应式语句维护data对象，依赖labels和energy
$: data = {
    labels,
    datasets: [
        {
            label: "Dataset",
            data: energy,
            borderColor: "rgb(255, 99, 132)",
            backgroundColor: "rgba(255, 99, 132, 0.5)"
        },
    ]
};

onMount(() => {
    const interval = setInterval(() => {
        random();
        console.log(energy);
    }, 1000);
    // 清理时用interval变量
    return () => clearInterval(interval);
})

function random() {
    let index = Math.round(Math.random() * 9);
    // 用数组拷贝触发响应式：先复制数组，修改后重新赋值
    const newEnergy = [...energy];
    newEnergy[index] = Math.round(Math.random() * 100);
    energy = newEnergy;
}
</script>

<Line data={data}/>

关键修改说明 #

• 响应式更新数组：把energy[index] = ...改成先复制数组，修改后重新赋值给energy，这样Svelte能检测到变化。
• 响应式维护data：用$: data = {...}的响应式语句，让data在labels或energy变化时自动重新生成新对象，确保Line组件接收到新的data引用。
• 修复定时器清理：用interval变量作为clearInterval的参数，确保组件销毁时定时器被正确清理。

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