無法讀取 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個函數，我決定不在這裡輸入。
