c3.js - xgrid行上的工具提示

Question

在使用c3.js时，当鼠标悬停在xgrid行上时，是否可以有工具提示？

var chart1 = c3.generate({
    bindto: '#chart1',
    padding: {
      right:30
    },
    data: {
          x: 'x',
          xFormat: '%Y-%m-%d %H:%M',
          columns:
          [
              ['x', '2013-01-01 00:00', '2013-01-01 01:00','2013-01-01 03:00','2013-01-01 04:00', '2013-01-01 05:00', '2013-01-01 06:00', '2013-01-01 07:00', '2013-01-01 08:00', '2013-01-01 09:00', '2013-01-01 10:00', '2013-01-01 11:00','2013-01-01 12:00','2013-01-01 13:00', '2013-01-01 14:00', '2013-01-01 15:00', '2013-01-01 16:00', '2013-01-01 17:00', '2013-01-01 18:00', '2013-01-01 19:00', '2013-01-01 20:00', '2013-01-01 21:00', '2013-01-01 22:00', '2013-01-01 23:00'],
              ['RX', 20, 10, 9, 20, 30, 20, 20, 20, 32, 20, 10, 9, 20, 30, 20, 20, 20, 32, 23, 12, 5, 14, 15],
          ],
          type: 'spline',
          colors: {
            RX:'#2d74d0',
          },
        },
        tooltip: {
          order: null,
        },
        point: {
          show: false
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                  multiline: false
                }
            },
            y: {
              tick: {
                format: function (y) { return y + 'GB'}
              }
            }
        }
    }
).xgrids.add([
  {value: '2013-01-01 01:00', text: '01:00, Network 1'},
  {value: '2013-01-01 02:28', text: '02:28, Network 2'}
]);

我在jsfiddle https://jsfiddle.net/tekp7vvc/上发布了一个示例。

Answer 1

你可以使用一个基本的基于标题的工具提示，并在你的c3设置中添加以下内容：

onrendered: function () {
  var xg = d3.selectAll(".c3-xgrid-lines text");
  xg.each (function (d,i) {
        var title = d3.select(this).select("title");
      if (title.empty()) {
        title = xg.append("title");
      }
      title.text (function (d) {
        return "Gridline: "+d.value+", "+d.text;
      })
  })
},

https://jsfiddle.net/tekp7vvc/1/

它被设置为当悬停在网格线文本上时工作，否则它将与在工具提示中显示数据的功能竞争，如果网格线与数据点位于相同的位置( 1.00am数据点是)

它还被设置为在onrendered而不是oninit中运行，因为此时oninit称为你的网格线还没有被添加。