Angularでng2-chartsを使ってグラフを描画する

おはようございます。ゴーリスト新卒一年目、見習い開発者のバンナイです。

このブログの背景

先日、弊社で、AngularJSを使って書かれていたWEBアプリケーションをAngular4で書き換えるというプロジェクトに携わらせてもらいました。

初めてのフロントコーディング、初めてのフロントでの外部ライブラリの使用、初めてのAngular、ということでいろいろなことがありました。

その中でも比較的時間が割かれたグラフ機能に関して色々やったことをブログに書きたいと思います。

最初のグラフが描画されるまで
グラフの見た目を整える
グラフを動的に描画する

の三本立てで書きたいと思います。

準備

使用ライブラリ

valor-software.com

というライブラリを使いました。

早速 https://valor-software.com/ng2-charts/ に書いてあるInstallationとやAPI等を参考にして最初のグラフを描画してみたいと思います！

インストール

まずAngularCLIで新しいAngularプロジェクトを作ります。

その後、

Installation

に従い

npm install ng2-charts --save

npm install chart.js --save

ng2-chartsとchart.jsをインストール。

ng2-chartsだけではなくchart.jsもインストールするんですね。

後はindex.htmlのheadタグの中に

<script src="../node_modules/chart.js/src/chart.js"></script>

を書き込みました。

弊社都合によりバージョンを固定します。以下のようにpackage.jsonのバージョンの部分を書き変えます。

"chart.js": "~2.5.0

"ng2-charts": "~1.5.0"

この後バージョンを反映させるために

npm install

を使います。

import

APIのUsage

を参考に

import { ChartsModule } from 'ng2-charts';

// In your App's module:
imports: [
   ChartsModule
]

をここでも言われるがままに適宜書きます。僕はapp.module.tsに書きました。

Canvasタグ

僕が描画したいのは棒グラフなので

Bar Chart

の部分にあるソースコードをコピります。

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <button (click)="randomize()">Update</button>
</div>

をhtmlファイルに

import { Component } from '@angular/core';
 
@Component({
  selector: 'bar-chart-demo',
  templateUrl: './bar-chart-demo.html'
})
export class BarChartDemoComponent {
  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;
 
  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];
 
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
 
  public randomize():void {
    // Only Change 3 values
    let data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    let clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[0].data = data;
    this.barChartData = clone;
    /**
     * (My guess), for Angular to recognize the change in the dataset
     * it has to change the dataset variable directly,
     * so one way around it, is to clone the data, change it and then
     * assign it;
     */
  }
}

をtsファイルに貼り付けます。

バグ？

これでグラフが描画される…はずだったのですが描画されません。コンソールを見てみると f:id:bbbbbbbbb9:20171019174912p:plain

なんだかこれが原因かなというエラーが出ていました。

まったく意味が不明だったのでこのメッセージでそのままググってみました。結果。

index.htmlのheadタグに貼り付けた

<script src="node_modules/chart.js/src/chart.js"></script>

を消して

angular-cli.jsonのscripts項目に

"scripts": [
        "../node_modules/chart.js/src/chart.js"
],

と書くと上手くいくみたいです。謎です。

他にもいろいろな解決策が書いてありましたが僕はこれでうまくいきました。

これでグラフが描画されました。

f:id:bbbbbbbbb9:20171019175454p:plain

よかった～。

次のブログではオプションなどをいじってグラフの見た目等を色々といじっていきます。

最終的にグラフが、様々な数値やグラフの本数で動的に描画されるようになるのですが、その際にどんな条件でも見た目が崩れないようにする等、予想外にやることが沢山ありました。