在C3.js中深入了解能力

Question

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

现在，例如，如果我点击公牛，它应显示向下钻取并显示另一个条形图，其中每个条形图代表一个来自公牛的玩家。如果我点击湖人队，它应该向下钻取并显示另一个条形图，其中每个条形图代表一个来自湖人队的球员。

例如，点击公牛后，它应该显示这样的东西。

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

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

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

    },           

});

我很欣赏知道如何实现这一点，或者即使有人可以编辑我的小提琴来向我展示一些虚拟的例子。

Answer 1

您只需要确定点击了哪个数据点，然后加载播放器数据并卸载团队数据。

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

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