Bagaimana untuk menggunakan Vue-Chartjs untuk mengemas kini carta garis secara dinamik dengan cekap?

Question

Saya mempunyai kod yang berfungsi ini untuk mengemas kini carta di mana onMount mensimulasikan beberapa jenis kemas kini. Tetapi memusnahkan sepenuhnya tatasusunan dalam cangkuk OnMounted dan membinanya semula dengan nilai baharu nampaknya tidak begitu cekap? Saya telah mencuba menggunakan komponen reaktif untuk data_values ​​​​dan label_values ​​​​tetapi ini menyebabkan timbunan panggilan maksimum melebihi ralat apabila kemas kini menyala.

Jadi soalan saya ialah, adakah cara yang lebih baik untuk mengemas kini carta daripada kod di bawah?

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

Saya mahu dapat menggunakan komponen reaktif untuk nilai_data dan nilai_label dan hanya tolak ke tatasusunan jika terdapat kemas kini tanpa ralat, dan sifat yang dikira akan mengendalikan kemas kini.

Answer 1

Anda boleh cuba menggunakan dan bukannya memusnahkan tugasan Array.push() seperti berikut:

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