【JavaScript】C3.js ～ ツールチップあれこれ ～

Webグラフ / 地図作成ツール

■ 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

関連記事

C3.js ～ 入門編 ～

http://blogs.yahoo.co.jp/dk521123/35509265.html

C3.js ～ C3.jsあれこれ ～

http://blogs.yahoo.co.jp/dk521123/35527809.html

C3.jsのTooltipがXSSに対応していないので対応する

http://blogs.yahoo.co.jp/dk521123/35787347.html