A partire dall'esempio del crossfilter pagamenti (https://github.com/square/crossfilter/wiki/API-Reference) come possiamo creare un grafico composito con un grafico a linee per ogni tipo di pagamento (tab, visto, contanti)?Grafico composito da Crossfilter Esempio
risposta
Suppongo che si desideri visualizzare il pagamento totals
nel tempo (la dimensione date
) per ogni pagamento type
.
var payments = crossfilter([...]);
var dateDimension = payments.dimension(function(d) { return new Date(d.date); });
Creare un gruppo dei totali di pagamento per ciascun tipo di pagamento (scheda, visa, contanti)
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'));
definire una carta composita e utilizzare i gruppi per definire 3 grafici lineari come parte della carta composita .
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();
esempio completa: http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview
Eccellente, grazie. L'ho modificato in un grafico a barre che ha un po 'più senso in questo contesto. Con questo come punto di partenza sono stato in grado di adattarlo a ciò che stavo effettivamente cercando di realizzare. –
+1. Sono in perdita su come crearlo usando il grafico composito. Penso che questo possa essere fatto usando la tabella delle serie. Comunque aspetterò il parere dell'esperto –
Al momento sto cercando un esempio di carrello composito perché quello che voglio veramente è di tracciare due serie e usare .useRightYAxis (true) in modo da poter confrontare due set di dati con diversi Y valori degli assi. –