我使用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}}
});
答案 0 :(得分: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/
如果要使条形并排显示而不是堆叠,只需删除groups属性。