具有特定订单的C3JS条形图 [英] C3JS bar chart with specific order
问题描述
如果我有如下定义的C3JS分组条形图,我怎样才能使分段保持按照我定义的顺序而不是按值按升序排列?默认情况下,C3会将它们命令为5,10,40,但我希望它保持为10,40,5。
If I have a C3JS grouped bar chart defined like the following, how can I get the segments to stay in the order I've defined them instead of in ascending order by value? By default C3 will order them as 5, 10, 40, but I want it to remain as 10, 40, 5.
c3.generate({
bindto: '.active-loads',
data: {
columns: [
['Picking up future', 10],
['Enroute', 40],
['Delivered', 5]
],
type: 'bar',
groups: [
['Picking up future', 'Enroute', 'Delivered']
],
onclick: function(d) {
console.debug(d);
}
},
axis: {
rotated: true,
x: {
show: false
}
}
});
编辑
结果就像在数据
属性中指定 order:null
一样简单。
Turns out it's as easy as specifying order: null
in the data
property.
推荐答案
C3js文档包含以下页面: http://c3js.org/samples/data_order.html
C3js documentation has page for this : http://c3js.org/samples/data_order.html
您可以按以下方式订购数据:
You can order your data in following way :
var chart = c3.generate({
data: {
columns: [
['data1', 130, 200, 320, 400, 530, 750],
['data2', -130, 10, 130, 200, 150, 250],
['data3', -130, -50, -10, -200, -250, -150]
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: 'desc' // stack order by sum of values descendantly.
// order: 'asc' // stack order by sum of values ascendantly.
// order: null // stack order by data definition.
},
grid: {
y: {
lines: [{value:0}]
}
}
});
此处也有详细说明: http://c3js.org/reference.html#data-order
你可以指定你的功能也是:)
You can specify your function too :)
这篇关于具有特定订单的C3JS条形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!