【JavaScript】C3.js ～ 基本文法 / 構文編 ～

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

初めに

 * C3.js に関する資料が少ないのでメモ。
 * 以下の公式サイトから一部抜粋。
http://c3js.org/reference.html

■ 表示位置の指定 : bindto

<div id="chartToShow"></div>
<script>
var chart = c3.generate({
  bindto: '#chartToShow',
  data: {
      columns: [
          ['data1', 10],
          ['data2', 20],
      ],
      type : 'pie',
  }
});
</script>

構文

bindto: '#chartToShow'
// or element
bindto: document.getElementById('chartToShow')
// or D3 selection object
bindto: d3.select('#chartToShow')

補足

 * なにも指定しない場合、id「chart」に表示される

■ グラフ種類の指定 : type/types

  data: {
        columns: [
            ['data1',   30,  200,  200],
            ['data2', -130, -100, -100],
            ['data3', -100,  100,  100],
        ],
    type: 'bar',
    types: {
       data3: 'line',
    },
`#`値`説明`補足
01line折れ線グラフ
02spline曲線グラフ
03step階段グラフ
04area面グラフ
05area-spline面-曲線グラフ
06area-step面-階段グラフ
07bar棒グラフgroupsを組み合わせることにより積み上げグラフを可能に
08scatter散布図
09pie円グラフ
10donutドーナッツグラフ
11gaugeゲージ計器みたいなグラフ

■ 索引の指定 : names

  data: {
        columns: [
            ['data1',   30,  200,  200],
            ['data2', -130, -100, -100],
        ],
    type: 'bar',
    names: {
      data1: 'Sample Data A',
      data2: 'Sample Data B',
    },
  }

■ グラフ色の指定 : color/pattern

  data: {
      columns: [
          ['data1', 10],
          ['data2', 20],
      ],
      type : 'pie',
  },
  color: {
    pattern: ['Blue', 'Red]
  }

■ jsonを扱う : json

var chart = c3.generate({
  data: {
    mimeType: 'json',
    json: [
      {name: 'Mike', code: '001', yValue: 13},
      {name: 'Tom', code: '002', yValue: 20},
      {name: 'Sam', code: '003', yValue: 8},
    ],
    type : 'bar',
    keys: {
      x: 'name', // it's possible to specify 'x' when category axis
      value: ['name', 'yValue'],
    }
  },
  axis: {
    x: {
      type: 'category'
    }
  }
});

サンプル

円グラフ 
 * 以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35532044.html

■ イベントをキャッチする : onclick/onmouseover/onmouseout

data: {
  onclick: function (d, element) { ... }
  onmouseover: function (d) { ... }
  onmouseout: function (d) { ... }
}

サンプル

 * 以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35532044.html

■応用編

 * 以下の関連記事を参照のこと。
C3.js ～ C3.jsあれこれ ～
http://blogs.yahoo.co.jp/dk521123/35527809.html

関連記事

C3.js ～ 入門編 ～

http://blogs.yahoo.co.jp/dk521123/35509265.html

C3.js ～ 基本グラフのサンプル編 ～

http://blogs.yahoo.co.jp/dk521123/35514061.html

C3.js ～ グラフを動的に変更するには... ～

http://blogs.yahoo.co.jp/dk521123/35516064.html

C3.js ～ C3.jsあれこれ ～

http://blogs.yahoo.co.jp/dk521123/35527809.html