来自 Crossfilter 示例的复合图
Composite Graph from Crossfilter Example
从付款示例交叉过滤器 (https://github.com/square/crossfilter/wiki/API-Reference) 开始,我们如何为每种付款类型(tab、visa、现金)创建一个包含一个折线图的复合图表?
我假设您想为每笔付款 type
.
随着时间(date
维度)显示付款 totals
var payments = crossfilter([...]);
var dateDimension = payments.dimension(function(d) { return new Date(d.date); });
为每种付款类型(选项卡、签证、现金)创建一组付款总额
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();
从付款示例交叉过滤器 (https://github.com/square/crossfilter/wiki/API-Reference) 开始,我们如何为每种付款类型(tab、visa、现金)创建一个包含一个折线图的复合图表?
我假设您想为每笔付款 type
.
date
维度)显示付款 totals
var payments = crossfilter([...]);
var dateDimension = payments.dimension(function(d) { return new Date(d.date); });
为每种付款类型(选项卡、签证、现金)创建一组付款总额
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();