无法读取 null 的属性（读取'转换”）。这是什么意思？

Question

我通过 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个函数，我决定不在这里输入。

Answer 1

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