如何使用 Vue-Chartjs 有效率地動態更新折線圖？

Question

我有這個工作代碼更新圖表，其中 onMount 模擬某種更新。但是在 OnMounted 鉤子中完全解構數組並用新值重建它似乎不是很有效？我嘗試過對 data_values 和 label_values 使用反應式元件，但在更新觸發時會導致最大呼叫堆疊超出錯誤。

所以我的問題是，有沒有比下面的程式碼更好的方法來更新圖表？

<template>
    <Line :data="chartData" :options="chartOptions" :style="{ backgroundColor: color }" class="bar_chart"></Line>
</template>

<script lang="ts" setup>
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend, ChartData
} from 'chart.js'
import {Line} from 'vue-chartjs'
import {computed, onMounted, reactive, ref} from "vue";

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);

let chartOptions = {
    responsive: true,
    maintainAspectRatio: true
}
let color = "#FFFFFF"


const data_values = ref([40, 39, 10, 40, 39, 80, 40]);
const label_values = ref(['January', 'February', 'March', 'April', 'May', 'June', 'July']);

const chartData = computed(() => {
    // getter
    return {
        labels: label_values.value,
        datasets: [
            {
                label: 'Data One',
                backgroundColor: '#f87979',
                data: data_values.value
            }
        ]
    }
});

// Is it necessary to destructure and rebuild the entire array?
onMounted(() => {
    setInterval(() => {
        label_values.value = [...label_values.value, "August"];
        data_values.value = [...data_values.value, 1000];
    }, 3000)
})






</script>

我希望能夠對 data_values 和 label_values 使用反應式元件，並在有更新且沒有錯誤的情況下簡單地推送到數組，並且計算屬性將處理更新。

Answer 1

您可以嘗試使用 而不是解構賦值Array.push()#如下：

onMounted(() => {
    setInterval(() => {
        label_values.value.push("August");
        data_values.value.push(1000);
    }, 3000)
})