[超速]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に読み込みます。

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

html

js

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

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

typeをbarからlineに変えると、折れ線チャートが表示されます。
line
他にもpieで円チャートになるのでデータ集計でよく目にするチャートはひと通り作れてしまいます。

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

stackbar

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

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

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です