■ Tooltipと共に表示されている線を消すには
* 以下で消える<style>
#chart .c3-xgrid-focus {
display: none;
}
</style>
http://ambracode.com/index/show/52830■ 独自のTooltipを実装するには
* 以下のサンプルが役に立った。http://www.zemoko.com/javascript/customize-tooltip-in-c3js/
* サンプル
http://jsfiddle.net/izemoko/o8cdc5fw/
ポイント
* tooltip.contents を利用するhttp://c3js.org/reference.html#tooltip-contents
サンプル
<html>
<head>
<style>
// ★ここ★
#chartToDrow .c3-xgrid-focus {
display: none;
}
#chartToDrow .d3-tip {
line-height: 1;
font-weight: bold;
padding: 5px 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 4px;
line-height: 15px;
font-size: 12px;
min-width: 91px;
}
#chartToDrow .d3-tip .info {
font-size: 11px;
color: #8897b4
display: block;
}
</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="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',
}
},
// ★ここ★
tooltip: {
contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value;
for (i = 0; i < data.length; i++) {
if (! (data[i] && (data[i].value || data[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(data[i].x) : data[i].x;
text = "<div id='tooltip' class='d3-tip'>";
}
value = valueFormat(data[i].value, data[i].ratio, data[i].id, data[i].index);
text += "<span class='info'>"+ title +"</span><br>";
text += "<span class='value'>" + value + "</span>";
text += "</div>";
}
return text;
}
},
legend: {
show: false
}
});
</script>
</body>
</html>
補足
* はじめ、以下のD3.jsの関連記事にあるように、マウスイベントをハンドリングして実装しようかと試みたが 以下の理由で断念した。 1) マウスイベントが「onmouseover」「onmouseout」しかない（「onmousemove」がない） 2) y軸の値(value)は表示可能だが、x軸の値は取得できない(何番目のデータかはわかる)http://blogs.yahoo.co.jp/dk521123/35480801.html
番外
* 以下はその他サンプルhttp://jsfiddle.net/muuqvf1a/
* 以下の関連記事「C3.jsのTooltipがXSSに対応していないので対応する」で利用したhttp://blogs.yahoo.co.jp/dk521123/35787347.html
