在 Angular 4 上使用 Chart.js

Question

我正在尝试将 Chart.js 与 Angular 4 一起使用，我在 chart.js 文档中看到了一个示例，但它使用 < script > 标记来提取脚本，因此它在组件上不起作用。这就是我试图适应 Angular 的方式：

TS

 export class GraphicsComponent implements OnInit {

  ctx = document.getElementById("myChart");
  myChart = new Chart(this.ctx, {
    type: 'pie',
    data: {
        labels: ["New", "In Progress", "On Hold"],
        datasets: [{
            label: '# of Votes',
            data: [1,2,3],
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
      responsive: false,
      display:true
    }
  });

  constructor() { }

  ngOnInit() {
  }

}

HTML

 <canvas id="myChart" width="700" height="400"></canvas>

知道我将如何让它发挥作用吗？

编辑： 我已经用导入更新了我的代码，现在我收到了一个错误。

导入代码：

 import * as Chart from 'chart.js'

chrome 控制台错误：

 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of null
TypeError: Cannot read property 'length' of null
    at Object.acquireContext (platform.dom.js:333)
    at Chart.construct (core.controller.js:74)
    at new Chart (core.js:42)
    at new GraphicsComponent (graphics.component.ts:12)
    at createClass (core.es5.js:10922)
    at createDirectiveInstance (core.es5.js:10756)
    at createViewNodes (core.es5.js:12197)
    at createRootView (core.es5.js:12092)
    at callWithDebugContext (core.es5.js:13475)
    at Object.debugCreateRootView [as createRootView] (core.es5.js:12792)
    at Object.acquireContext (platform.dom.js:333)
    at Chart.construct (core.controller.js:74)
    at new Chart (core.js:42)
    at new GraphicsComponent (graphics.component.ts:12)
    at createClass (core.es5.js:10922)
    at createDirectiveInstance (core.es5.js:10756)
    at createViewNodes (core.es5.js:12197)
    at createRootView (core.es5.js:12092)
    at callWithDebugContext (core.es5.js:13475)
    at Object.debugCreateRootView [as createRootView] (core.es5.js:12792)
    at resolvePromise (zone.js:795)
    at resolvePromise (zone.js:766)
    at zone.js:844
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

原文由 Gustavo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以安装这个包，以及在 Angular 等打字稿环境中实现完整功能的类型：

npm install --save chart.js && npm install --save-dev @types/chart.js

然后在您的组件中，您现在可以 import * as Chart from 'chart.js' 并在您的打字稿环境中使用它。查看 此示例 以了解使用打字稿的实现方法。

因为您需要从 DOM 获取画布，所以您需要确保在尝试访问它之前已呈现它。这可以通过 AfterViewInit 来完成。

 import { Component, AfterViewInit } from '@angular/core';
import * as Chart from 'chart.js'

export class MyChartComponent implements AfterViewInit {

  canvas: any;
  ctx: any;

  ngAfterViewInit() {
    this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'pie',
      data: {
          labels: ["New", "In Progress", "On Hold"],
          datasets: [{
              label: '# of Votes',
              data: [1,2,3],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {}
    });
  }

}

原文由 Z. Bagley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

所以，经过深思熟虑，我决定加入这个线程，因为有一种 Angular 方法可以遵循最佳实践并且不使用任何文档范围查询……（糟糕）。为了简洁起见，我在组件装饰器中使用了 template 而不是 templateUrl ，但它们的行为与在模板中一样。 DOM 仍然必须先加载，这是 Chart.js 的大问题。此示例适用于 Angular 8+，并且适用于我当前的版本 9.1.7

 import { Component, ViewChild, AfterViewInit, Input } from '@angular/core'
import { Chart } from 'chart.js'

@Component({
  selector: 'app-chart',
  template: `<canvas #myChart></canvas>,
})
export class SkillsChartComponent implements AfterViewInit {
  @ViewChild('myChart', {
    static: true
  }) myChart: {
    nativeElement: HTMLCanvasElement
  }

  constructor() {}

  ngAfterViewInit() {
    this.createChart()
  }

  private createChart(): void {
    const elem = this.myChart.nativeElement
    try {
      new Chart(elem, {
        type: 'pie',
        data: {
          labels: ["New", "In Progress", "On Hold"],
          datasets: [{
              label: '# of Votes',
              data: [1,2,3],
              backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
              ],
              borderWidth: 1
            }]
          },
          options: {
          responsive: false,
          display:true
        }
      })
    } catch (err) {
      throw new Error(err) // You can either throw an error or do whatever here...
    } finally {
      // Any cleanup of logging...
    }
  }

}

这里发生的事情是，您正在获取对 Canvas 本身的引用，并使用 Angular 的生命周期挂钩来说明 HTML 内容初始化后，然后使用 Chart 在画布上绘制。 Chart 的第一个参数是元素本身，这导致了很多反模式，但您绝对不需要普通 JS 查询文档范围来获取特定画布上的句柄，这是最好的根据 Angular 风格指南练习这样做的方法。如果您有疑虑，请将其留在评论中。

原文由 Joshua Michael Calafell 发布，翻译遵循 CC BY-SA 4.0 许可协议