在 Angular 中绑定 canvas id 时，ChartJs 不呈现图表

Question

我正在构建一个 Angular 应用程序，我想通过遍历以下数组使用 Chart.js 显示图表列表：

  data = [
    {
      id: 'chartOne',
      title: 'Chart One',
      type: 'bar',
      lables: ['Villas By Taru', 'Watch Tower'],
      data: [18, 12],
    },
    {
      id: 'chartTwo',
      title: 'Chart Two',
      type: 'bar',
      lables: ['Tea Avenue', 'The Grill Bar'],
      data: [18, 12, 2, 7],
    },
  ];

我正在使用 *ngFor 在视图上呈现图表列表。
我正在遍历上述数组以创建一个 new Chart 对象并配置图表。

HTML

<div *ngFor="let data of data">
  <canvas [id]="data.id"></canvas>
</div>

TS

import { Component, OnInit, VERSION } from '@angular/core';
import { Chart, registerables } from 'chart.js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  data = [
    {
      id: 'chartOne',
      title: 'Chart One',
      type: 'bar',
      lables: ['Villas By Taru', 'Watch Tower'],
      data: [18, 12],
    },
    {
      id: 'chartTwo',
      title: 'Chart Two',
      type: 'bar',
      lables: ['Tea Avenue', 'The Grill Bar'],
      data: [18, 12, 2, 7],
    },
  ];

  ngOnInit() {
    this.data.forEach((element) => {
      this.generateType(element);
    });
  }

  generateType(data: any) {
    const myChart = new Chart(data.id, {
      type: 'bar',
      data: {
        labels: data.labels,
        datasets: [
          {
            label: '# of Votes',
            data: data.data,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  }
}

此方法无效并抛出以下错误：

chart.esm.js:5343 Failed to create chart: can't acquire context from the given item

您可以在此处找到代码库：StackBlizEditorURL

我在这里做错了什么？请帮帮我。

Answer 1

我认为您在创建图表时使用了错误的生命周期挂钩。

在 ngOnInit 中，组件视图尚未初始化。因此 DOM 中没有 DOM 元素与 data.id 并且 Chart.js 抛出错误。

要使用的正确生命周期挂钩是 ngAfterViewInit。

所以你必须更换

  ngOnInit() {
    this.data.forEach((element) => {
      this.generateType(element);
    });
  }

和

  ngAfterViewInit() {
    this.data.forEach((element) => {
      this.generateType(element);
    });
  }

并相应地更新导入。

您可以阅读有关 Angulars 生命周期挂钩的更多信息 here。

在 Angular 中绑定 canvas id 时，ChartJs 不呈现图表

ChartJs does not render chart when binding canvas id in Angular

charts

chart.js

angular