無法讀取 null 的屬性（讀取“轉換”）。這是什麼意思？

我透過 Chartjs 函式庫使用來自 axios 的動態資料建立了圖表。但是當我刷新瀏覽器圖表時，首先沒有任何可用的內容，如下所示：

如果我更改瀏覽器視窗的尺寸 - 所有圖表都會顯示：

來自控制台的錯誤：

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)

我不知道為什麼會這樣，也不知道該怎麼辦。看起來瀏覽器首先嘗試建立圖表（但尚未收到數據）。整個計算過程大約需要 580ms。

此 MainChart.vue 用於建立圖表：

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

此公用頁面 Analytics-test.vue。我跳過了所有方法。

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

methods中有19個函數，我決定不在這裡輸入。

P粉207483087329 天前461

無法讀取 null 的屬性（讀取“轉換”）。這是什麼意思？

全部回覆(1)我來回復