AngularでC3.jsを使う

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にアクセスすると、グラフが表示されるはず...!