サンプル
* 手始めに、棒グラフを描画する処理を共通化してみる
sample.html
* 使用者。「グラフデータ」と「グラフを描画するID」だけ指定するだけ
<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>
<!-- ★ここ★ -->
<script src="./js/c3handler.js"></script>
</head>
<body>
<div id="chartToDrow"></div>
<script>
<!-- ★ここ★ -->
var chartData = [
['data1', 30, 200, 200, 400, 150, 250],
['data2', -130, -100, -100, -200, -150, -50],
['data3', -100, 100, 100, 200, 0, 200],
];
drowBarChart('chartToDrow', chartData);
</script>
</body>
</html>
c3handler.js
* 共通化。後は使用したいグラフのサブルーチンを作成すれば書くコードが少なくなるかと
// idToDrow : 描画するID
// chartData : グラフデータ
function drowBarChart(idToDrow, chartData) {
var chart = c3.generate({
bindto: document.getElementById(idToDrow),
data: {
columns: chartData,
type : 'bar',
},
grid: {
y: {
lines: [{value:0}]
}
},
});
}
