Wie verwende ich Vue-Chartjs, um Liniendiagramme effizient dynamisch zu aktualisieren?
Ich habe diesen Arbeitscode, der ein Diagramm aktualisiert, in dem onMount eine Art Aktualisierung simuliert. Aber das Array im OnMounted-Hook komplett zu zerstören und mit neuen Werten neu aufzubauen, scheint nicht sehr effizient zu sein? Ich habe versucht, reaktive Komponenten für data_values und label_values zu verwenden, aber das führt zu einem Fehler, der den maximalen Aufrufstapel überschreitet, wenn das Update ausgelöst wird.
Meine Frage ist also: Gibt es eine bessere Möglichkeit, das Diagramm zu aktualisieren als den folgenden Code?
<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>
Ich möchte in der Lage sein, reaktive Komponenten für data_values und label_values zu verwenden und bei einem fehlerfreien Update einfach auf das Array zu pushen, und die berechneten Eigenschaften werden das Update verarbeiten.
