属性'getContext‘在'HTMLElement’类型上不存在
属性'getContext‘在'HTMLElement’类型上不存在
提问于 2019-10-03 11:55:54
我正在用Angular8做一个项目，并使用ChartJS创建图表。运行项目后，它将显示图表。但它会产生一个错误，说：
Property 'getContext' does not exist on type 'HTMLElement'.如何消除此错误？
这是我的代码：
chart.component.html
<div id="container" style="width:350px;height:250px">
<canvas id="myChart" width=300 height=300></canvas>
</div>chart.component.ts
import {Component, OnInit} from '@angular/core';
import {Chart} from 'chart.js';
import {ChartService} from '../charts/chart.service';
import {HttpClient} from '@angular/common/http';
// import {DATA} from '../CHART/CHARTS.MODEL';
@Component({
selector: 'app-charts',
templateUrl: './charts.component.html',
styleUrls: ['./charts.component.scss']
})
export class ChartsComponent implements OnInit {
constructor(
private ChartItems: ChartService,
private httpClient: HttpClient
) { }
ngOnInit() {
this.getChartDetails();
}
getChartDetails() {
this.ChartItems.getChart().subscribe(data => {
console.log(data);
const chartLable = [];
const chartDetails = [];
for (let i = 0; i < data.chartDetails[0].chartData.length; i++) {
chartLable.push(data.chartDetails[0].chartData[i].x);
chartDetails.push(data.chartDetails[0].chartData[i].y);
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartLable,
datasets: [{
label: '# of Votes',
data: chartDetails,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
);
}}chart.service.ts
import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
@Injectable({
providedIn: 'root'
})
export class ChartService {
httpOptions: any;
baseUrl: any;
headers: any;
constructor( private http: HttpClient ) {
this.headers = new Headers( { 'content-type': 'application/json'} );
// this.httpOptions = new RequestOptions( { headers: this.headers } );
}
getChart() {
console.log('SUCCESS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
return this.http.get('https://api.myjson.com/bins/8au55',"");
}
}回答 5
Stack Overflow用户
回答已采纳
发布于 2019-10-03 12:04:38
我试着：
const canvas = <HTMLCanvasElement> document.getElementById('myChart');
const ctx = canvas.getContext('2d');打字稿的目的是避免错误的类型。默认情况下，document.getElementById返回一个HTMLElement类型，这是一个泛型类型。为了让您的应用程序理解它是一个画布元素，您需要使用语法来转换它。
Stack Overflow用户
发布于 2019-11-15 13:23:00
试试这个：
const canvas = document.getElementById('myChart') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');Stack Overflow用户
发布于 2021-08-09 07:04:35
const canvas = document.getElementsByTagName('canvas')[0];将返回一个HTMLCanvasElement，但是
const canvas = document.getElementById('someId');将返回一个HTMLElement对象，而不是没有“getContext”方法的HTMLCanvasElement。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58218597
复制相关文章
相似问题
腾讯云开发者
