Die Eigenschaft von Null kann nicht gelesen werden (‚Konvertierung' lesen). Was bedeutet das?

Question

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.

Answer 1

此错误似乎与此 GitHub 问题中描述的错误类似：https:// github.com/chartjs/Chart.js/issues/5149 听起来这可能是由于图表立即加载数据而引起的，但是关于该问题的评论中有一些解决方案.