Estoy haciendo un proyecto en Angular8 y creando gráficos usando ChartJS. Después de ejecutar el proyecto, mostrará los gráficos. Pero dará un error diciendo:
Property 'getContext' does not exist on type 'HTMLElement'.¿Cómo me deshago de este error?
Aquí está mi código:
gráfico.componente.html
<div id="container" style="width:350px;height:250px"> <canvas id="myChart" width=300 height=300></canvas> </div>gráfico.componente.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 } }] } } }); } ); }}gráfico.servicio.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',""); } }Lo intentaré:
const canvas = <HTMLCanvasElement> document.getElementById('myChart'); const ctx = canvas.getContext('2d'); el propósito de Typescript es evitar tipos incorrectos. De forma predeterminada document.getElementById devuelve un tipo HTMLElement que es un tipo genérico. Para que su aplicación entienda que es un elemento de lienzo, debe emitirlo usando la sintaxis <CastedToType> .
Prueba esto:
const canvas = document.getElementById('myChart') as HTMLCanvasElement; const ctx = canvas.getContext('2d');const canvas = document.getElementsByTagName('canvas')[0]; devolverá un HTMLCanvasElement, pero
const canvas = document.getElementById('someId'); devolverá un objeto HTMLElement en lugar de HTMLCanvasElement, que no tiene el método 'getContext'.
simplemente emita canvas como HTMLCanvasElement en línea de la siguiente manera
const canvas = document.getElementById('myChart'); const ctx = (canvas as HTMLCanvasElement).getContext('2d');salud.
Lo mejor es usar la validación de tipo de tiempo de ejecución que TS entiende.
const canvas = document.querySelector('#my-canvas') if (!(canvas instanceof HTMLCanvasElement)) return canvas.getContext(...)Esto maneja el caso en el que el elemento que consulta tiene el nombre de etiqueta incorrecto.
<div id="my-canvas" /> <canvas id="my-canvas1" />