javascript – 使用dc.js按条形图对条形图中的条进行排序(排序)

前端之家收集整理的这篇文章主要介绍了javascript – 使用dc.js按条形图对条形图中的条进行排序(排序)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何通过维度的计算值而不是维度本身的名称对dc.js示例中的x轴(维度)进行排序?

例如,在以下位置考虑序数条形图的dc.js示例:

https://github.com/dc-js/dc.js/blob/master/web/examples/ord.html

如何按水果计数的降序对x轴进行排序?

这是我尝试过的:(jsfiddle:http://jsfiddle.net/gautam/re9r9kk7/)

@H_404_10@var counts = [ {name: "apple",cnt: 10},{name: "orange",cnt: 15},{name: "banana",cnt: 12},{name: "grapefruit",cnt: 2},cnt: 4} ]; var ndx = crossfilter(counts),fruitDimension = ndx.dimension(function(d) {return d.name;}),sumGroup = fruitDimension.group().reduceSum(function(d) {return d.cnt;}); chart .width(768) .height(380) .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal) .brushOn(false) .xAxisLabel("Fruit") .yAxisLabel("Quantity Sold") .dimension(fruitDimension) .barPadding(0.1) .outerPadding(0.05) .group(sumGroup);

解决方法

基础mixin上有一个名为 chart.ordering()函数.

它特别适用于在不需要字母默认值时更改序数值的顺序.传递给此函数函数采用{key,value}对并返回一个值以进行排序.

对于按值按降序排列条形图,您可以这样做

@H_404_10@chart.ordering(function(d) { return -d.value; })

猜你在找的JavaScript相关文章