AngularでC3.jsを使う

はじめに

本記事が初投稿となります。まずは簡単なテーマで投稿してみたいと思います。
仕事でAngularプロジェクトの中でC3.jsを使ったのでその方法を書きます。

前提

Angular CLIのインストールが済んでいることとします。
筆者がインストールしたCLIのバージョンは7.2.1です。

Angularプロジェクトの作成

参考: https://qiita.com/nrainiero/items/de5edec1ca7d85abcc71

下記コマンドを実行してください。

~$ ng new my-angular-proj

実行後、以下の質問をされますので答えます。
筆者はAngular Routingを追加せず、スタイルシートはCSSを指定しました。
（今回、C3.jsを使うだけの簡単なプロジェクトなのでRoutingは追加しませんでしたが、実際には追加しておくと便利です。)

Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ http://sass-lang.com   ] 
  SASS   [ http://sass-lang.com   ] 
  LESS   [ http://lesscss.org     ] 
  Stylus [ http://stylus-lang.com ] 

C3.jsのインストール

プロジェクトフォルダに移り、C3.jsをインストールします。

~/my-angular-proj$ npm install c3
~/my-angular-proj$ npm install -D @types/c3

Angularでグラフを書いてみる

まず忘れないうちに、C3.js用のCSSファイルをインポートしておきます。

src/styles.css

@import "../node_modules/c3/c3.min.css";

今回はAngular CLIで既に作成されているapp.componentにグラフを記述します。
HTMLテンプレートは以下の通りとします。

src/app/app.component.html

<div id="chart"></div>

tsファイルは以下の通りです。

src/app/app.component.ts

import { Component, AfterViewInit } from '@angular/core';
import * as c3 from 'c3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit {
  private data: any[] = ["data", 1, 2, 3, 4, 5];
  private chart: c3.ChartAPI;

  ngAfterViewInit(): void {
    this.chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [this.data]
      }
    });
  }
}

ブラウザで確認する

まずはビルドします

~/my-angular-proj$ npm start

ブラウザからhttp://localhost:4200にアクセスすると、グラフが表示されるはず...!