javascript - 条形图列未在 D3/C3 中分组

Question

我正在使用 D3(技术上是 C3)来尝试创建分组条形图。

我试图制作的图表是每个职业的捐款条形图，按付款类型分组。对于我的一生，我不知道如何进行分组。

这是我到目前为止所拥有的代码。它产生了我想要的一切，除了按 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/

如果您想让条形并排显示而不是堆叠显示，只需删除 groups 属性即可。