我是javascript和dc.js的新手,目前很难创建一个只能查看数据列中特定值的numberDisplay。
我创建了一个包含许多不同图表的信息中心,但我目前仍然停留在最终的数字显示上,这些显示也将与其他图表一起过滤。
我的数据包含两个与下面相似格式的字段,我希望仅为SLA" 2天"创建一个百分比数字显示。
所以我希望numberDisplay能够返回" 2天"在整个组内,所以它会显示30%(10/30)
我已经搜索并尝试了不同的解决方案,但我迄今为止唯一能做的就是显示所有SLA的总和。
var data = [{
"sla": "2 days",
"team": "hr",
"hits": 7
}, {
"sla": "2 days",
"team": "finance",
"hits": 1
}, {
"sla": "2 days",
"team": "finance",
"hits": 2
}, {
"sla": "3-4 days",
"team": "hr",
"hits": 5
}, {
"sla": "3-4 days",
"team": "hr",
"hits": 4
}, {
"sla": "5 days",
"team": "finance",
"hits": 3
}, {
"sla": "5 days",
"team": "hr",
"hits": 8
}];
SLA中有大约6-7种不同的可能条目,我目前只想创建其中2或3个的数字显示。
这样做最快/最简单的解决方案是什么?
我创建了一个基本的jsfiddle作为示例:https://jsfiddle.net/kevinelphick/owx2L1wt/2/?utm_source=website&utm_medium=embed&utm_campaign=owx2L1wt
答案 0 :(得分:2)
我认为使用普通缩减并使用"fake group"来提取您想要的单个值会更加清晰。
这是一个包装器,它接受一个组和一个键,并返回一个groupAll风格的组,其中value
函数返回该键的bin:
function choose_bin(group, key) {
return {
value: function() {
return group.all().filter(kv => kv.key === key)[0].value;
}
}
}
为了计算百分比,我们还需要总点击次数;我们可以使用dimension.groupAll()
来获取:
var allHits = slaDimension.groupAll().reduceSum(d => d.hits);
我假设您不希望这些数字被饼图过滤(因为它只会以0%或100%的方式显示)。因此我们使用相同的维度和组,因为a group does not observe its own dimension's filters。
我们将根据包装函数定义sla_2days
:
var sla_2days = choose_bin(slaGroup, '2 days')
最后,我们定义valueAccessor
的{{1}}来计算百分比:
numberDisplay
答案 1 :(得分:1)
由于戈登的评论和本网站上的一些进一步研究的指导,我设法找到了解决方案:
我在小组中添加了一些功能:
var slaGroup1 = all.reduce(
function(p, v) {
p.count += v.hits;
p.slasum += (v.sla == "2 days" ? v.hits : 0);
p.slaPercent = p.count ? p.slasum/p.count : 0;
return p;
console.log(p.failures);
},
function(p, v) {
p.count -= v.hits;
p.slasum -= (v.sla == "2 days" ? v.hits : 0);
p.slaPercent = p.count ? p.slasum/p.count : 0;
return p;
},
function() {
return {
count: 0,
slasum: 0,
slaPercent: 0
};
}
);
然后我的NumberDisplay值访问器:
slaNumberDisplay
.group(slaGroup1)
.formatNumber(d3.format(".1%"))
.valueAccessor(function (x) {return x.slaPercent;});
我确定这是一种更有活力的方法吗?如果我想为不同的标准创建多个数字显示?我可以在组外创建函数,组是否使用括号内设置的条件调用函数?我也可以从函数中删除百分比,只需在值Accessor中执行此操作。