我有一个dc.js序号图表,其x轴包含“化妆品”之类的内容,而y轴代表销售数量。我想按销售额下降的.ordering(function(d){return -d.value.ty})
顺序对图表进行排序,但是当我使用折线图的路径时,仍然按x轴排序。
var departmentChart = dc.compositeChart('#mystore_department_chart'),
ndx = crossfilter(response.data),
dimension = ndx.dimension(function(d) {return d.name}),
group = dimension.group().reduce(function(p, v) {
p.ty += v.tyvalue;
p.ly += v.lyvalue;
return p;
}, function(p, v) {
p.ty -= v.tyvalue;
p.ly -= v.lyvalue;
return p;
}, function() {
return {
ty: 0,
ly: 0
}
});
departmentChart
.ordering(function(d){return -d.value.ty})
//dimensions
//.width(768)
.height(250)
.margins({top: 10, right: 50, bottom: 25, left: 50})
//x-axis
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.xAxisLabel('Department')
//left y-axis
.yAxisLabel('Sales')
.elasticY(true)
.renderHorizontalGridLines(true)
//composition
.dimension(dimension)
.group(group)
.compose([
dc.barChart(departmentChart)
.centerBar(true)
.gap(5)
.dimension(dimension)
.group(group, 'This Year')
.valueAccessor(function(d) {return d.value.ty}),
dc.lineChart(departmentChart)
.renderArea(false)
.renderDataPoints(true)
.dimension(dimension)
.group(group, 'Last Year')
.valueAccessor(function(d) {return d.value.ly})
])
.brushOn(false)
render();
这是我最终做的hack。请注意,由于all()比top(Infinity)快,因此在大型数据集上可能会出现性能问题。由于某种原因,我无法得到戈登的答案,但从理论上讲应该如此。
我在小组中指定了订单功能
group.order(function(p) {
return p.myfield;
});
然后因为all()不使用order函数,所以我覆盖了默认的all函数
group.all = function() {
return group.top(Infinity);
}
然后在我的图表上,我必须指定一个定单函数
chart.ordering(function(d){
return -d.value.myfield
}); // order by myfield descending
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句