web-dev-qa-db-ja.com

Angular 4でChart.jsを使用する

Angular 4でChart.jsを使用しようとしていますコンポーネント上。これは私が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>

どのように私はそれを機能させるのでしょうか？

編集：インポートでコードを更新しましたが、現在エラーが表示されています。

コードのインポート：

import * as Chart from 'chart.js'

エラー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>
javascriptangulartypescriptchart.js
14
Gustavo

AngularなどのTypeScript環境で完全な機能を実現するためのタイプとともに、パッケージをインストールできます。

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

次に、コンポーネントでimport * as Chart from 'chart.js'そして、TypeScript環境で使用します。 TypeScriptを使用した実装メソッドの この例 を確認してください。

DOMからキャンバスを取得する必要があるため、アクセスする前にレンダリングされていることを確認する必要があります。これはAfterViewInitで実現できます。

import { Component, AfterViewInit } from '@angular/core';
import * as Chart from 'chart.js'

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

}
43
Z. Bagley

Angular 6.1サイトでは、chart.jsを単独で mgechev/angular-seed で使用しています。

このレスポンスを書いている時点で、Chart.js開発者は やることがあります メンバを新しい標準に準拠させることで、ロールアップが問題になる場合があります。

パッケージをインストールした後にChart.js 2.7.xを動作させるにはchart.jsおよびタイプ@types/chart.jsこの角の種では、私がする必要があるのは次のとおりです。

  1. 更新project.config.ts ROLLUP_NAMED_EXPORTSを含めて、ロールアップが正しく機能するようにします（ロールアップを使用している場合）。

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

  2. 更新project.config.ts追加パッケージを含める。このシードはSystemJS configを使用します。他のものを使用している場合、これは異なる場合があります。

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

  ...

];

  3. コンポーネント内

    import { Chart } from 'chart.js';

...

export class MyComponent implements OnInit {

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

...
}

    次に、 Chart.jsドキュメント ごとにngOnInit（）でチャート構成をロードします

  4. HTMLは次のようになります。

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