如何在 c3js 图表中只显示点击图例数据？

Question

我有一个包含多个数据的折线图。这是我的图表示例。

通常情况下，如果我在图表上单击该图例，图例数据会自动 show/hide。

但是我在图例中添加了这样的函数后，

legend: {
        position: 'right',
        item: {
                onclick: function (d) { 
                            console.log("onclick", d); 
                            show(d); //when I click legend show some data
                }
            }
},

如果我点击图表上的那个图例，我不会自动得到 show/hide。不过对我来说不重要。

而不是这个，我只想在图表中显示点击图例数据。如果我单击 data1 图例，我只想在图表中显示 data1 线并隐藏图表中的另一条 data2、data3 和 data4 线。

但是，我不知道该怎么做。我非常感谢任何建议。

Answer 1

现在，我可以解决我的问题了。这是代码。

legend: {
        position: 'right',
        item: {
                onclick: function (d) { 
                        console.log("onclick", d); //data1
                        show(d); //when I click legend show some data
                        chart.hide();
                        chart.show(d);
                }
            }
},

首先，我使用chart.hide()。此功能将隐藏图表上的所有数据。

之后，我使用chart.show(d)，它只能显示用户点击的数据，因为我添加了用户点击图例作为参数。

Note: show(d) is not related with chart.show(d). Just a function that I create for my need.

Answer 2

对于那些像我一样在寻找通过图例点击专注于单个系列的方法时遇到这个问题的人（我已经习惯 double-click 这样做），似乎 c3 添加了使用 alt-click 专注于单个图例项的功能。请参阅提交 here。事实证明这在 billboard.js 中也有效，它是 c3.

的一个分支

如何在 c3js 图表中只显示点击图例数据？

How to show only clicking legend data in c3js chart?

javascript

c3.js