Comment utiliser Vue-Chartjs pour mettre à jour dynamiquement et efficacement les graphiques linéaires ?

Question

J'ai ce code fonctionnel mettant à jour un graphique dans lequel onMount simule une sorte de mise à jour. Mais déstructurer complètement le tableau dans le hook OnMounted et le reconstruire avec de nouvelles valeurs ne semble pas très efficace ? J'ai essayé d'utiliser des composants réactifs pour data_values ​​​​et label_values ​​​​mais cela entraîne une erreur de dépassement maximal de la pile d'appels lorsque la mise à jour se déclenche.

Ma question est donc la suivante : existe-t-il une meilleure façon de mettre à jour le graphique que le code ci-dessous ?

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

Je veux pouvoir utiliser des composants réactifs pour data_values ​​​​et label_values ​​​​et simplement pousser vers le tableau s'il y a une mise à jour sans erreur, et les propriétés calculées géreront la mise à jour.

Answer 1

Vous pouvez essayer d'utiliser au lieu de déstructurer l'affectation Array.push() comme suit :

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