サンプル
<html>
<head>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>
<body>
<div id="chart"></div>
<button onClick="transformBar()">棒グラフを表示</button><br />
<button onClick="transformStackedBar()">積み上げ棒グラフを表示</button><br />
<button onClick="transformLine()">折れ線グラフを表示</button><br />
<button onClick="reloadData()">別データの再読み込み</button><br />
<button onClick="flowData()">追加データを表示</button><br />
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250],
['data2', -130, -100, -100, -200, -150, -50],
['data3', -100, 100, 100, 200, 0, 200],
],
type: 'line',
},
});
function transformBar() {
// 棒グラフに変形
chart.groups([['data1'], ['data2'], ['data3']]);
chart.ygrids.add({value:0});
chart.transform('bar');
}
function transformStackedBar() {
// 積み上げ棒グラフに変形
chart.groups('data1', 'data2', 'data3');
chart.ygrids.add({value:0});
chart.transform('bar');
}
function transformLine() {
// 折れ線グラフに変形
chart.groups([['data1'], ['data2'], ['data3']]);
chart.ygrids.remove({value:0});
chart.transform('line');
};
function reloadData() {
chart.groups([['data1'], ['data2'], ['data3']]);
chart.ygrids.remove({value:0});
// 更新用のデータ生成
var columns = [['data1'], ['data2'], ['data3']], i;
columns.forEach(function (datum) {
for (i = 0; i < 10; i++) {
datum.push(Math.random() * 100);
}
});
// 更新
chart.load({
columns: columns
});
};
function flowData() {
chart.groups([['data1'], ['data2'], ['data3']]);
chart.ygrids.remove({value:0});
// 追加データの生成
var columns = [['data1'], ['data2'], ['data3']];
columns.forEach(function (datum) {
for (var i = 0; i < 3; i++) {
datum.push(Math.random() * 100);
}
});
// データを追加し、同じ長さ分左へ流す
chart.flow({
columns: columns
});
};
</script>
</body>
</html>
