在 Angular 中绑定画布 ID 时，ChartJs 不呈现图表答案

【问题标题】：ChartJs does not render chart when binding canvas id in Angular在 Angular 中绑定画布 ID 时，ChartJs 不呈现图表
【发布时间】：2021-11-07 19:23:25
【问题描述】：

我正在构建一个 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>

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

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

【问题讨论】：

标签： angular charts chart.js

【解决方案1】：

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

在ngOnInit 中，组件视图尚未初始化。因此 DOM 中没有带有 data.id 的 DOM 元素，并且 Chart.js 会引发错误。

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

所以你必须更换

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

与

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

并相应地更新导入。

你可以阅读更多关于 Angulars 生命周期钩子here。

【讨论】：

这行得通。谢谢朱利安·施密特！