Die Eigenschaft von Null kann nicht gelesen werden (‚Konvertierung‘ lesen). Was bedeutet das?
Ich habe das Diagramm mit dynamischen Daten von Axios über die Chartjs-Bibliothek erstellt. Aber wenn ich das Browserdiagramm aktualisiere, ist zunächst nichts wie dieses verfügbar:
Wenn ich die Größe des Browserfensters ändere, werden alle Diagramme angezeigt:
Fehler von der Konsole:
Uncaught TypeError: Cannot read properties of null (reading 'transition')
at Chart.transition (Chart.js?473e:9865:1)
at Chart.draw (Chart.js?473e:9827:1)
at Chart.render (Chart.js?473e:9799:1)
at Object.callback (Chart.js?473e:2208:1)
at Object.advance (Chart.js?473e:3544:1)
at Object.startDigest (Chart.js?473e:3517:1)
at eval (Chart.js?473e:3506:1)
Ich weiß nicht, warum das passiert und ich weiß nicht, was ich tun soll. Es sieht so aus, als ob der Browser zuerst versucht, das Diagramm zu erstellen (aber die Daten noch nicht empfangen hat). Der gesamte Berechnungsprozess dauert ca. 580 ms.
Dieses MainChart.vue wird zum Erstellen des Diagramms verwendet:
<template>
<div>
<canvas id="main-chart" height="400"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
name: 'MainChart',
props: ['chartData'],
mounted() {
const ctx = document.getElementById('main-chart');
new Chart(ctx, this.chartData);
}
}
</script>
Diese öffentliche Seite Analytics-test.vue. Ich habe alle Methoden übersprungen.
<template>
<div> Прибыль/посещаемость <div class="small">
<MainChart :chart-data="datacollection" />
</div>
</div>
</template>
<script>
import MainChart from '../MainChart.vue'
export default {
components: { MainChart },
data: () => ({
flagStartDate: false,
chartData: null,
labels: [],
datasets: {},
draftData: null,
data: [],
datacollection: { type: 'line', },
clubsId: ['5c3c5e12ba86198828baa4a7', '5c3c5e20ba86198828baa4c5', '60353d6edbb58a135bf41856', '61e9995d4ec0f29dc8447f81', '61e999fc4ec0f29dc844835e'],
}),
methods: {
...some a lot of code..},
async mounted() {
await this.loadIncomings(this.clubsId),
await this.loadAvgIncomings(this.clubsId),
await this.loadAvgPayments(this.clubsId),
await this.loadAvgSchedule(this.clubsId),
await this.loadTrainings(this.clubsId)
},
</script>
Es gibt 19 Funktionen in methods, ich habe mich entschieden, sie hier nicht einzutragen.
