c3.js

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

您可以使用基于 'title' 的基本工具提示，在您的 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 点的数据点位于同一位置），它将与在工具提示中显示数据的功能竞争

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

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

c3.js - Tooltips on xgrid lines

javascript

tooltip

d3.js