■x軸関連
a-1) x軸表示を斜め表示に : axis.x.tick.rotate
axis: {
x: {
tick: {
rotate: 45,
}
}
}
a-2) x軸表示の折り返し : axis.x.tick.multiline
http://c3js.org/reference.html#axis-x-tick-multilineでは「not yet」ってあるが使えた
axis: {
x: {
tick: {
multiline: false,
}
}
}
サンプル
<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> </head> <body> <div id="chartToDrow"></div> <script> var chart = c3.generate({ bindto: '#chartToDrow', data: { x: 'x', columns: [ ['x', 'Mike', 'Tom', 'Kevin', 'Sam', 'Ken'], ['score', 76, 98, -35, 46, -56], ], type: 'bar', }, grid: { y: { lines: [{value:0}] } }, axis: { x: { type: 'category', tick: { multiline: false, rotate: 75, }, height: 130 } }, }); </script> </body> </html>
■ 範囲
* 以下を参考http://c3js.org/samples/region.html
http://c3js.org/samples/style_grid.html
http://c3js.org/samples/style_region.html
http://c3js.org/samples/region_timeseries.html
サンプル
* 例1：ライン<html>
<head>
<style>
.c3-ygrid-line.min-grid line {
stroke: red;
}
.c3-ygrid-line.min-grid text {
fill: red;
}
.c3-ygrid-line.max-grid line {
stroke: blue;
}
.c3-ygrid-line.max-grid text {
fill: blue;
}
</style>
<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>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 400],
],
},
grid: {
y: {
lines: [{value: 100, class: 'min-grid', text: 'LABEL Min'}, {value: 300, class: 'max-grid', text: 'LABEL Max'}]
}
}
});
</script>
</body>
</html>
* 例2：格子 <html>
<head>
<style>
.c3-region.regionX {
fill: blue;
}
</style>
<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>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 400],
],
},
regions: [
{axis: 'y', start: 100, end: 300, class: 'regionX'},
]
});
</script>
</body>
</html>
■ その他
z-1) データが空だった場合の表示 : empty/label/text
data: {
empty: {
label: {
text: "No Data"
}
}
}
その文字列を大きくするには... <style type="text/css"> #chart .c3-empty { font-size: 40px; } </style>
サンプル
<html> <head> <style type="text/css"> #chart .c3-empty { font-size: 40px; } </style> <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> </head> <body> <div id="chart"></div> <script> var chart = c3.generate({ bindto: '#chart', data: { x: 'x', columns: [ ['x', ], ['score', ], ], type: 'bar', empty: { label: { text: "No Data" } } }, axis: { x: { type: 'category', } }, }); </script> </body> </html>
z-2) グラフを動的に変更するには... ～
* 以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/35516064.html
z-3) 改行入れのテキストを表示するには...
* 以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/35523904.html
z-4) モーダルダイアログを表示する
* 以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/35532044.html
