C3 チャート

　C3.js は D3.js をベースに作られたチャート作成ライブラリです。
　D3.js でチャートを作ると多少手間がかかりますが、C3.js はより簡単にチャートを作ることが出来ます。
　　　参考１　参考２　参考３　参考４

■ C3.js を使うには

　1. まず、C3.js をダウンロードします。( ダウンロードした zip には c3.css 等も含む一式があります )
　2. C3.js は D3.js をベースにしているので、D3.js もダウンロードします。
　3. ダウンロードした各 script と css をロードします。
　　　<script src="d3.v3.min.js" charset="utf-8"></script>
　　　<script src="c3.min.js"></script>
　　　<link href="c3.css" rel="stylesheet" type="text/css"><br>
　4. チャートの表示は、まず表示要素を用意して、generate()で設定したチャートを bindto パラメータで指定します。

■ 基本サンプル

　次に C3.js の具体例を見てみます。
　以下の例では、２つのデータ列を折線グラフで表示します。

表示グラフリスト解説

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>C3 デモ: 01</title>
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script src="c3.min.js"></script>
    <link href="c3.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id="chart" style="width:100%; height:260px;"></div>
  <script type="text/javascript">
    var chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
    });
  </script>
</body>
</html>

( 1行目)　この Webページは、HTML5 上で展開します
( 6行目)　まず、D3.js が動作する環境を設定します
( 7,8行)　さらに、C3.js が動作する環境を整えます
(11行目)　チャートの表示要素を設定します
(13行目)　generate()を、呼び出します
(14行目)　チャート（svg）をはめ込む要素を指定
(17,18行) columns 型式の描画データを設定します

■ サンプル 2

　次に多少アレンジをしてみます。
　以下の例では、線幅、副縦軸の表示や、棒グラフなどを追加します。

表示グラフリスト解説

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>C3 デモ: 02</title>
  <script type="text/javascript" src="d3.v3.min.js"></script>
  <script src="c3.min.js"></script>
  <link href="c3.css" rel="stylesheet" type="text/css">
  <style>
    #chart { width:100%; height:260px; }
    #chart .c3-line-data1 { stroke-width: 5px; }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script type="text/javascript">
    var chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
            ['data1', 30, 20, 50, 40, 60, 50],
            ['data2', 200, 130, 90, 240, 130, 220],
            ['data3', 300, 200, 160, 400, 250, 250]
        ],
        axes: { data3: 'y2'},
        types: { data3: 'bar' }
      },
      axis: {
        y: {
          label: { text: 'Y Label', position: 'outer-middle'}
        },
        y2: {
          show: true,
          label: { text: 'data3 Label', position: 'outer-middle' }
        }
      },
      grid: {
        y: { lines: [{value: 0}] }
      },
      tooltip: { show: false }
    });
  </script>
</body>
</html>

先の例に追加した部分について解説します
(11行目)　data1 の線の太さを 5px にします
(25行目)　副縦軸として、data3 用の軸を設けます
(26行目)　data3 のグラフを棒グラフ表示に設定します
(29,30行) 主縦軸のラベルを設定します
(32-34行) 副縦軸の表示とラベルを指定します
(37,38行) 主縦軸に対応する基線を引きます
(40行目)　tooltip を非表示に設定します

■ C3.js を使用する

Why C3? 　使ってみた　 C3 で始める

サンプル

example 　グラフの種類　サンプル

リファレンス

reference

その他

C3.jsとは

■ 参考サイト

関数を描画