C3.js 中的向下钻取功能

Question

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

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

例如，在我点击公牛之后，它应该显示类似这样的内容。

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

这是我目前的代码，这是我的 FIDDLE。

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

    },           

});

如果知道如何实现这一点，或者即使有人可以编辑我的 fiddle 以向我展示一些虚拟示例，我将不胜感激。

Answer 1

您只需确定点击了哪个数据点，然后加载球员数据并卸载球队数据。

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

已更新 fiddle：http://jsfiddle.net/mcuepavh/1/

C3.js 中的向下钻取功能

Drill down capabality in C3.js

javascript

d3.js

c3.js