Sử dụng Chart.js trên Angular 4

Question

Tôi đang cố gắng sử dụng Chart.js với Angular 4, tôi đã xem ví dụ trên tài liệu chart.js nhưng nó sử dụng thẻ < script> để kéo tập lệnh để nó không làm việc trên thành phần. Đây là cách tôi đã cố gắng để phù hợp với góc:

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> 

Bất kỳ ý tưởng làm thế nào tôi có thể làm cho nó hoạt động?

EDIT: Tôi đã cập nhật mã của mình bằng cách nhập và hiện tôi đang gặp lỗi.

Mã nhập:

import * as Chart from 'chart.js' 

Lỗi trên chrome console:

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

Bạn có thể cài đặt gói, cùng với các loại cho các chức năng đầy đủ trong một môi trường nguyên cảo như kiễu góc :

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

Sau đó, trong thành phần của bạn, bây giờ bạn có thể import * as Chart from 'chart.js' và sử dụng nó trong môi trường kiểu chữ của bạn. Hãy xem this example để biết các phương pháp triển khai bằng cách sử dụng kiểu chữ.

Vì bạn cần lấy canvas từ DOM, bạn cần phải chắc chắn rằng nó được hiển thị trước khi thử truy cập nó. Điều này có thể được thực hiện với 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 
     } 
    }); 
    } 

}