javascript - C3.js中的向下钻取功能

我有一个简单的条形图，显示两个团队。这是屏幕截图。



现在，例如，如果我单击多头，它应该显示向下钻取并显示另一个条形图，该条形图将有5个条形，每个条形代表来自多头的玩家。如果我单击湖人，则应向下钻取并显示另一个条形图，该条形图将有5条，分别代表湖人的一名球员。

例如，在我点击多头之后，它应该显示如下内容。

简而言之，我正在寻找下钻功能。这是我到目前为止的代码。



这是我到目前为止的代码，这是我的FIDDLE。

var chart = c3.generate({
    data: {
        columns: [
            ['bulls', 30],
            ['lakers', 50],
        ],
        type : 'bar'

    },

});

我很高兴知道如何实现这一目标，或者即使有人可以编辑我的小提琴给我看一些虚拟的例子，我也将不胜感激。

最佳答案

您只需要确定单击了哪个数据点，然后加载玩家数据并卸载团队数据即可。

onclick: function (d, element) {
    chart.load({
        unload: ['bulls', 'lakers'],
        columns: <player data for the clicked team>
    });
}

更新的小提琴：http://jsfiddle.net/mcuepavh/1/