PR TIMESデザイナー&エンジニアブログ BREAK TIMES

PR TIMES Developer Blog(デザイナー&エンジニアによる開発者ブログ)

PR TIMES Developer Blog
デザイナー&エンジニアによる開発者ブログ

グラフ生成ライブラリ C3.jsについて

こんにちは!フロントエンドエンジニアの本間です。 

今回はグラフ生成ライブラリのC3.jsについてです。
C3.jsとはWebグラフィックスを扱うD3.jsを利用して、オプションのような形で簡易的にグラフを作る為だけに拡張されたライブラリです。
日本だと知名度がイマイチかもしれませんが、海外ではD3.jsの人気が高く注目度の高いライブラリです。

D3.jsのみでもグラフを作成できますが、慣れるまで扱いが難しいところもあり、C3.jsを使うことでより楽にグラフを作成できます。

ドキュメントも充実していて、オプションも豊富にあり、柔軟性も高いので自分なりのグラフをさっと作りたい時など大変便利です。 
データの投入方法を工夫することで動きをつけることができ、見せ方もカスタマイズできます。


以前、BIツールで月間のデータを可視化する時に使用していたことがあり、当日以降のデータを予想値として半透明にして表示したり、アニメーションを加えたりとカスタマイズしていました。 


では早速、使ってみましょう。


ライブラリを記述

<link href="/path/c3.css" rel="stylesheet" type="text/css">
<script src="/path/d3.v3.min.js" charset="utf-8">
<script src="/path/c3.min.js">


はい、これが無いと始まりません。ライブラリを読み込みます。
D3.jsベースなのでこれもお忘れなく。

html

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

グラフが展開される要素を用意します。


javascript

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2'
      }
    },
    axis: {
      y: {
        label: { // ADD
          text: 'Y Label',
          position: 'outer-middle'
        }
      },
      y2: {
        show: true,
        label: { // ADD
          text: 'Y2 Label',
          position: 'outer-middle'
        }
      }
    }
});


上記のようなデータを読み込むと...


f:id:breaktimes:20160307185342p:plain


はい、グラフが出来ました。 
データとグラフを見比べると、どこのデータがグラフ上でどう表示されるのかわかると思います。
データはCSV, JSON形式でも投入可能でURLで指定することもできます。


グラフタイプを下記のように指定すると異なるグラフが展開されます。


type: 'bar'
f:id:breaktimes:20160308110812p:plain

type : 'pie'
f:id:breaktimes:20160308121048p:plain


折れ線グラフと棒グラフは組み合わせて使うことが出来ます。
さらに動的にデータを変更してアップデートをかけるとアニメーションして表示が変わります。 

サマリーとデイリーでグラフタイプを分けたり、項目をクリックして線がトランスフォームしてカッコよくアニメーションしながら詳細を表示するなんてこともできます。


データ可視化の意義や、データから行動を読み取るといったことを念頭に置いて、最適な表現できると良いですね。

他にもいろいろできますので公式ドキュメントをチェックしてみてください。
最後まで読んでいただきありがとうございました。

公式ドキュメント
c3js.org