【JavaScript】C3.js ～ 入門編 ～

Webグラフ / 地図作成ツール

■ C3.js

 * C3 : D3-based reusable Chart library
  => D3 のラッパーライブラリ(D3については、以下の関連記事を参照のこと)
http://blogs.yahoo.co.jp/dk521123/35423681.html

ライセンス

 * MIT

■ 公式サイト

http://c3js.org/

デモ

* 使用可能なグラフが分かる
http://c3js.org/examples.html

API

http://c3js.org/reference.html

■ 導入方法

http://c3js.org/gettingstarted.html
に記載されている 
 [1] 以下のページ（一番下）からファイル（今回は「c3-0.4.10.zip」）を
     ダウンロードして、zipを解凍する
https://github.com/masayuki0812/c3/releases/latest
 [2] [1]から以下のファイルを設置する
  * c3.css
  * c3.js

# 今回は、ディレクトリ「cs」を作成し、その配下に格納しておく。

 [3] 以下を対象ページにインポートする

<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>

注意

 * C3.jsは、D3 のラッパーライブラリのため、D3.jsをインポートする必要がある

■ サンプル

 * 簡単なサンプルを記載しておく

[1] 折れ線グラフ

<html>
<head>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', 1, 2, 3, 4, 5, 6],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 300, 200, 300, 250, 450]
        ]
    }
});
</script>
</body>
</html>

[2] 棒線グラフ

* カテゴリー別の棒グラフ
http://c3js.org/samples/axes_x_tick_rotate.html
http://bl.ocks.org/jwhitfieldseed/53a3621dcc47f8822611
https://gist.github.com/jwhitfieldseed/53a3621dcc47f8822611
<html>
<head>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>

</head>
<body>
<div id="chartToDrow"></div>
<script>
var chart = c3.generate({
  bindto: '#chartToDrow',
  data: {
    x: 'x',
    columns: [
    ['x', 'Mike', 'Tom', 'Kevin', 'Sam', 'Ken'],
      ['score', 76, 98, -35, 46, -56],
    ],
    type: 'bar',
  },
  grid: {
    y: {
      lines: [{value:0}]
    }
  },
  axis: {
    x: {
      type: 'category',
      tick: {
        rotate: 75,
      },
      height: 130
    }
  },
  size: {
    width: 400,
    height: 400
  },
  legend: {
    show: false
  }
});
</script>
</body>
</html>

参考文献

http://www.techscore.com/blog/2015/04/02/%E8%B6%85%E9%80%9Fc3-js%E3%81%A7%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/
http://xica-inc.com/blog/member-blog/2014/0604/
* サンプル
http://javascript-demo.e1blue.co/demo/graph/c3/0.4.9/htdocs/

その他サイト

* C3.js散布図のX軸に文字列を表示する
http://qiita.com/hajisan/items/4442efde9c60203cbbc9
http://it-komons.jp/qiita/samples/c3scatter/C3scatter_sample.html
* c3.jsの円グラフで表示順を指定する
http://qiita.com/za-ki/items/dabb909e3058802a0a45
* 定期的にデータを追加し更新することで描画がアニメーションする
http://blog.bokuweb.me/entry/c3js_test
* c3.jsの標準機能だけでは賄いきれない仕様に出会ったら
http://qiita.com/za-ki/items/4cbd005533b17b4273a9

関連記事

C3.js関連

C3.js ～ 基本グラフのサンプル編 ～
http://blogs.yahoo.co.jp/dk521123/35514061.html
C3.js ～ 基本文法 / 構文編 ～
http://blogs.yahoo.co.jp/dk521123/35514893.html
C3.js ～ C3.js を使った グラフ描画の共通化 ～
http://blogs.yahoo.co.jp/dk521123/35517430.html
C3.js ～ C3.jsあれこれ ～
http://blogs.yahoo.co.jp/dk521123/35527809.html
C3.js ～ グラフを動的に変更するには... ～
http://blogs.yahoo.co.jp/dk521123/35516064.html
D3.js / C3.js で 改行入れのテキストを表示するには...
http://blogs.yahoo.co.jp/dk521123/35523904.html
C3.js ～ ツールチップあれこれ ～
http://blogs.yahoo.co.jp/dk521123/35526974.html
C3.js ～ モーダルダイアログを表示する ～
http://blogs.yahoo.co.jp/dk521123/35532044.html

その他

D3.js ～ 入門編 ～
http://blogs.yahoo.co.jp/dk521123/35423681.html
ASP.NET MVC でグラフを描画することを考える
http://blogs.yahoo.co.jp/dk521123/35406503.html