c3 分组条形图的数据结构?
Data structure for c3 grouped bar charts?
我正在使用 c3js 并尝试渲染三个层中的每一层,并将每个月流失的条形图分组在一个 x 轴层下。我的问题是数据结构应该是什么?
当前数据为:
[
[
"x",
"Tier I",
"Tier II",
"Tier III"
],
[
[
"Apr 2015",
"6"
],
[
"May 2015",
"3"
],
[
"Jun 2015",
"61"
],
[
"Jul 2015",
"4"
]
],
[
[
"Apr 2015",
"13"
],
[
"May 2015",
"3"
],
[
"Jun 2015",
"0"
],
[
"Jul 2015",
"0"
]
],
[
[
"Apr 2015",
"4"
],
[
"May 2015",
"5"
],
[
"Jun 2015",
"4"
],
[
"Jul 2015",
"8"
]
]
当前的c3调用是:
var chart = c3.generate({
data: {
x: 'x',
columns: full,
type: 'bar'
},
bar: {
width: {
ratio: 0.8 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'categorized' // this is needed to load string x value
}
},
bindto: '#chart'
});
谢谢!
注意x轴类型是category
不是categorized
var full = [
['x', 'Tier I', 'Tier II', 'Tier III'],
['Apr 2015', 6, 13, 4],
['May 2015', 3, 3, 5],
['Jun 2015', 61, 0, 4],
['Jul 2015', 4, 0, 8]
];
var chart = c3.generate({
data: {
x : 'x',
columns: full,
type: 'bar',
},
bar: {
width: {
ratio: 0.8 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'category' // this is needed to load string x value
}
},
bindto: '#chart'
});
Fiddle - http://jsfiddle.net/6au5aLax/
对堆叠的 X (2) 列和 Y (3) 数据集使用以下示例
c3.generate({
bindto: '#unlimited-bar-graph',
data: {
x : 'x',
columns: [
['x', 'Auto', 'M2M'],
['Renew', 20,200,300],
['Return', 10,20,30],
['Sign Up', 12, 10, 10],
],
type: 'bar',
groups: [
['Renew', 'Return', 'Sign Up']
]
},
axis: {
x: {
type: 'category' // this is needed to load string x value
}
},
grid: {
y: {
lines: [{value:0}]
}
}
});
我正在使用 c3js 并尝试渲染三个层中的每一层,并将每个月流失的条形图分组在一个 x 轴层下。我的问题是数据结构应该是什么?
当前数据为:
[
[
"x",
"Tier I",
"Tier II",
"Tier III"
],
[
[
"Apr 2015",
"6"
],
[
"May 2015",
"3"
],
[
"Jun 2015",
"61"
],
[
"Jul 2015",
"4"
]
],
[
[
"Apr 2015",
"13"
],
[
"May 2015",
"3"
],
[
"Jun 2015",
"0"
],
[
"Jul 2015",
"0"
]
],
[
[
"Apr 2015",
"4"
],
[
"May 2015",
"5"
],
[
"Jun 2015",
"4"
],
[
"Jul 2015",
"8"
]
]
当前的c3调用是:
var chart = c3.generate({
data: {
x: 'x',
columns: full,
type: 'bar'
},
bar: {
width: {
ratio: 0.8 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'categorized' // this is needed to load string x value
}
},
bindto: '#chart'
});
谢谢!
注意x轴类型是category
不是categorized
var full = [
['x', 'Tier I', 'Tier II', 'Tier III'],
['Apr 2015', 6, 13, 4],
['May 2015', 3, 3, 5],
['Jun 2015', 61, 0, 4],
['Jul 2015', 4, 0, 8]
];
var chart = c3.generate({
data: {
x : 'x',
columns: full,
type: 'bar',
},
bar: {
width: {
ratio: 0.8 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'category' // this is needed to load string x value
}
},
bindto: '#chart'
});
Fiddle - http://jsfiddle.net/6au5aLax/
对堆叠的 X (2) 列和 Y (3) 数据集使用以下示例
c3.generate({
bindto: '#unlimited-bar-graph',
data: {
x : 'x',
columns: [
['x', 'Auto', 'M2M'],
['Renew', 20,200,300],
['Return', 10,20,30],
['Sign Up', 12, 10, 10],
],
type: 'bar',
groups: [
['Renew', 'Return', 'Sign Up']
]
},
axis: {
x: {
type: 'category' // this is needed to load string x value
}
},
grid: {
y: {
lines: [{value:0}]
}
}
});