web-dev-qa-db-fra.com

Utilisation de Chart.js sur Angular 4

J'essaie d'utiliser Chart.js avec Angular 4. J'ai vu un exemple dans les documents chart.js, mais il utilise une balise <script> pour extraire le script afin qu'il ne fonctionne pas sur le composant. Voici comment j'ai essayé de m'inscrire dans 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>

Une idée de comment je pourrais le faire fonctionner?

EDIT: J'ai mis à jour mon code avec l'importation et je reçois maintenant une erreur.

Code d'importation: 

import * as Chart from 'chart.js'

Erreur sur la console 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>
javascriptangulartypescriptchart.js
12
Gustavo

Vous pouvez installer le package, ainsi que les types pour une fonctionnalité complète dans un environnement TypeScript tel que Angular:

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

Ensuite, dans votre composant, vous pouvez maintenant import * as Chart from 'chart.js' et l'utiliser dans votre environnement TypeScript. Découvrez cet exemple pour les méthodes d'implémentation utilisant TypeScript.

Parce que vous devez obtenir le canevas du DOM, vous devez vous assurer qu'il est rendu avant d'essayer d'y accéder. Ceci peut être accompli avec 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
      }
    });
  }

}
39
Z. Bagley

Dans mon site 6.1 angulaire, j'utilise chart.js par lui-même dans mgechev/angular-seed .

Au moment de la rédaction de cette réponse, les développeurs de Chart.js ont encore du travail à faire pour rendre l’exportation de leurs membres conforme aux nouvelles normes afin que les cumuls puissent être problématiques.

Pour que Chart.js 2.7.x fonctionne après l'installation du package chart.js et des types @types/chart.js dans cette graine angulaire, il me suffisait de:

  1. Mettez à jour project.config.ts pour inclure ROLLUP_NAMED_EXPORTS afin que le cumul fonctionne correctement (si vous utilisez un cumul).

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

  2. Mettez à jour project.config.ts pour inclure des packages supplémentaires. Cette graine utilise la configuration SystemJS. Cela peut varier si vous utilisez autre chose.

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

  ...

];

  3. Dans votre composant

    import { Chart } from 'chart.js';

...

export class MyComponent implements OnInit {

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

...
}

    Chargez ensuite la configuration du graphique dans ngOnInit () par Documentation Chart.js

  4. HTML ressemblera à ceci:

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