我正在尝试创建一个分组和堆叠的条形图,但在理解如何使用c3js时遇到一些麻烦。本教程很棒,向我展示了一个很好的分组图表。
http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/
我正在寻找类似的东西,但每个条形码堆叠2个数据集。我的数据如下:
columns: [
['x', 'data1', 'data2'],
['Jan', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
['Feb', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
['Mar', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
]
我希望图表包含1月,2月,3月的组。然后在每组中标记3个堆叠的条形图。任何想法,如果这是可能的,如果可能的话,怎么可能。
谢谢!
答案 0 :(得分:3)
http://jsfiddle.net/3r39gknt/1/
如果是这样,则需要根据示例重命名data1和data2字段。如果没有,绘制/扫描你期望的图片/草图 - c3中的组是每个堆栈中涉及的数据元素,但我对你的月份和组的使用进行了正确或错误的解释#39;作为x轴上的不同点。
var chart = c3.generate({
data: {
columns: [ // randomish data
['data1', 30, 200, 200],
['data2', 130, 100, 100],
['data3', 230, 220, 200],
['data4', 230, 220, 200],
['data5', 230, 200, 210],
['data6', 230, 190, 200]
],
type: 'bar',
groups: [
['data1', 'data2'],
['data3', 'data4'],
['data5', 'data6'],
],
order: null,
colors: {
data1: '#f00',
data2: '#00f',
data3: '#f33',
data4: '#33f',
data5: '#f66',
data6: '#66f'
}
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'category',
categories: ['january', 'february', 'march']
}
}
});