webエンジニアの日常

RubyやPython, JSなど、IT関連の記事を書いています

簡単に綺麗なグラフが書けるc3.js入門

JavaScript プログラミング

webサービスなどで、グラフを表示したいときってたまにありますよね。

そんなときに便利なのがc3.jsです。

D3.jsというグラフ描画用のjsを基に作られていて、簡単にさくっとグラフを書くこともできるし、カスタマイズできる点も多いです。

目次

準備

c3のダウンロード

まず、以下のサイトからc3.jsの本体をダウンロードします。

github.com

githubの緑のボタンからDownload Zipを選択するとダウンロードされます。

f:id:s-uotani-zetakansu:20170823155100p:plain

実際に使うのはc3.jsとc3.cssです。ダウンロードしたフォルダからこの二つを取り出し、別の作業フォルダへコピーして置いてください。

d3のダウンロード

次にd3.jsをダウンロードするのですが、2017/8/23時点では、d3のメジャーバージョンはv4となっており、c3はバージョン3系しか使えないのでエラーになります。

なので以下のサイトから古いバージョンをダウンロードします。

github.com

ダウンロードしたフォルダからd3.min.jsを取り出し、作業フォルダへコピーしておきます。

htmlファイルの準備

以下の内容でhtmlファイルを作り、作業フォルダへ保存します

<html>
  <head>
    <link href="./c3.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./d3.min.js" charset="utf-8"></script>
    <script src="./c3.js"></script>
  </head>
  <body>
    <div id="chart"></div>

    <script>
      <!--ここに処理を書く-->
    </script>
  </body>
</html>

使ってみる

サンプルはこちらの本家サイトのExamplesにたくさんあります。

C3.js | D3-based reusable chart library

基本の折れ線グラフ

まずは基本的な折れ線グラフを描きます。

scriptタグの中身を以下のように変更してください

c3.generate({
  bindto: "#chart",
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ]
  }
});

保存してhtmlをブラウザで見てみてください。

以下のようなグラフが表示されたと思います。

f:id:s-uotani-zetakansu:20170823161202p:plain

少し解説すると、bindtoというのが、グラフをどこに表示させるかをidで指定します。なくてもグラフは表示されますが、描いておけば安全です。

data属性の中に表示させるデータの値などを書いて行きます。columnsがデータ本体です。描く配列が1本のグラフになります。

data1,data2というのはグラフのラベルです。グラフの各点にマウスをあわせると値が表示されるのですが、そのときに使われます。

滑らかにする

c3.jsではほとんどコードを変えることなく、いろいろな形式のグラフを表示することができます。

scriptタグの中身を以下に書き換えてください

c3.generate({
  bindto: "#chart",
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ],
    type: 'spline'
  }
});

そうすると、グラフは以下のように滑らかになります。

f:id:s-uotani-zetakansu:20170823161955p:plain

typeオプションを追加しただけです。

棒グラフ

typeオプションを'bar'に変えてみましょう。

c3.generate({
  bindto: "#chart",
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ],
    type: 'bar'
  }
});

f:id:s-uotani-zetakansu:20170823162147p:plain

たったこれだけで折れ線グラフが棒グラフになってしまいました。

用意されているtypeには他に、

  • step
  • area
  • area-spline
  • area-step
  • scatter
  • pie
  • donut
  • gauge

があります。gauge以外はtypeを書き換えるだけで表示できます

ゲージ

gaugeだけはデータの形式が異なります。

以下のように書き換えてください

c3.generate({
  bindto: "#chart",
  data: {
    columns: [
      ['data1', 85.5],
    ],
    type: 'gauge'
  }
});

すると、以下のように表示されます。

f:id:s-uotani-zetakansu:20170823162823p:plain

data1を100にすると100%になり、全てうまります。

最後に

すばやくグラフを作るにはc3.jsはぴったりではないでしょうか。

他にもたくさんのオプションが用意されていて、カスタマイズ性は高いです。

最小限の記述で綺麗に表示できるというのも魅力的ですね。ぜひ試しに使ってみてください。