我正在尝试计算图表中每个堆叠条形的总和/总值并将其显示在每个条形上方
https://jsfiddle.net/n0zjpyow/1/
期望的输出:
(注意:图像中的总数不准确)
我正在使用嵌套和汇总函数,但结果是每个系列的总和,而不是每个堆叠条形的总和。
var keys = d3.nest()
.key(function(d) { return (d.key) })
.rollup(function (v) {
return d3.keys(v[0]).filter(function(p, i){return i}) //filter out the heading
.reduce(function(s, p){ //sum each of the other members
//p is the category being summed
return (s[p] = d3.sum(d3.values(v[0][p][0])), s);
}, {});
})
.map(data);
输出
{1: {values: 190000000}
2A: {values: 152000000}
2B: {values: 190000000}
Non: {values: 128000000}}
我对如何将其应用于图表的数据结构(无法修改)感到困惑
如何计算每个条形中的值的总和?感谢您的帮助。
最佳答案
根据您的数据,计算每个条形的总值(value)的简单方法可能如下:
var total = [0, 0, 0, 0, 0, 0];
data.forEach(e => {
e.values.forEach( (f, i) => {
total[i] = total[i] + f[1];
});
});
您要遍历每个对象的位置(1
、2A
、2B
、Non
),然后,到每个日期(Jan '19 S
、Jan '19 U
、...、Mar '19 U
)。结果累加在数组total
中:
[ 660000000, 1015000000, 598000000, 484000000, 528000000, 396000000 ]
关于显示每个条形的总计,您可以在此代码段中找到潜在的解决方案:
https://jsfiddle.net/s5npfdo0/
输出如下:
需要考虑的一些要点:
据我所知,NVD3 不允许显示多条形图中每个条形的总值(例如,参见 this issue )。解决方案是自己实现该部分。在我的代码片段中,实现非常简单,但它缺少一些功能,例如,如果调整窗口大小,则不会重新计算总值位置。如果这对您的用例来说是一个问题,我可以尝试解决它。
函数
addTotalValue()
需要在图形完全绘制之后调用,因为它是通过setTimeout(addTotalValue, 500 );
NVD3 根据数据自动计算的 yDomain 没有为总值标签提供空间,因此应将 yDomain 强制为另一个值:
.yDomain([0, 1100e6])
。这里是手动计算出的 1100e6,仅适用于该数据,但根据数据自动计算应该不难。
关于javascript - D3 堆积条形图 : issue calculating and displaying sum/total of each bar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60827789/