Question

我正在尝试计算图表中每个堆叠条形的总和/总计值，并将其显示在每个条形上方

所需的输出：

（注意：总计图片不准确）

我正在使用嵌套和汇总功能，但这是每个系列的总和，而不是每个堆叠的条形。

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}}

我对如何将其应用于图表的数据结构（无法修改）感到困惑

如何计算每个栏中的值的总和？感谢您的协助。

Answer 1

根据您的数据，一种计算每个条形的总价值的简单方法如下：

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，{ {1}}，...，Jan '19 U）。结果累积在数组Mar '19 U中：

total

关于显示每个条的总数，您可以在此代码段中找到潜在的解决方案：

https://jsfiddle.net/s5npfdo0/

具有以下输出：

要考虑的一些要点：

AFAIK，NVD3不允许在多条图中显示每个条的总值（例如，请参见this issue）。解决方案是自己实施该部分。在我的代码段中，实现非常简单，但是缺少一些功能，例如，如果您调整窗口的大小，则不会重新计算总值位置。如果您的用例存在问题，我可以尝试解决。
在图形完全绘制之后，需要调用函数[ 660000000, 1015000000, 598000000, 484000000, 528000000, 396000000 ] ，因为它是用addTotalValue()
由NVD3自动从数据中计算出的yDomain不会为总值标签留出空间，因此应将yDomain强制为另一个值：setTimeout(addTotalValue, 500);。这是手动计算的1100e6，仅适用于此数据，但从数据自动计算应该不难。

D3堆积条形图：计算和显示每个条形的和/总数的问题

1 个答案: