我需要显示带有过滤功能的分组条形图。我在我的项目中使用带交叉过滤器的dc。
该图表存在于d3 js http://bl.ocks.org/mbostock/3887051;任何与dc.js一起实现的帮助都会很棒。我已经完成了Multi-series bar chart in DC-js和https://github.com/dc-js/dc.js/issues/558,但它们并不完整。
我的要求是日期将是组,系统将是X轴,命中点将是Y轴。
我的数据如下。
我想用 apo_loc作为X轴和 hit_percentage作为Y轴制作 group by process_date ,但是我无法实现它。我已为hit_count
,miss_count
和total
填写了日期。请使用hit_percentage
,system
与日期帮助我完成此操作。
var dim = this.ndx.dimension(dimFun);
var grp = dim.group().reduce(
function (p, v) {
p.hit_count += +v.hit_count;
p.miss_count += +v.miss_count;
p.total += +v.total;
return p;
},
function (p, v) {
p.hit_count -= +v.hit_count;
p.miss_count -= +v.miss_count;
p.total -= +v.total;
return p;
},
function () {
return {
hit_count: 0,
miss_count: 0,
total:0
};
}
);
bar.margins({
top: 20,
left: 30,
right: 10,
bottom: 20
})
.width(barWidth)
.height(barHeight)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.brushOn(false)
.dimension(dim)
.renderLabel(true)
.renderType("group")
.group(grp, "Hit Point")
.valueAccessor(function (d) {
return d.value.hit_count;
})
.stack(grp, "Miss Point", function (d) {
return d.value.miss_count;
}) .stack(grp, "Total", function (d) {
return d.value.total;
});