サンプル
http://c3js.org/examples.html
から基本的なグラフを書いてみる
* 設定については、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35509265.html
■ 例1 : 円グラフ
<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>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 10],
['data2', 20],
['data3', 30],
],
type : 'pie',
}
});
</script>
</body>
</html>
■ 例2 : 折れ線グラフ
x軸：時間、y軸：値
<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>
<script>
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y/%m/%d', // 'xFormat' can be used as custom format of 'x'
columns: [
['x', '2015/10/30', '2015/10/31', '2015/11/01', '2015/11/02', '2015/11/03', '2015/11/04'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: 45,
format: '%Y/%m/%d'
}
}
}
});
</script>
</body>
</html>
■ 例3 : 縦棒グラフ
<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>
<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: 'bar',
names: {
data1: 'Sample Data A',
data2: 'Sample Data B',
data3: 'Sample Data C',
},
},
transition: {
duration: 2000
},
grid: {
y: {
lines: [{value:0}]
}
},
color: {
pattern: ['Blue', 'Red', 'LimeGreen']
}
});
</script>
</body>
</html>
■ 例4 : 積み上げ縦棒グラフ
<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>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250],
['data2', -130, -100, -100, -200, -150, -50],
],
type: 'bar',
groups: 'data1', 'data2'
},
grid: {
y: {
lines: [{value:0}]
}
}
});
</script>
</body>
</html>
■ 例5 : 複合グラフ / 積み上げ縦棒 + 折れ線グラフ
<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>
<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: 'bar',
types: {
data3: 'line',
},
groups: 'data1', 'data2'
},
grid: {
y: {
lines: [{value:0}]
}
},
color: {
pattern: ['Blue', 'Red', 'LimeGreen']
}
});
</script>
</body>
</html>
