Tidak boleh membaca sifat null (baca 'penukaran'). Apakah maksudnya?

Question

Saya mencipta carta menggunakan data dinamik daripada axios melalui pustaka Chartjs. Tetapi apabila saya memuat semula carta penyemak imbas, mula-mula tiada apa-apa yang tersedia seperti ini:

Jika saya menukar saiz tetingkap penyemak imbas - semua carta dipaparkan:

Ralat daripada konsol:

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)

Saya tidak tahu mengapa ini berlaku dan saya tidak tahu apa yang perlu dilakukan. Nampaknya penyemak imbas cuba membina carta terlebih dahulu (tetapi belum menerima data lagi). Keseluruhan proses pengiraan mengambil masa kira-kira 580ms.

Chart.vue Utama ini digunakan untuk membina carta:

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

Halaman awam ini Analytics-test.vue. Saya melangkau semua kaedah.

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

Terdapat 19 fungsi dalam

kaedah, saya memutuskan untuk tidak memasukkannya di sini.

Answer 1

Ralat ini nampaknya serupa dengan yang diterangkan dalam isu GitHub ini: https://github.com/chartjs/Chart.js/issues/5149 Nampaknya ini mungkin disebabkan oleh data memuatkan carta serta-merta, tetapi berkenaan itu Terdapat beberapa penyelesaian dalam komen soalan.