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

Question

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

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

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

我的问题没有在documentation中讨论看来。

A similar issue 11月未解决。

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

谢谢

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”的数据。

希望这对您有所帮助。