簡単にリッチなチャートが作れるC3.jsを使ってみた

f:id:bokuweb:20150118093929p:plain

C3.jsとは?

<a href="http://c3js.org/">C3.js | D3-based reusable chart library</a>

C3 はチャートに特化したビジュアライゼーションライブラリです。D3 のラッパーライブラリで、D3 の見た目の美しさやインタラクション性などの特徴を残しながら、チャートライブラリとして分かりやすいインターフェースを提供するという方針で開発を進めています。 http://blog.xica-inc.com/about-xica/member-12/

これはまではhighchart.jsを使っていましたが、商用利用は有償だったりするので今回C3.jsをいじってみます。

サンプル

どんなチャートが作れるか以下のサンプルを見れば分かります。

<a href="http://c3js.org/examples.html">C3.js | D3-based reusable chart library</a>

C3.js | D3-based reusable chart library

使ってみる

音ゲーなどではゲーム終了時にスコアの軌跡がグラフとして描画されたりします。そいつをどうやったら表現できるか考えてみました。

必要なもの

<a href="https://github.com/masayuki0812/c3">masayuki0812/c3</a>

masayuki0812/c3 · GitHub

から、本体をダウンロードします。最低限必要なのはc3.jsとc3.cssです。

また、d3.jsも必要です。

<a href="http://d3js.org/">D3.js - Data-Driven Documents</a>

D3.js - Data-Driven Documents

からダウンロードして、d3.v3.min.jsを取り出します。

ソース

d3.v3.min.jsとc3.js、c3.cssを読み込みます。指定もできますがデフォルトで<div id="chart"></div>に描画されます。よってhtml要素として<div id="chart"></div>も用意します。あとはjavascriptでグラフの種類や設定を行います。今回のサンプルではsetTimeoutで定期的にデータを追加し更新することで描画がアニメーションするようにしています。チャートの色はcolorで設定しますが、チャートのx軸やy軸の色はCSSで変更するようです。今回は以下のように記述し、軸に色を#eeeに変更しています。

.c3 path, .c3 line {
  fill: none;
  stroke: #eee;
}

index.html

<html>
  <head>
    <link href="css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="chart"></div>
    <script src="js/d3.v3.min.js" charset="utf-8"></script>
    <script src="js/c3.js"></script>
    <script>
      var colums = [
        ['data1',100],
        ['data2',200]
      ]
      var chart = c3.generate({
        data: {
          columns: [
            ['data1',100],
            ['data2',200]
          ],
          types: {
            data1: 'spline',
            data2: 'spline'
          }
        },
        size: {
          // width: 640,
          height: 480
        },
        color: {
          pattern: ['#ccc', '#aec7e8'] // チャートの色
        },
        interaction: {
          enabled: false // tooltipなどをディセーブル
        },
        transition: {
          duration: 500 // アニメーション時間[ms]
        },
        point: {
          show: false // ポイントの表示
        },
        axis: {
          x: {
            max: 100, // x軸の最大要素数を100
            tick: {
              values: [] // x軸の値を非表示
            }
          },
          y: {
            tick: {
              values: [] // y軸の値を非表示
            }
          }
        }
      });
      (function () {
        update = function () {
          for (var i = colums.length - 1; i >= 0; i--) {
            colums[i].push(Math.random() * 100); // ランダムな値をデータとして追加
          };
          // 更新
          chart.load({
            columns: colums
          });
          // 再描画
          chart.flush();
          setTimeout(update, 16);
        }
        setTimeout(update, 16);
      }());
    </script>
  </body>
</html>