如何使用 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)
})