Know-How-No-Life

AngularでChart.jsを利用するために、HelloWorldをしてみました。

バージョンはAngularJsではなく、Angular4ですので悪しからず。

目次

1. Chart.jsとは
2. AngularでChart.jsを利用するポイント
3. サンプルソースコード
4. 実行キャプチャ
5. 参考URL
6. 終わりに

Chart.jsとは

Chart.jsは、リッチなUIが作れるJavaScriptライブラリです。

MITライセンスで商用利用が可能です。一般的なグラフの種類は揃っています。

Web上に数多くの日本語ドキュメントがあり、業務でも良いグラフ機能を提供できるかと思っています。

AngularでChart.jsを利用するポイント

インストール

まずは普通にChart.jsをインストールします。

npm install --save chart.js

私はnpmですが、BowerやCDNもありますので Chart.js Installation のページも参考にしてみてください。

さらに、Chart.jsのオブジェクトの型定義もインストールします。

npm install --save @types/chart.js

これにより、ChartクラスやChartDataクラスなどを利用できますので、コーディングの生産性が格段に上がるでしょう。

canvasタグに描画するためViewChildを使う

本家ドキュメントには、canvasタグに描画するとあります。

DOMに描画されたcanvasタグに対して処理を行いたいので、 AfterViewInit ならびに @ViewChild を利用しましょう。

サンプルソースコード

実際にHelloWorldしたときのサンプルソースコードです。

データは 本家ドキュメントのまま書いています。

コンポーネント（chart.component.ts）

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { Chart, ChartType, ChartData, ChartOptions } from 'chart.js';

@Component({
  selector: 'app-chart',
  template: `
  <div>
    <canvas #myCanvas></canvas>
  </div>
  `
})
export class ChartComponent implements AfterViewInit {

  @ViewChild('myCanvas') myCanvas: ElementRef;

  type: ChartType | string = 'line';
  data: ChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
    }]
  };
  options: ChartOptions = {};

  chart: Chart;

  ngAfterViewInit() {
    const canvas = this.myCanvas.nativeElement;
    this.drawChart(canvas);
  }

  drawChart(ctx: string | CanvasRenderingContext2D | HTMLCanvasElement | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement>) {
    this.chart = new Chart(ctx, {
      type: this.type,
      data: this.data,
      options: this.options
    });
  }
}

実行キャプチャ

いざ実行すると、次のキャプチャ画像のようなグラフが表示されるはずです。

参考URL

今回、AngularでChart.jsを利用するプログラムを作るにあたり、参考にさせていただいたURLを記述します。

Chart.jsは日本語ドキュメントが豊富にあってとてもありがたいですね。

• Chart.js
• [Qiita]Angular4 で Chart.js v2 を使う手順
• [Qiita]chart.js を angular の component の中で使う
• [stack overflow]Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators
• Chart.jsを使って、棒グラフ、折れ線グラフ、レーダーチャート、円グラフを表示しよう！（サンプル・解説付き）

終わりに

AngularでChart.jsを利用してみました。

Google検索をすればドキュメントは豊富に見つかりましたので、特に苦労しなかった印象です。

実際のシステム開発でもスムーズに開発ができるのではないかと思います。

今回作ったサンプルソースコードはgithubにありますので、参考にしたい方はどうぞ。

※アップした分はもっと改良してあります。

c5apple/angular-chartjs

これでいい感じのグラフを作りたいですね！