来自 Crossfilter 示例的复合图

从付款示例开始交叉过滤器（https://github.com/square/crossfilter/wiki/API-Reference https://github.com/square/crossfilter/wiki/API-Reference) 我们如何为每种付款类型（标签、签证、现金）创建一个包含一张折线图的综合图表？

我假设您想显示付款totals随着时间的推移（date每笔付款的维度）type.

var payments = crossfilter([...]);

var dateDimension = payments.dimension(function(d) { return new Date(d.date); });

为每种付款类型（tab、visa、现金）创建一组付款总额

var totalForType = function(type) {
  return function(d) {
    return d.type === type ? d.total : null;
  };
};

var tabTotalsGroup  = dateDimension.group().reduceSum(totalForType('tab'));
var visaTotalsGroup = dateDimension.group().reduceSum(totalForType('visa'));
var cashTotalsGroup = dateDimension.group().reduceSum(totalForType('cash'));

定义复合图表并使用组定义 3 个折线图作为复合图表的一部分。

var compositeChart = dc.compositeChart('#composite-chart');
compositeChart
  ...
  .x(d3.time.scale().domain([new Date("2011-11-14T16:15:00Z"), new Date("2011-11-14T17:45:00Z")]))
  .dimension(dateDimension)
  .compose([
    dc.lineChart(compositeChart).group(tabTotalsGroup, 'tab').colors(['#ffaa00']),
    dc.lineChart(compositeChart).group(visaTotalsGroup, 'visa').colors(['#aa00ff']),
    dc.lineChart(compositeChart).group(cashTotalsGroup, 'cash').colors(['#00aaff'])
  ]);

 dc.renderAll();

完整示例：http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview