无法在新的 EchartsDropdownComponent 读取 null 的属性（读取“getContext”）答案

【问题标题】：Cannot read properties of null (reading 'getContext') at new EchartsDropdownComponent无法在新的 EchartsDropdownComponent 读取 null 的属性（读取“getContext”）
【发布时间】：2022-01-13 19:29:33
【问题描述】：

import { Component, Input, OnChanges } from "@angular/core";
import { Chart } from 'chart.js'


@Component({
   selector: "ngx-echarts-dropdown",
   template: `<canvas id="myChart" width="400" height="400"></canvas>`
}) 
export class EchartsDropdownComponent implements OnChanges {


   canvas = <HTMLCanvasElement> document.getElementById('myChart');

   ctx = this.canvas.getContext('2d');

    myChart = new Chart(this.ctx, {
       data: {
          datasets: [{
               label: 'Scatter Dataset',
               data: [{
                     x: -10,
                     y: 0
               }, {
                     x: 0,
                     y: 10
               }, {
                     x: 10,
                     y: 5
               }]]
          }]
       },
       options: {
             scales: {
                  xAxes: [{
                     type: 'linear',
                     position: 'bottom'
                  }]
             }
         }
   });

我正在尝试在 Angular 12 中绘制散点图。正在低于错误。

请帮我解决同样的问题

【问题讨论】：

标签： javascript angular chart.js

【解决方案1】：

您应该将图表创建代码放在方法ngAfterViewInit 中，并且不要忘记指定图表type。

export class EchartsDropdownComponent implements AfterViewInit, OnChanges {

  ngAfterViewInit() {
    myChart = new Chart('myChart', {
      type: 'scatter', // <- define the chart type
      data: {
        datasets: [{
          label: 'Scatter Dataset',
          ...
  }

【讨论】：