在DataTable dc.jsreactJS的末尾添加总和行。

Question

我在工作中接到一个任务，让我做和行，由于我还在学习dc.jsd3.js，所以在解决这个问题的过程中很卡。如何在表尾添加和行？

https:/codesandbox.iosdark-shape-g7o2b?file=srcMyComponent.js。

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

Answer 1

前面的一个回答介绍了如何在表尾添加一行，使用 dc.numberDisplay 和a <tfoot> 行。

如何计算销售总额，并使显示的总额动态化？

但是，如果你不能修改HTML，也可以通过计算来显示总行，用一个 伪团体.

我们的想法是创建一个对象，支持 .all() 和 .top(), 数据表将用来提取数据的方法。当它返回数据时，它将用总数添加另一个条目。

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"

以使标题显示在左栏中。

您的代码沙箱的分叉.

总计行加粗

你仍然可以在不编辑DataTable组件的情况下将最后一行加粗，但是你将需要一个独特的选择器（像一个带有 #id)才能安全地完成这一任务。

因此，下面的CSS工作

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

但它会对页面上的所有dc数据表格进行样式设计，所以要小心。我把它添加到了我的fork中的样式中。