Crossfilter示例中的合成图 [英] Composite Graph from Crossfilter Example

问题描述

从付款示例交叉过滤器开始（ https://github.com/square/crossfilter / wiki / API参考）如何为每种付款方式（标签，签证，现金）创建一个折线图的复合图？

Starting from the payments example crossfilter (https://github.com/square/crossfilter/wiki/API-Reference) how may we create a Composite Chart with one Line Chart for each payment type (tab, visa, cash)?

推荐答案

我假设您要显示一段时间内的付款总计（日期维度）的每个付款类型。

I am assuming you want to display payment totals over time (the date dimension) for each payment type.

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

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

为每种付款方式（标签，签证，现金）创建一组付款总计

Create a group of payment totals for each payment type (tab, visa, cash)

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条折线图作为组合图的一部分。 / p>

Define a composite chart and use the groups to define 3 line charts as part of the composite chart.

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

这篇关于Crossfilter示例中的合成图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！