Użycie Chart.js na Angular 4

Question

Próbuję użyć Chart.js z Angular 4, widziałem przykład w dokumentach chart.js, ale używa on skryptu skryptu < do przeciągnięcia skryptu, aby nie pracować nad komponentem. W ten sposób starałem się dopasować do kątowa:

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> 

Każdy pomysł jak bym aby to działało?

EDYCJA: Mam zaktualizowany mój kod z importu i otrzymuję teraz błąd.

Kod importu:

import * as Chart from 'chart.js' 

Błąd na konsoli 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> 

Answer 1

można zainstalować pakiet, wraz z typami do pełnej funkcjonalności w środowisku maszynopis takie jak kątowe :

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

Następnie w swoim komponencie możesz teraz import * as Chart from 'chart.js' i używać go w swoim środowisku maszynopisu. Sprawdź this example dla metod implementacji za pomocą maszynopisu.

Ponieważ musisz pobrać płótno z DOM, upewnij się, że jest renderowany przed próbą uzyskania do niego dostępu. Można to osiągnąć za pomocą 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 
     } 
    }); 
    } 

}