Çaprazfiltreden Bileşik Grafik Örneği

Question

Ödeme örneğinden başlayarak çapraz filtre (https://github.com/square/crossfilter/wiki/API-Reference) Her ödeme türü için bir Çizgi Çizelgesi olan bir Kompozit Grafiği nasıl oluşturabiliriz (sekme, vize, nakit)?

Answer 1

type numaralı her ödemede totals numaralı ödemeyi (date boyutu) görüntülemek istediğinizi varsayıyorum.

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

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

her ödeme türü için ödeme toplamları (sekme, vize, nakit)

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

kompozit grafiği tanımlayın ve kompozit grafik kapsamında 3 çizgi grafikleri tanımlamak için grupları kullanabilirsiniz grubu oluşturun .

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

için tam bir örnek: http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview