[超速]C3.jsでチャート作成してみた

はじめまして。小野寺と申します。
簡単なデータ集計をする機会があり、折角なので表ではなくチャートにしてしまおうと思いまして、C3.jsというチャートライブラリを使ってみました。

C3.jsとは

C3.jsはD3.jsをベースに作られたチャート作成に特化したライブラリです。

D3.jsについてはこちら（D3.jsでデータを魅せる!）をご覧ください。

D3.jsでもチャートの作成は可能なのですが、ちょっとチャートを作りたい場合には少々手間がかかってしまいます。C3.jsはサクッと使えるのが魅力です。それでは見てみましょう。

使い方

C3.jsダウンロードします。
https://github.com/masayuki0812/c3/releases/latest

C3.jsはD3.jsベースなので、D3.jsもダウンロードします。
http://d3js.org/

必要なファイルをhtmlに読み込みます。

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

チャート描画にはgenerate()で設定したチャートをbindtoパラメータで指定した要素（例ではdiv#chart）に表示することができるようになっています。

html

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

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

var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar'
    }
});

var chart = c3.generate({

bindto: '#chart',

data: {

columns: [

['data1', 30, 200, 100, 400, 150, 250],

['data2', 130, 100, 140, 200, 150, 50]

type: 'bar'

}

});

たったこれだけで棒チャートが表示されます！
デフォルトで色や軸目盛などが設定されているので（ツールチップまでついています！！）、データを入れてあげるだけできれいなチャートができあがります。

とても簡単ですね。実際に棒チャートを表示するまであっという間でしたね。

typeをbarからlineに変えると、折れ線チャートが表示されます。

他にもpieで円チャートになるのでデータ集計でよく目にするチャートはひと通り作れてしまいます。

groupsパラメータで合計を表示することも可能です。

var chart = c3.generate({
  bindto: '#chart',
  data: {
     columns: [
       ['data1', 30, 200, 100, 400, 150, 250],
       ['data2', 130, 100, 140, 200, 150, 50]
     ],
    type: 'bar',
    groups: [['data1', 'data2']]
  }
});

var chart = c3.generate({

bindto: '#chart',

data: {

columns: [

['data1', 30, 200, 100, 400, 150, 250],

['data2', 130, 100, 140, 200, 150, 50]

type: 'bar',

groups: [['data1', 'data2']]

}

});

折れ線とチャートの色やラベル、ツールチップも簡単に設定ができます。
また、データの指定にはCSV, JSON形式をURLで指定することもできるので、APIでデータ提供しているサービスなどでも使用可能です。

var chart = c3.generate({
  data: {
    url: '/data/c3_test.csv'
  }
});

var chart = c3.generate({

data: {

url: '/data/c3_test.csv'

}

});

C3の開発者は日本人のMasayuki Tanaka氏で、下記のリンクにはMasayuki氏がC3を開発するに至った経緯などが書かれています。
C3 で始める D3 チャート

最後までお読みいただきましてありがとうございました。
みなさんも一手間加えて、Webページのデータ表にチャートを加えてみてはいかがでしょうか。