2週間前に投稿

D3-based JavaScript charts library「 C3.js 」

2019年11月5日

この記事は約 5 分で読めます。

4.5

チャート用JavaScriptライブラリとして
Canvas ベースの「 Chart.js 」を
使ってみましたが、
SVG ベースのライブラリ
D3.js 」の
チャート生成に特化して作られた
C3.js 」を試してみました。

D3.js
javascriptからデータを基にSVGを描画するライブラリである。
Data-Driven Documents(データ駆動型ドキュメント)の
D をとって D3と命名されている。

C3.js
上記 D3.jsを基に作られた
チャート作成に特化したライブラリです。
D3.jsでもチャートの作成は可能なのですが、
ちょっとしたチャートを作りたい場合に
C3.jsはサクッと使えるのが魅力です。

それでは、
C3の使用を開始する方法です。

Getting Started
Setup では
最新バージョンをダウンロード
するよう書かれていますが、
CDN もありました。

まず、スクリプトとcssをロードします。
CDN経由でファイルを読み込みます。

Chart.js は本体ファイルのみですが、
C3.js は cssファイル、
D3.js と c3.js の3ファイル読み込みます。

<!-- Load c3.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.css" integrity="sha256-6keM3+sDUFwuiB+tXRq/HV8tqQYlvarrsoWkx53dSgY=" crossorigin="anonymous" />
<!-- Load d3.js and c3.js -->
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.js" integrity="sha256-yMKikbJX1KiqhWV2sg9EnZz6kSLj+rojDR0Tma4TPA0=" crossorigin="anonymous"></script>

※ C3はD3に依存するため、D3もロードしてください。

ページ内にはIDをつけた div 要素を設置。
ここにグラフが表示されます。

<div id="chart"></div>

JavaScriptの bindto:div 要素のIDを指定します。

var chart = c3.generate({
  bindto: '#chart',
  data: {
    xs: {
      'data1': 'x1',
      'data2': 'x2',
    },
    columns: [
      ['x1', 10, 30, 45, 50, 70, 100, 130],
      ['x2', 30, 50, 75, 100, 120],
      ['data1', 30, 200, 100, 400, 150, 250, 80],
      ['data2', 20, 180, 240, 100, 190]
    ],
    regions: {
      'data1': [{
        'start': 30,
        'end': 50,
        'style': 'dashed'
      }, {
        'start': 70
      }] // currently 'dashed' style only
    },
    types: {
      data1: 'area',
      data2: 'area-spline'
    },
    axes: {
      data2: 'y2'
    },
    labels: true,
  },
  axis: {
    x: {
      label: {
        text: 'X Label',
        position: 'outer-center'
      }
    },
    y: {
      label: {
        text: 'Y Label',
        position: 'outer-middle'
      }
    },
    y2: {
      show: true,
      label: { // ADD
        text: 'Y2 Label',
        position: 'outer-middle'
      }
    }
  }
});

以下のようなグラフが完成しました!
分かりそうなオプションを適当
設定してみたので ごちゃごちゃですが・・・(汗

C3.js は
無料のライブラリの中でも
特に高機能で、
グラフの種類
カスタマイズ性も抜群と言うか、
すごい数のOptionsがあります。

CSSもカスタマイズできるみたいです。

C3 give some classes for each element when generating. So, you can change the style of the elements by using those classes.

スタイルを変更する場合は、
各要素のクラスを確認してください。

色々調べると、
chart.js は
PDF化できないらしいのですが、
C3.js のグラフはPDF化が可能のようです。

これは良いと思った方は
是非お試し下さいませ。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
D3-based JavaScript charts library「 C3.js 」