在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'] 
     } 
    }  
}); 

小提琴 - http://jsfiddle.net/63cp42Lv/

如果你想使杆並排而不是堆積出現的一面，只是刪除團體屬性。