Allied ArchitectsAllied ArchitectsEngineer Blog

C3.jsでグラフを描いてみる

2017/10/25 JavaScriptフレームワーク

はじめに

はじめまして!プロダクト開発部のよしはらです。
リリース前でメイクが雑になっていましたが、つい先日リリースが終ったので戻していきたいと思ってます。

最近、分析ツールを開発するプロジェクトに携わってたこともあり、たくさんグラフを生成しました。
そこで、今回は簡単にデータをグラフ化できるC3.jsをご紹介したいと思います!

C3.jsとは

D3.jsをベースにした再利用可能なJavaScriptチャートライブラリです。

  • メリット
  • D3.jsに比べて学習コストが少ない!!!

    なぜなら、、

    • D3.jsのように長いコードを書く必要がない!
    • チャートに必要なカスタマイズがしやすい!
    • APIを使ってチャートを制御できる!
    • 公式サンプルでコードがいじれる!

    からです!

  • デメリット
    • 複雑なグラフやカスタマイズができない
    • カスタマイズしすぎると、安全性が保てない

依存モジュール

D3.js

動作環境

D3.jsのサポートするブラウザに依存しており、IE8以前のバージョンを除く最新のブラウザをサポートしています。
詳しくは、URLを参照してください。

使い方

セットアップ

  1. C3.jsの最新バージョンをダウンロードします
  2. C3.jsはD3.jsに依存するので、D3.jsもダウンロードします
  3. ※v4だと動かないので、v3をダウンロードします。

  4. 必要なファイルを読み込みます

グラフを生成する

generate()を呼び出すことでグラフがつくれます。

  1. グラフをバインドする要素を準備します
  2. 引数を指定して、generate()を呼び出します
  3. グラフが生成されます
  4. 描画先とdataを指定するだけで、リッチなグラフを作成することができました。
    ツールチップが表示されたり、マウスオーバーでグラフがハイライトされたりします。

    また今回、dataはcolumnsを使いましたが、rowsやurlでも指定することができます。
    urlではCSVやJSON形式を指定して、APIなどから直接データを読み込むこともできます!

カスタマイズ

今回の開発でよく使用したフォーマット系のカスタマイズを2つほどご紹介したいと思います。

他のカスタマイズ方法に関しては、または、リファレンスから確認できます。

軸の目盛りのフォーマットを変更したい

D3.jsのformatを使って軸の目盛りを%表示にしたり、カンマを入れたりとフォーマットを変更することができます。

また、functionでも同じようにフォーマットを変更できます。
例えば、返却値を空で返せば目盛りの値を表示しないなんてこともできます。

表示:

ツールチップをカスタマイズしたい

ツールチップの表示内容となるtitle、name、valueの各フォーマットをセットできます。(参考

またtooltip.contentsを利用して、ツールチップのデザイン自体、自分でカスタマイズすることもできます。

デフォルトのツールチップはソースコードを見ると以下のようになっています。そのままでは使えないので、これを参考にカスタマイズするのが良いでしょう。

表示:

さいごに

今回はC3.jsについて紹介しました。

ご自身のWebアプリで集めたデータを可視化をしたい場合も多いかと思います。
DBで眠っているデータを呼び覚まして、活用することで、なにかしらの新たな発見も期待できるでしょう!

簡単にグラフをつくりたいなら、C3.jsを断然オススメします!
ぜひ、使ってみてください!!

ページTOPへ