在 DataTable dc 末尾添加求和行。js/reactJS

Question

我在工作场所接到任务来制作求和行，因为我仍在学习 dc.js/d3.js 并且一直在解决这个问题。如何在 table 末尾添加求和行？

https://codesandbox.io/s/dark-shape-g7o2b?file=/src/MyComponent.js

在工作中，他们将组作为维度发送，但不知道如何使其发挥作用

Answer 1

之前的回答描述了如何使用 dc.numberDisplay 和 <tfoot> 行添加行：

How to calculate the total sales and make the displayed totals dynamic?

但是，如果您不能修改 HTML，您也可以通过使用 fake group.

计算它来显示总行

想法是创建一个支持 .all() 和 .top() 的 object，数据 table 将使用这些方法来提取数据。当它 returns 数据时，它会添加另一个条目，总计：

return {
  all: () => {
    let all = orig_group.all();
    const total = all.reduce(
      (p, v) => {
        range(ship_size_id_start, ship_size_id_end).forEach(
          i => (p.value[i] = (p.value[i] || 0) + (v.value[i] || 0))
        );
        p.value.sum += v.value.sum;
        return p;
      },
      { key: "Total", value: { sum: 0 } }
    );
    all = all.concat([total]);
    return all;
  },
  top: function(N) {
    return this.all().slice(0, N);
  }
};

这会使用 orig_group.all() 获取原始数据，然后使用 Array.reduce 求和。 Array.reduce 函数遍历所有船舶尺寸 ID 并对列求和，并对总和求和以获得总计。

我必须声明

const ship_size_id_start = 1,
  ship_size_id_end = 8;

为了知道要循环什么。

我还必须添加翻译

Total: "Total"

让标题显示在左栏中。

Fork of your code sandbox.

加粗总计行

您仍然可以在不编辑 DataTable 组件的情况下将最后一行加粗；但是您需要一个唯一的选择器（例如 div 和 #id）才能安全地执行此操作。

所以下面的CSS有效

table.data-table.dc-chart tbody tr:last-child {
  font-weight: bold;
}

但是它会对页面上的所有 dc 数据 table 设置样式，所以要小心。我将它添加到我的 fork 中的样式中。

在 DataTable dc 末尾添加求和行。js/reactJS

Add sum row at end DataTable dc.js/reactJS

dc.js

加粗总计行