复杂计数/聚合 dc.js

Question

我正在开发一个仪表板，以帮助公司从多个维度分析其成本。

我有它大部分工作在：https://jsfiddle.net/gkke38wk/4/

有些事情我似乎无法正常工作。

显示承包商的唯一采购订单数量：

正如您在小提琴中看到的那样，我已经能够在数据表上准确地显示这一点，但由于某种原因，我在 rowChart 上尝试的任何内容都不会显示任何内容，除了 PO 的总行数，而不是唯一 PO（这是扁平数据, 并且每个行项是数据表中的一行，所以一个 PO 可能有很多行。FOR Examples，Bill 只提交了一个 PO，但它有两行。图表显示 (2) 为比尔）。

  contractorChart
        .dimension(contractors)
        .group(contractorGroup)

  contractorChart
        .dimension(uniqueDim)
        .group(contractorGroup)

显示采购订单总额

在主要工作的数据表上，我希望总列显示该 PO 所有行的汇总总数，而不仅仅是第一个匹配项。在我的uniqueDim 函数中，它只能通过聚合唯一的 PO 编号而不是整个 PO 对象来工作。我不确定如何汇总总数。

Answer 1

在 rowCharts 中，显示的键和值仅由组确定。维度仅用于过滤，因此切换维度不会导致显示值发生任何变化。您需要让您的组跟踪唯一 PO 而不是维度。这有点难以正确有效地完成，但我建议使用Reductio exception aggregation，在这种情况下，只需在图表上定义一个 Reductio reducer 和一个值访问器即可：

  reductio()
    .exception(function(d) { return d.po; })
    .exceptionCount(true)(contractorGroup)      

  contractorChart
        .width(800)
        .height(200)
        .margins({ top: 20, left: 10, right: 10, bottom: 20 })
        .dimension(contractors)
        .group(contractorGroup)
        .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
        .valueAccessor(function(d) { return d.value.exceptionCount; })
        .label(function (d) {
            return d.key;
        })
        .title(function (d) {
            return d.value;
        })
        .elasticX(true)
        .xAxis().ticks(4);

就数据表而言，按照 dc.js 常见问题解答中的建议创建“假维度”是正确的想法，但您实际上想要一个具有聚合值的假维度。所以改为基于一个组：

var uniqueDim = {
    bottom: function (num) {
      var pos = poDimension.top(Infinity);
      // Uses top because the version of Crossfilter being used
      // doesn't support group.bottom.
      return poGroup.top(num)
        .filter(function(d) { return d.value > 0; })
        .map(function(d) {
            var currPo = pos.filter(function(g) { return g.po === d.key; })[0];
          return {
            po: d.key,
            total: d.value,
            contractor: currPo.contractor,
            complexity: currPo.complexity
          };
      });
    }
  };

两者的工作示例：https://jsfiddle.net/33228p1d/2/

Answer 2

试试下面的代码：

contractorChart
    .width(800)
    .height(200)
    .margins({ top: 20, left: 10, right: 10, bottom: 20 })
    .dimension(contractors)
    .group(contractorGroup)
    .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
    .label(function (d) {
        return d.key;
    })
    .title(function (d) {
        return d.value;
    })
    .elasticX(true)
    .xAxis().ticks(4);

少量添加，例如：

contractorChart
    .width(800)
    .height(200)
    .margins({ top: 20, left: 10, right: 10, bottom: 20 })
    .dimension(contractors)
    .group(contractorGroup)
    .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
    .label(function (d) {
        return d.key;
    })
    .title(function (d) {
        return d.value.exceptionCount;
    })
    .elasticX(true)
    .xAxis().ticks(4);