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
});
}
}
実行キャプチャ
いざ実行すると、次のキャプチャ画像のようなグラフが表示されるはずです。
参考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にありますので、参考にしたい方はどうぞ。
※アップした分はもっと改良してあります。
これでいい感じのグラフを作りたいですね!