隐藏一些图形元素c3js，而不卸载数据 [英] Hide some graphic elements, c3js, without unloading data

问题描述

可以从c3js图表中隐藏某些线条，条形和其他图形元素，而不卸载或隐藏数据？

Is it possible to hide certain lines, bars and other graphic elements from a c3js chart, without unloading or hiding data?

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

I wish to keep that data in the tooltip but hide some graphic elements. Hover over one bar and see data for other hidden bars.

我知道隐藏方法 - chart.hide（['data2'，'data3']）;

I know about the hide method - chart.hide(['data2', 'data3']); - but this also deletes the data from the tooltip.

我的问题没有在文档。

A 类似问题在11月没有解决。

A similar issue in November was not solved.

我现在没有任何代码 - 只是寻找

I don't have any code right now - just looking for an alternative to making a custom tooltip.

感谢

推荐答案

容易的解决方案是使用CSS显示属性为图表svg元素如： -

One easy solution is to use CSS display property for the chart svg elements like:-

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

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

在上述c3js图表示例中，折线图用两行显示。

In the above c3js chart example a line chart is rendered with two lines.

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

Each line is a Path svg element under a Group element. These group elements will get class attribute values like 'c3-target-data1' and 'c3-target-data2'.

利用这些，我们可以使用CSS： -

Taking advantage of this we can use CSS like:-

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

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

to hide the entire 'data2' in the chart, but tooltip will continue to show the data for 'data2'.

希望这有助。

这篇关于隐藏一些图形元素c3js，而不卸载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！