属性'getContext'在类型'HTMLElement'上不存在

Question

我正在用angular8做项目。并使用chartJs创建图表。运行项目后，它将显示图表。但是由于属性'getContext'在类型'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',"");

}
}

Answer 1

我会尝试：

const canvas = <HTMLCanvasElement> document.getElementById('myChart');
const ctx = canvas.getContext('2d');