繁体   English   中英

无法在新 EchartsDropdownComponent 读取 null 的属性(读取“getContext”)

Cannot read properties of null (reading 'getContext') at new EchartsDropdownComponent

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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 中绘制散点图。正在低于错误。

在此处输入图像描述

请帮我解决同样的问题

1 个回复

您必须在使用该值之前执行null检查,因此在使用它之前检查它不是undefinednull 您必须在构造函数中初始化它,或者使用ngOnInit方法实现OnInit接口(注意SimpleChanges导入,因为它需要实现ngOnChage ):

import { Component, Input, OnInit, OnChanges, SimpleChanges } 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  OnInit, OnChanges {


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

   // that check is necessary   
   if (typeof canvas !== 'undefined' && canvas!==null) {

        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'
                      }]
                 }
             }
       });
   }

   ngOnChanges(changes: SimpleChanges) {
       // your logic here
   }
}

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

export class EchartsDropdownComponent implements AfterViewInit, OnChanges {

  ngAfterViewInit() {
    myChart = new Chart('myChart', {
      type: 'scatter', // <- define the chart type
      data: {
        datasets: [{
          label: 'Scatter Dataset',
          ...
  }
1 无法读取 null 的属性“getContext”

我有一个按钮,单击执行此功能。此代码是在画布元素上绘制一条线,使用 PDF.JS 在网页上呈现 PDF 文件。 但是我收到一个错误“未捕获的类型错误:无法读取 null 的属性‘getContext’”。 我该怎么办。 ...

4 无法读取 null 的属性“getContext”让我发疯

我不明白我做错了什么,我正在关注 YouTube 的视频教程,并在 jsfiddle、codepen 和直接在我的编码器括号上复制它,但我一直遇到相同的错误: 为什么无法读取属性“getContext”? 有人可以告诉我我做错了什么吗? 我想可能是图像路径,我尝试过直接从文件夹 ./images/ ...

8 未捕获的TypeError:无法在React渲染中读取null的属性“ getContext”

我正在尝试在我的反应前端中实现Web套接字,以使用画布将一些帧流式传输到它。 首先,代码运行良好,我可以很好地接收数据……但是,当我需要从父组件添加函数调用时,出现了一个错误: videoSocket.js:51未捕获的TypeError:无法读取null的属性“ getContext” ...

9 酶测试失败TypeError:无法读取null的属性'getContext'

我已经实现了使用Jest和酶测试画布文件,但是每当我运行测试时,它都在说TypeError:无法读取null的属性'getContext' 所以这是我的测试代码: 运行此npm测试时,出现以下错误: 虽然我的反应程序运行正常。 这是测试错误还是我做错了无法理解的事情 ...

10 Chart.js - 无法读取null的属性'getContext'

我的main.js文件中有以下Javascript: HTML如下: 正如标题所示,我得到了Uncaught TypeError: Cannot read property 'getContext' of null我不完全确定问题是什么。 如果我不得不猜测我会说它试图引用那些不 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM