Просверливание в C3.js

Question

У меня есть простая гистограмма, которая отображает две команды. Вот скриншот.

Теперь, например, если я нажму на быках он должен показать бур и показать другую гистограмму, которая будет иметь 5 баров, каждый представляющий игрока из быков. Если я нажму на Lakers, он должен развернуться и показать еще одну гистограмму, которая будет содержать 5 баров, представляющих игрока из Лейкерс.

Например, после того, как я нажимаю на быков, он должен показать что-то подобное.

Итак, вкратце, я ищу функцию детализации. Это код, который у меня есть до сих пор.

Вот код, который я до сих пор, и вот мой 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/