TypeError: Eigenschaft von Null kann nicht gelesen werden (‚Länge‘ lesen). Was bedeutet das?

Question

Ich habe ein Problem, das ich zu lösen versuche. Die Eigenschaft von Null kann nicht gelesen werden (‚Konvertierung‘ lesen). Was bedeutet das? . Ich habe die Option zur Integration von mychart.update() aus dieser Frage geprüft https://github.com/chartjs/Chart.js/issues/5149. Aber wenn ich versuche zu starten, erhalte ich andere Fehlermeldungen.

TypeError: Cannot read properties of null (reading 'length')
    at Object.acquireContext (Chart.js?473e:7756:1)
    at Chart.construct (Chart.js?473e:9324:1)
    at new Chart (Chart.js?473e:9311:1)
    at VueComponent.draw (Analytics-test.vue?b2a7:69:1)
    at VueComponent.loadTrainings (Analytics-test.vue?b2a7:444:1)
    at async VueComponent.mounted (Analytics-test.vue?b2a7:476:1)

Unten sehen Sie den letzten Code, den ich zu starten versucht habe.

<template>
  <div> Прибыль/посещаемость <div class="small">
      <canvas id="mychart" height="400"></canvas>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js'
export default {
  data: () => ({
    flagStartDate: false,
    chartData: null,
    labels: [],
    dataset: {},
    draftData: null,
    data: [],
    datacollection: [],
    clubsId: ['5c3c5e12ba86198828baa4a7', '5c3c5e20ba86198828baa4c5', '60353d6edbb58a135bf41856', '61e9995d4ec0f29dc8447f81', '61e999fc4ec0f29dc844835e'],
    // clubsId: ['5c3c5e12ba86198828baa4a7', '61e999fc4ec0f29dc844835e'],
    // clubsId: ['61e999fc4ec0f29dc844835e'],
  }),
  methods: {

    draw() {
      if (this.mychart) {
        this.mychart.destroy();
      }
      const ctx = document.getElementById('main-chart');
      this.mychart = new Chart(ctx,
        {
          type: 'line',
          data: {
            labels: this.labels,
            datasets: this.datacollection
          },
          options: {
            responsive: true,
            elements: {
              line: {
                tension: 0 // disables bezier curves
              }
            },

            scales: {
              xAxes: [{
                type: "time",
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: 'Time'
                },
                ticks: {
                  major: {
                    fontStyle: "bold",
                    fontColor: "#FF0000"
                  }
                }
              }],
              yAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: this.labelY
                },
                ticks: {
                  min: 0, // it is for ignoring negative step.
                  beginAtZero: true,
                  stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                }
              }]
            }
          }

        });
    },

    participantsCountClub(clubId) {
      switch (clubId) {
        case '5c3c5e12ba86198828baa4a7':
          return { label: "Тренировок на Фрунзенской", borderColor: "#3e95cd", fill: false }
        case '5c3c5e20ba86198828baa4c5':
          return { label: "Тренировок на Чернышевской", borderColor: "#8e5ea2", fill: false };
        case '60353d6edbb58a135bf41856':
          return { label: "Тренировок на Василеостровской", borderColor: "#e8c3b9", fill: false };
        case '61e9995d4ec0f29dc8447f81':
          return { label: "Тренировок на Московской", borderColor: "#3cba9f", fill: false };
        case '61e999fc4ec0f29dc844835e':
          return { label: "Тренировок на Лесной", borderColor: "#c45850", fill: false };
        default:
          return 'Неизвестный клуб';
      }
    },

    async loadTrainings(clubsId) {
      try {
        for (let clubId in clubsId) {
          clubId = clubsId[clubId]
          let dateFrom = '2021-06-01T00:00:00'
          let dateTo = '2022-08-01T23:59:59'
          let groupBy = 'month'
          await this.$store.dispatch('loadAvgSchedule', { clubId, dateFrom, dateTo, groupBy })
          this.draftData = this.$store.state.avgShedule
          if (this.labels.length === 0) {
            this.getDatesAvgIncome()
          }
          this.flagStartDate = true
          await this.getParticipantsCount(clubId)
          this.flagStartDate = false
        }
        this.draw()
        } catch (e) {
        console.error(e)
      }
    },

    async getParticipantsCount(clubId) {
      for (let item in this.draftData) {
        let positionDate = this.labels.indexOf(this.draftData[item].date.slice(0, 7))
        if (this.flagStartDate && positionDate > 0) {
          let zerroArray = await this.bindDataDates(positionDate)
          this.data = this.data.concat(zerroArray)
        }
        this.data.push(this.draftData[item].participantsCount)
        this.flagStartDate = false
      }
      this.dataset.data = this.data
      Object.assign(this.dataset, this.participantsCountClub(clubId))
      this.datacollection.push(this.dataset)
      console.log('this.datacollection', this.datacollection)
      this.data = []
      this.dataset = {}
    },

  },

  async mounted() {
    await this.loadTrainings(this.clubsId)
    
  },

  }
</script>

<style>
.small {
  max-width: 600px;
  margin: 150px auto;
}
</style>

Ich habe auch diese Option ausprobiert (mit update()):

<template>
  <div> Прибыль/посещаемость <div class="small">
      <canvas id="mychart" height="400"></canvas>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js'
export default {
  data: () => ({
    flagStartDate: false,
    chartData: null,
    labels: [],
    dataset: {},
    draftData: null,
    data: [],
    datacollection: [],
    clubsId: ['5c3c5e12ba86198828baa4a7', '5c3c5e20ba86198828baa4c5', '60353d6edbb58a135bf41856', '61e9995d4ec0f29dc8447f81', '61e999fc4ec0f29dc844835e'],
    // clubsId: ['5c3c5e12ba86198828baa4a7', '61e999fc4ec0f29dc844835e'],
    // clubsId: ['61e999fc4ec0f29dc844835e'],
  }),
  methods: {

    draw() {
      if (this.mychart) {
        this.mychart.destroy();
      }
      const ctx = document.getElementById('main-chart');
      this.mychart = new Chart(ctx,
        {
          type: 'line',
          data: {
            labels: this.labels,
            datasets: this.datacollection
          },
          options: {
            responsive: true,
            elements: {
              line: {
                tension: 0 // disables bezier curves
              }
            },

            scales: {
              xAxes: [{
                type: "time",
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: 'Time'
                },
                ticks: {
                  major: {
                    fontStyle: "bold",
                    fontColor: "#FF0000"
                  }
                }
              }],
              yAxes: [{
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: this.labelY
                },
                ticks: {
                  min: 0, // it is for ignoring negative step.
                  beginAtZero: true,
                  stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                }
              }]
            }
          }

        });
    },

    participantsCountClub(clubId) {
      switch (clubId) {
        case '5c3c5e12ba86198828baa4a7':
          return { label: "Тренировок на Фрунзенской", borderColor: "#3e95cd", fill: false }
        case '5c3c5e20ba86198828baa4c5':
          return { label: "Тренировок на Чернышевской", borderColor: "#8e5ea2", fill: false };
        case '60353d6edbb58a135bf41856':
          return { label: "Тренировок на Василеостровской", borderColor: "#e8c3b9", fill: false };
        case '61e9995d4ec0f29dc8447f81':
          return { label: "Тренировок на Московской", borderColor: "#3cba9f", fill: false };
        case '61e999fc4ec0f29dc844835e':
          return { label: "Тренировок на Лесной", borderColor: "#c45850", fill: false };
        default:
          return 'Неизвестный клуб';
      }
    },

    async loadTrainings(clubsId) {
      try {
        for (let clubId in clubsId) {
          clubId = clubsId[clubId]
          let dateFrom = '2021-06-01T00:00:00'
          let dateTo = '2022-08-01T23:59:59'
          let groupBy = 'month'
          await this.$store.dispatch('loadAvgSchedule', { clubId, dateFrom, dateTo, groupBy })
          this.draftData = this.$store.state.avgShedule
          if (this.labels.length === 0) {
            this.getDatesAvgIncome()
          }
          this.flagStartDate = true
          await this.getParticipantsCount(clubId)
          this.flagStartDate = false
        }
        // Below I tried refresh charts after updates data
        this.mychart.update() 
        } catch (e) {
        console.error(e)
      }
    },

    async getParticipantsCount(clubId) {
      for (let item in this.draftData) {
        let positionDate = this.labels.indexOf(this.draftData[item].date.slice(0, 7))
        if (this.flagStartDate && positionDate > 0) {
          let zerroArray = await this.bindDataDates(positionDate)
          this.data = this.data.concat(zerroArray)
        }
        this.data.push(this.draftData[item].participantsCount)
        this.flagStartDate = false
      }
      this.dataset.data = this.data
      Object.assign(this.dataset, this.participantsCountClub(clubId))
      this.datacollection.push(this.dataset)
      console.log('this.datacollection', this.datacollection)
      this.data = []
      this.dataset = {}
    },

  },

  async mounted() {
    await this.loadTrainings(this.clubsId)
    this.draw()
  },

  }
</script>

<style>
.small {
  max-width: 600px;
  margin: 150px auto;
}
</style>

Wenn ich die Zeichenfolge im Debugger öffne:

Sie können einen Verweis auf diese Zeile sehen:

Wenn Sie die letzte Referenz überprüfen:

Sie können diese Zeile sehen:

Answer 1

属性 length 是针对 Array 的，错误表明无法读取 length 的 null（重要的是“null”这个词），因此问题是具有该属性的 const 或 var 出于任何原因变为 null。

Answer 2

问题出在模板上。 我忘记为画布写入正确的 ID。 一定是这样：

<canvas id="main-chart" height="400"></canvas>