交叉過濾器的複合圖例

從付款示例交叉過濾器（https://github.com/square/crossfilter/wiki/API-Reference）開始，我們如何爲每種付款類型（選項卡，簽證，現金）創建包含一個折線圖的複合圖表？交叉過濾器的複合圖例

2015-09-04 Vance Shipley

+1。我對如何使用組合圖創建它感到困惑。我認爲這可以使用系列圖來完成。然而，我會等待專家的建議 –

目前我正在尋找一個複合車的例子，因爲我真正想要的是繪製兩個系列並使用.useRightYAxis（true），以便我可以比較兩個數據集與不同的Y軸值。 –

我假設您想要爲每筆付款type隨時間推移顯示付款totals（尺寸爲date）。

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();

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

來源

2015-09-14 23:27:49 Ma3x

非常好，謝謝。我將其改爲條形圖，在這種情況下更有意義。以此爲出發點，我能夠將其適應於我實際想要實現的目標。 –

交叉過濾器的複合圖例

回答

相關問題