javascript - 错误类型错误:“this.canvas 未定义”| 使用 angular 和 chart.js 创建图表的问题
问题描述
我正在尝试使用 chart.js 和 angular 创建一个图表
这是 citydetail.component.html
<div *ngIf="chart">
<canvas #canvas></canvas>
</div>
这是 citydetail.component.ts 的代码
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Citydetails } from '../shared/citydetails';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Location } from '@angular/common';
import { switchMap, scan } from 'rxjs/operators';
import { Chart } from 'chart.js';
// import * as Chart from 'chart.js';
@Component({
selector: 'app-citydetail',
templateUrl: './citydetail.component.html',
styleUrls: ['./citydetail.component.scss']
})
export class CitydetailComponent implements OnInit, AfterViewInit {
@ViewChild('canvas', {static: false}) canvas: ElementRef;
public context: CanvasRenderingContext2D;
chart: Chart;
citydetails: Citydetails;
constructor(
private route: ActivatedRoute,
private router: Router,
private location: Location,
) { }
ngOnInit(): void {
this.route
.queryParams
.subscribe( params => {
console.log("Data: ", JSON.parse(params['city']));
this.citydetails = JSON.parse(params['city']);
});
// this.createChart();
}
ngAfterViewInit(): void {
this.context = this.canvas.nativeElement.getContext('2d');
this.chart = new Chart(this.context, {
type: 'pie',
data: {
datasets: [{
backgroundColor: ["#3498db","#95a5a6","#9b59b6"],
data: [this.citydetails.active, this.citydetails.recovered, this.citydetails.deceased]
}],
labels: [
'Active',
'Recovered',
'Deceased'
]
}
});
}
这表明this.canvas是未定义的。起初我收到这个错误:未能创建图表:无法从给定项目获取上下文,并试图解决这个问题。
我对如何进一步进行感到困惑。
解决方案
在为 truecanvas
之前,元素不会被渲染(写入 DOM)chart
<div *ngIf="chart">
<canvas #canvas></canvas>
</div>
因为chart
is 最初undefined
,画布 ViewChild 不存在,这解释了为什么“this.canvas 未定义”。
尝试删除 *ngIf="chart" 以测试您的图表。
<canvas #canvas></canvas>
推荐阅读
- r - 如何将正则表达式用于选项列表,但每个选项只能使用一次?
- python - 按属性将项目排序到数组中
- cmake - 如何使用 flex、bison 和 cmake 创建一个简单的计算器来计算两个数字的和?
- sql - 如何在 SQL 中组合两个位列?
- python - 初学者python - 如何导入简单模块
- python - 通过 Xpath 查找硒
- regex - 正则表达式与删除之前和之后
- python - 树莓派 28-BYJ-48 带 uln2003 的步进电机控制
- macos - 无法在 OS X 中将 Chrome 设置为默认网络浏览器
- rust - nom::bits::bits 返回的剩余数据不正确