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時您的網格線尚未添加。