Angular(Ionic)でグラフを描写する

グラフ描写のライブラリ

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