隐藏一些图形元素，c3js，不卸载数据

Question

是否可以在不卸载或隐藏数据的情况下从 c3js 图表中隐藏某些线条、条形和其他图形元素？

我希望将这些数据保留在工具提示中，但隐藏一些图形元素。将鼠标悬停在一个条上并查看其他隐藏条的数据。

我知道 hide 方法 - chart.hide(['data2', 'data3']); - 但这也会从工具提示中删除数据。

documentation 似乎没有讨论我的问题。

11 月的一个similar issue 没有解决。

我现在没有任何代码 - 只是在寻找制作自定义工具提示的替代方法。

谢谢

Answer 1

一个简单的解决方案是对图表 svg 元素使用 CSS 显示属性，例如：-

http://jsfiddle.net/chetanbh/j9vx0dmg/

var chart = c3.generate({
  data: {
    columns: [
        ['data1', 100, 200, 150, 300, 200],
        ['data2', 400, 500, 250, 700, 300],
    ]
  }
});

在上面的 c3js 图表示例中，折线图用两条线呈现。

每一行都是 Group 元素下的 Path svg 元素。这些组元素将获得类属性值，例如“c3-target-data1”和“c3-target-data2”。

利用这一点，我们可以像这样使用 CSS：-

.c3-target-data2 {
    display: none;
}

在图表中隐藏整个“data2”，但工具提示将继续显示“data2”的数据。

希望这会有所帮助。