公式サイト
サンプルコード
Getting Startedページのサンプルを動かしてみます。
https://c3js.org/gettingstarted.html
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
</html>
必要なjs, cssファイルを読み込み（3～5行目）
ここではライブラリをCDNのcdnjsから読み込みます。
C3.jsのjs, cssファイルのほか、このライブラリはD3.jsベースのため、d3.jsの読み込みも必要です。
- C3.js – https://cdnjs.com/libraries/c3
- D3.js – https://cdnjs.com/libraries/d3
ファイルをダウンロードして使用する場合は以下のリンクから最新版のC3.jsのダウンロードが可能です。
https://github.com/c3js/c3/releases/latest
依存関係については、C3.jsのv0.5.0でD3.jsのv4に、C3.jsのv0.6.0でD3.jsのv5に更新されています。
チャートを描画する要素を用意（8行目）
チャートを描画するためのdiv要素を用意、取得するためのIDも設定しておきます。
チャートを生成（10～18行目）
c3.generate関数にチャートの設定値を格納したオブジェクトを渡し、チャートを生成します。
bindtoにはチャートを描画する要素を指定します。
ここではIDがchartの要素に描画するため、’chart’を指定しています。
dataにチャートのデータを設定しています。
columnsに線ごとの値を指定しています。
依存ライブラリ
D3.js
https://d3js.org/
