在Angular上使用Chart.js 4

Question

我正在尝试使用Chart.js和Angular 4，我在chart.js文档中看到一个示例，但它使用了一个<脚本>标记来拉动脚本，使其不会在组件上工作。这是我想融入角：

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' 

错误的铬控制台上：

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> 

Answer 1

您可以在打字稿环境，如角安装包，同类型一起的全部功能：

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

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

由于您需要从DOM获取画布，因此您需要确保在尝试访问它之前将其呈现。这可以通过AfterViewInit完成。

import { Component, AfterViewInit } from '@angular/core'; 

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: { 
     responsive: false, 
     display:true 
     } 
    }); 
    } 

}