[JS] 多様なグラフを作ることができるC3.js

以前に、「ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart 」という記事を書いたことがあるのですが、これはPHPからグラフの画像を作るというものでした。

ただ、画像として出力してしまうのでダイナミックにグラフを表示したり、アニメーションさせたりということができません。

今回紹介するC3.jsはJavaScriptベースで様々なグラフを表示してくれるライブラリです。

JavaScriptベースのため、動的に要素を追加・削除したりアニメーションを加えるといったことが簡単に出来るようになっています。

C3.jsは、D3.jsというJavaScriptライブラリをベースにして作られています。

（D3.jsのページを見るとかなり多様なグラフィックを表現できるように見えますが、実際にはドキュメントデータを操作するためのライブラリみたいです）

バージョンが2017.05現在で0.4.11ですが、最近バージョンアップが行われており比較的メンテナンスもちゃんと行われているようです。

C3.jsの使い方

まずはインストール方法（といっても設置するだけですけど）ですが、公式ページのセットアップの説明に書かれているようにソースをダウンロードしてサーバー上の適当な場所に保存するだけです。

ただし、ダウンロードしたソース内にD3.jsは含まれていないので、D3.jsのページのほうからもダウンロードして設置する必要があります。

注意しないといけないのは、D3.jsの最新バージョンが4系となっているのですが、C3.jsが動作するD3.jsのバージョンは3.5系となっているので対象バージョンをダウンロードする必要があります。

現時点では、3系は3.5.17が最新のようなので、この辺から落とせます。

一応、

<script src="https://d3js.org/d3.v3.min.js"></script>

のようにして、ウェブ経由で読み込ませることも出来ます。

で、C3.jsの使い方についてですが、例えば棒グラフを出す例は下記のようになります。

<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<link href="https://localhost/cmm/css/c3.min.css" rel="stylesheet" type="text/css">
<script src="https://localhost/cmm/js/d3.min.js" charset="utf-8"></script>
<script src="https://localhost/cmm/js/c3.min.js"></script>
</head>

<body>

<div id="access_count"></div>
<script type="text/javascript">
var access_count = c3.generate({
    bindto: '#access_count',
    data: {
      columns: [
        ["アクセス数","252","87","118","146","76","48"],
        ["UU数",130,72,35,85,58,3],
      ],
      type: 'bar'
    },
    axis: {
        x: {
            type: 'category',
            categories: ["201611","201612","201701","201702","201703","201704"]
        }
    },
    bar: {
        width: {
            ratio: 0.7
        }
    },
    size: {
          width: 400,
          height: 200
    }
});

</script>
</body>
</html>

上記の出力結果は、下記のような感じ。