c3js圆环图表工具提示没有显示

时间:2018-05-24 20:10:07

标签: javascript tooltip c3.js donut-chart

我遇到了C3js甜甜圈和工具提示的问题。工具提示在我的折线图中完美运行,我不明白在这种情况下什么不起作用。 以下是可待因:https://codepen.io/prtome/pen/LmKPpy

我保持非常简单 - 我试图看看用多片切片呈现甜甜圈的最佳方式是什么(因此取出幻灯片内的标签)。 这是代码 HTML

<div id="chart"></div>

JS

  var chart = c3.generate({
  bindto: d3.select('#chart'),
  size: {
        width: 500
      },
  data:{
  columns: [
        ['data1', 30],
        ['data2', 120],
        ['data3',45],
        ['data120', 30],
        ['data121', 120],
        ['data311',56],
        ['data4', 30],
        ['data5', 120],
        ['data6',45],
         ['data7', 20],
        ['data8', 90],
        ['data9',45],
        ['data10', 30],
        ['data11',38],
        ['data12',33]
    ],
   type : 'donut'
  },
  donut:{
    label: {show:false  }
   },
   tooltip:{show:true},
   legend: {
    position:'right'
    }
  });

知道我错了吗?非常感谢

(使用d3 4.13.0和C3 0.6.1)

2 个答案:

答案 0 :(得分:1)

在C3的github上给出了类似问题的解决方案 在CSS中添加以下内容

g.c3-chart {
  g.c3-event-rects {
    rect.c3-event-rect {
      pointer-events: none;
   }
 }
}

随着它的工作

答案 1 :(得分:0)

特定版本的C3js出现问题。 https://github.com/c3js/c3/pull/2359

现在已合并并解决。最好的解决方案就是使用最新版本,即0.6.7。