ChartJS TypeError：无法读取null的属性(阅读'length'),这是什麽意思？

rhfm7lfc  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(218)

有一个我的问题，我试图解决。Cannot read properties of null (reading 'transition'). What does it mean?。我检查了选项与集成mychart。更新（）从这个问题https://github.com/chartjs/Chart.js/issues/5149。但当我试图开始出现其他错误。

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

在你可以看到最后的代码，我试图启动。

  1. <template>
  2.   <div> Прибыль/посещаемость <div class="small">
  3.       <canvas id="mychart" height="400"></canvas>
  4.     </div>
  5.   </div>
  6. </template>
  8. <script>
  9. import Chart from 'chart.js'
  10. export default {
  11.   data: () => ({
  12.     flagStartDate: false,
  13.     chartData: null,
  14.     labels: [],
  15.     dataset: {},
  16.     draftData: null,
  17.     data: [],
  18.     datacollection: [],
  19.     clubsId: ['5c3c5e12ba86198828baa4a7', '5c3c5e20ba86198828baa4c5', '60353d6edbb58a135bf41856', '61e9995d4ec0f29dc8447f81', '61e999fc4ec0f29dc844835e'],
  20.     // clubsId: ['5c3c5e12ba86198828baa4a7', '61e999fc4ec0f29dc844835e'],
  21.     // clubsId: ['61e999fc4ec0f29dc844835e'],
  22.   }),
  23.   methods: {
  25.     draw() {
  26.       if (this.mychart) {
  27.         this.mychart.destroy();
  28.       }
  29.       const ctx = document.getElementById('main-chart');
  30.       this.mychart = new Chart(ctx,
  31.         {
  32.           type: 'line',
  33.           data: {
  34.             labels: this.labels,
  35.             datasets: this.datacollection
  36.           },
  37.           options: {
  38.             responsive: true,
  39.             elements: {
  40.               line: {
  41.                 tension: 0 // disables bezier curves
  42.               }
  43.             },
  45.             scales: {
  46.               xAxes: [{
  47.                 type: "time",
  48.                 display: true,
  49.                 scaleLabel: {
  50.                   display: true,
  51.                   labelString: 'Time'
  52.                 },
  53.                 ticks: {
  54.                   major: {
  55.                     fontStyle: "bold",
  56.                     fontColor: "#FF0000"
  57.                   }
  58.                 }
  59.               }],
  60.               yAxes: [{
  61.                 display: true,
  62.                 scaleLabel: {
  63.                   display: true,
  64.                   labelString: this.labelY
  65.                 },
  66.                 ticks: {
  67.                   min: 0, // it is for ignoring negative step.
  68.                   beginAtZero: true,
  69.                   stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
  70.                 }
  71.               }]
  72.             }
  73.           }
  75.         });
  76.     },
  78.     participantsCountClub(clubId) {
  79.       switch (clubId) {
  80.         case '5c3c5e12ba86198828baa4a7':
  81.           return { label: "Тренировок на Фрунзенской", borderColor: "#3e95cd", fill: false }
  82.         case '5c3c5e20ba86198828baa4c5':
  83.           return { label: "Тренировок на Чернышевской", borderColor: "#8e5ea2", fill: false };
  84.         case '60353d6edbb58a135bf41856':
  85.           return { label: "Тренировок на Василеостровской", borderColor: "#e8c3b9", fill: false };
  86.         case '61e9995d4ec0f29dc8447f81':
  87.           return { label: "Тренировок на Московской", borderColor: "#3cba9f", fill: false };
  88.         case '61e999fc4ec0f29dc844835e':
  89.           return { label: "Тренировок на Лесной", borderColor: "#c45850", fill: false };
  90.         default:
  91.           return 'Неизвестный клуб';
  92.       }
  93.     },
  95.     async loadTrainings(clubsId) {
  96.       try {
  97.         for (let clubId in clubsId) {
  98.           clubId = clubsId[clubId]
  99.           let dateFrom = '2021-06-01T00:00:00'
  100.           let dateTo = '2022-08-01T23:59:59'
  101.           let groupBy = 'month'
  102.           await this.$store.dispatch('loadAvgSchedule', { clubId, dateFrom, dateTo, groupBy })
  103.           this.draftData = this.$store.state.avgShedule
  104.           if (this.labels.length === 0) {
  105.             this.getDatesAvgIncome()
  106.           }
  107.           this.flagStartDate = true
  108.           await this.getParticipantsCount(clubId)
  109.           this.flagStartDate = false
  110.         }
  111.         this.draw()
  112.         } catch (e) {
  113.         console.error(e)
  114.       }
  115.     },
  117.     async getParticipantsCount(clubId) {
  118.       for (let item in this.draftData) {
  119.         let positionDate = this.labels.indexOf(this.draftData[item].date.slice(0, 7))
  120.         if (this.flagStartDate && positionDate > 0) {
  121.           let zerroArray = await this.bindDataDates(positionDate)
  122.           this.data = this.data.concat(zerroArray)
  123.         }
  124.         this.data.push(this.draftData[item].participantsCount)
  125.         this.flagStartDate = false
  126.       }
  127.       this.dataset.data = this.data
  128.       Object.assign(this.dataset, this.participantsCountClub(clubId))
  129.       this.datacollection.push(this.dataset)
  130.       console.log('this.datacollection', this.datacollection)
  131.       this.data = []
  132.       this.dataset = {}
  133.     },
  135.   },
  137.   async mounted() {
  138.     await this.loadTrainings(this.clubsId)
  140.   },
  142.   }
  143. </script>
  145. <style>
  146. .small {
  147.   max-width: 600px;
  148.   margin: 150px auto;
  149. }
  150. </style>

我还尝试了这个选项（使用update（））：

  1. <template>
  2.   <div> Прибыль/посещаемость <div class="small">
  3.       <canvas id="mychart" height="400"></canvas>
  4.     </div>
  5.   </div>
  6. </template>
  8. <script>
  9. import Chart from 'chart.js'
  10. export default {
  11.   data: () => ({
  12.     flagStartDate: false,
  13.     chartData: null,
  14.     labels: [],
  15.     dataset: {},
  16.     draftData: null,
  17.     data: [],
  18.     datacollection: [],
  19.     clubsId: ['5c3c5e12ba86198828baa4a7', '5c3c5e20ba86198828baa4c5', '60353d6edbb58a135bf41856', '61e9995d4ec0f29dc8447f81', '61e999fc4ec0f29dc844835e'],
  20.     // clubsId: ['5c3c5e12ba86198828baa4a7', '61e999fc4ec0f29dc844835e'],
  21.     // clubsId: ['61e999fc4ec0f29dc844835e'],
  22.   }),
  23.   methods: {
  25.     draw() {
  26.       if (this.mychart) {
  27.         this.mychart.destroy();
  28.       }
  29.       const ctx = document.getElementById('main-chart');
  30.       this.mychart = new Chart(ctx,
  31.         {
  32.           type: 'line',
  33.           data: {
  34.             labels: this.labels,
  35.             datasets: this.datacollection
  36.           },
  37.           options: {
  38.             responsive: true,
  39.             elements: {
  40.               line: {
  41.                 tension: 0 // disables bezier curves
  42.               }
  43.             },
  45.             scales: {
  46.               xAxes: [{
  47.                 type: "time",
  48.                 display: true,
  49.                 scaleLabel: {
  50.                   display: true,
  51.                   labelString: 'Time'
  52.                 },
  53.                 ticks: {
  54.                   major: {
  55.                     fontStyle: "bold",
  56.                     fontColor: "#FF0000"
  57.                   }
  58.                 }
  59.               }],
  60.               yAxes: [{
  61.                 display: true,
  62.                 scaleLabel: {
  63.                   display: true,
  64.                   labelString: this.labelY
  65.                 },
  66.                 ticks: {
  67.                   min: 0, // it is for ignoring negative step.
  68.                   beginAtZero: true,
  69.                   stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
  70.                 }
  71.               }]
  72.             }
  73.           }
  75.         });
  76.     },
  78.     participantsCountClub(clubId) {
  79.       switch (clubId) {
  80.         case '5c3c5e12ba86198828baa4a7':
  81.           return { label: "Тренировок на Фрунзенской", borderColor: "#3e95cd", fill: false }
  82.         case '5c3c5e20ba86198828baa4c5':
  83.           return { label: "Тренировок на Чернышевской", borderColor: "#8e5ea2", fill: false };
  84.         case '60353d6edbb58a135bf41856':
  85.           return { label: "Тренировок на Василеостровской", borderColor: "#e8c3b9", fill: false };
  86.         case '61e9995d4ec0f29dc8447f81':
  87.           return { label: "Тренировок на Московской", borderColor: "#3cba9f", fill: false };
  88.         case '61e999fc4ec0f29dc844835e':
  89.           return { label: "Тренировок на Лесной", borderColor: "#c45850", fill: false };
  90.         default:
  91.           return 'Неизвестный клуб';
  92.       }
  93.     },
  95.     async loadTrainings(clubsId) {
  96.       try {
  97.         for (let clubId in clubsId) {
  98.           clubId = clubsId[clubId]
  99.           let dateFrom = '2021-06-01T00:00:00'
  100.           let dateTo = '2022-08-01T23:59:59'
  101.           let groupBy = 'month'
  102.           await this.$store.dispatch('loadAvgSchedule', { clubId, dateFrom, dateTo, groupBy })
  103.           this.draftData = this.$store.state.avgShedule
  104.           if (this.labels.length === 0) {
  105.             this.getDatesAvgIncome()
  106.           }
  107.           this.flagStartDate = true
  108.           await this.getParticipantsCount(clubId)
  109.           this.flagStartDate = false
  110.         }
  111.         // Below I tried refresh charts after updates data
  112.         this.mychart.update() 
  113.         } catch (e) {
  114.         console.error(e)
  115.       }
  116.     },
  118.     async getParticipantsCount(clubId) {
  119.       for (let item in this.draftData) {
  120.         let positionDate = this.labels.indexOf(this.draftData[item].date.slice(0, 7))
  121.         if (this.flagStartDate && positionDate > 0) {
  122.           let zerroArray = await this.bindDataDates(positionDate)
  123.           this.data = this.data.concat(zerroArray)
  124.         }
  125.         this.data.push(this.draftData[item].participantsCount)
  126.         this.flagStartDate = false
  127.       }
  128.       this.dataset.data = this.data
  129.       Object.assign(this.dataset, this.participantsCountClub(clubId))
  130.       this.datacollection.push(this.dataset)
  131.       console.log('this.datacollection', this.datacollection)
  132.       this.data = []
  133.       this.dataset = {}
  134.     },
  136.   },
  138.   async mounted() {
  139.     await this.loadTrainings(this.clubsId)
  140.     this.draw()
  141.   },
  143.   }
  144. </script>
  146. <style>
  147. .small {
  148.   max-width: 600px;
  149.   margin: 150px auto;
  150. }
  151. </style>

当我在调试工具中开启字串时：

您可以看到引用这一行：

如果检查最后一个参考：

您可以看到这一行：

chart.js

2条答案

按热度按时间
ybzsozfc

ybzsozfc1#

属性length用于Array，错误说明无法读取legth的null（重要的是单词“null”），因此问题是该属性的const或var由于任何原因变为null。

赞(0）分享  回复(0）举报  2022-11-06
3ks5zfa0

3ks5zfa02#

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

  1. <canvas id="main-chart" height="400"></canvas>
赞(0）分享  回复(0）举报  2022-11-06
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com