Столбцы столбцов столбцов не группируются в D3/C3

Question

Я использую D3 (технически C3), чтобы попытаться создать сгруппированную гистограмму.

Диаграмма, которую я пытаюсь сделать, представляет собой гистограмму пожертвований на каждое занятие, сгруппированное по PaymentType. Для жизни я не могу понять, как сделать группировку.

Это код, который у меня есть до сих пор. Он производит все, что я хочу, кроме группировки по PaymentType:

var x_values = ["Occupation", "DENTIST", "PROGRAMMER/ANALYST", "CORPORATE SECRETARY", "PHYSICIAN", "PROFESSOR", "PRESIDENT", "PROFESSOR", "MANAGER", "CORPORATE SECRETARY", "PRESIDENT", "PHYSICIAN", "DENTIST", "PROGRAMMER/ANALYST", "CO-OWNER", "MANAGER", "CO-OWNER"] 
var y_values = ["Donation", 11340, 12335, 3259, 18041, 10415, 35900, 14660, 21985, 2950, 15110, 16705, 370, 22255, 13055, 4000, 20740] 
var z_values = ["PaymentType", "MONETARY", "NON-MONETARY", "NON-MONETARY", "MONETARY", "MONETARY", "NON-MONETARY", "NON-MONETARY", "MONETARY", "MONETARY", "MONETARY", "NON-MONETARY", "NON-MONETARY", "MONETARY", "MONETARY", "NON-MONETARY", "NON-MONETARY"] 

var chart = c3.generate({ 
    data: {columns: [y_values], 
      type: 'bar', 
      groups: [z_values],}, 
    axis: {x: 
      {type: 'category', 
      categories: x_values}} 
}); 

Answer 1

Что-то вроде этого?

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['MONETARY', 11340, 3259, 10415, 14660, 2950, 16705, 22255, 4000], 
      ['NON-MONETARY', 12335, 18041, 35900, 21985, 15110, 370, 13055, 20740] 
     ], 
     type: 'bar', 
     groups: [ 
      ['MONETARY','NON-MONETARY'] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'Occupation', 
      categories: ['DENTIST', 'PROGRAMMER/ANALYST', 'CORPORATE SECRETARY', 'PHYSICIAN', 'PROFESSOR', 'PRESIDENT', 'MANAGER', 'CO-OWNER'] 
     } 
    }  
}); 

Fiddle - http://jsfiddle.net/63cp42Lv/

Если вы хотите, чтобы бруски появляются бок о бок, а не укладываются, просто удалить свойство группы.