Angular4でChart.jsをHelloWorldするサンプル

投稿日: 2018/07/13  更新日: 2018/10/22

Angular 


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

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




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


実行キャプチャ

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

add1


参考URL

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

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


終わりに

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

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

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


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

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

add1 c5apple/angular-chartjs


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



このエントリーをはてなブックマークに追加     

profile
profile

洋ちゃん

@c5apple

システムエンジニアをしています。二児の父です。

夢は天井から床までビッシリ並んだ本棚のある書斎を作ること!