wake-up-neo.com

Verwenden von Chart.js für Winkel 4

Ich versuche, Chart.js mit Angular 4 zu verwenden. Ich habe ein Beispiel in den Dokumenten von chart.js gesehen, aber es wird ein <script> -Tag verwendet, um das Skript zu ziehen, damit es nicht für die Komponente funktioniert. So habe ich versucht, in Angular zu passen:

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>

Irgendeine Idee, wie ich es schaffen würde?

EDIT: Ich habe meinen Code mit dem Import aktualisiert und erhalte jetzt einen Fehler.

Importcode: 

import * as Chart from 'chart.js'

Fehler auf Chrome-Konsole: 

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>
javascriptangulartypescriptchart.js
12
Gustavo

Sie können das Paket zusammen mit den Typen für die vollständige Funktionalität in einer TypeScript-Umgebung wie Angular installieren:

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

In Ihrer Komponente können Sie nun import * as Chart from 'chart.js' und in Ihrer TypeScript-Umgebung verwenden. Check out dieses Beispiel für Implementierungsmethoden, die TypeScript verwenden.

Da Sie die Leinwand vom DOM abrufen müssen, müssen Sie sicherstellen, dass sie gerendert wird, bevor Sie versuchen, darauf zuzugreifen. Dies kann mit AfterViewInit erreicht werden.

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
      }
    });
  }

}
39
Z. Bagley

In meiner Angular 6.1-Site verwende ich chart.js allein in mgechev/angle-seed .

Zum Zeitpunkt des Schreibens dieser Antwort haben die Entwickler von Chart.js etwas zu tun , um den Export ihrer Mitglieder mit den neueren Standards kompatibel zu machen, sodass Rollups problematisch sein können.

Damit Chart.js 2.7.x nach der Installation des Pakets chart.js und der Typen @types/chart.js in diesem Winkel-Seed funktioniert, muss ich nur noch Folgendes tun:

  1. Aktualisieren Sie project.config.ts, um ROLLUP_NAMED_EXPORTS einzuschließen, damit Rollup ordnungsgemäß funktioniert (wenn Sie ein Rollup verwenden).

    this.ROLLUP_NAMED_EXPORTS = [
  ...this.ROLLUP_NAMED_EXPORTS,
  { 'node_modules/chart.js/src/chart.js': ['Chart'] }
];

  2. Aktualisieren Sie project.config.ts, um weitere Pakete aufzunehmen. Dieser Seed verwendet SystemJS config. Dies kann variieren, wenn Sie etwas anderes verwenden.

    // Add packages
const additionalPackages: ExtendPackages[] = [
 { name: 'chart.js', path: 'node_modules/chart.js/dist/Chart.bundle.min.js' },

  ...

];

  3. In Ihrer Komponente

    import { Chart } from 'chart.js';

...

export class MyComponent implements OnInit {

@ViewChild('myChart') myChartRef: ElementRef;
chartObj: Chart;

...
}

    Laden Sie dann die Diagrammkonfiguration in ngOnInit () gemäß der Chart.js-Dokumentation .

  4. HTML sieht ungefähr so ​​aus:

    <div class="chart-container">
   <canvas #myChart></canvas>
</div>
0
Dave