1
グラフ描写のライブラリ
Ionicでグラフを描写するライブラリにはいくつかあるようですが、安定していてよく使われているchart.jsを使いことにしました。意外に簡単でびっくりしました。
インストール
プロジェクトのルートフォルダに移動して、Terminalで下記コマンドを実行します。
npm install chart.js --save
すると下記のようなメッセージが出てchat.jsがインストールされます。
+ chart.js@2.9.3
added 4 packages from 7 contributors, removed 1 package and audited 1527 packages in 12.531s
node_modulesのなかに格納されるので、これを使いたいページのtsファイルから呼び出すだけで使用できるようになります。
実装する
このような棒グラフを書いてみます。
参考サイト
https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52/
HTMLファイルに要素を追加する
chart.jsはcanvas要素にグラフを描写するので、まずはグラフ要素をHTMLに記載します、
<ion-header>
</ion-header>
<ion-content>
＝＞ <canvas #myChart></canvas>
</ion-content>
描写する
あとはtsファイルからライブラリをimportしたあとにグラフを描写するだけです。HTMLの要素を取得するので、ViewChildも呼び出します。
import { Component, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';
@Component({
selector: 'app-admin',
templateUrl: './admin.page.html',
styleUrls: ['./admin.page.scss'],
})
export class AdminPage implements OnInit {
@ViewChild('myChart') myChart;
bars: any;
colorArray: any;
constructor() { }
ionViewDidEnter() {
this.createBarChart();
}
createBarChart() {
this.bars = new Chart(this.myChart.nativeElement, {
type: 'bar',
data: {
labels: ['Label1', 'Label2', 'Label3', 'Label4', 'Label5', 'Label6', 'Label7', 'Label8'],
datasets: [{
label: 'Viewers in millions',
data: [25, 30, 50, 60, 92, 75, 100, 67],
backgroundColor: 'rgb(50, 194, 129)', // array should have same number of elements as number of dataset
borderColor: 'rgb(50, 194, 129)',// array should have same number of elements as number of dataset
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
}
