Multi-Serien Balkendiagramm in DC-js
Ich benutze DC.js (lib über D3) und habe ein großartiges Beispiel für a Single-Serie Balkendiagramm:
Ich habe mich gefragt, ob es möglich ist, ein mehrdimensionales Balkendiagramm mit dieser Bibliothek zu erstellen. Beispiel: Gruppieren nach Geschäftsname, dann Gruppieren nach Mitarbeiter, dann zeigt die y-Achse den durchschnittlichen Verkaufswert an (der bereits von meinem Backend berechnet wurde).
Die Daten sehen wie folgt aus:
%Vor%4 Antworten
Wenn Sie eine statische Anzahl von zu zeichnenden Gruppen haben, können Sie mit einem zusammengesetzten Diagramm den gewünschten Effekt erzielen.
Im Beispiel unten habe ich die Lücke zwischen den Balkendiagrammen fest codiert - ich kann das, weil ich weiß, dass 12 Monate angezeigt werden.
%Vor%Ich übergebe diese Balkendiagramme an die Kompositionsmethode eines zusammengesetzten Diagramms:
%Vor%Schließlich füge ich ein Renderlet hinzu, um eines der Diagramme um ein paar Pixel nach rechts zu verschieben:
%Vor%Ich weiß, dass dies nicht der sauberste Ansatz ist, aber es kann im Notfall funktionieren.
Ich hoffe, das hilft.
Das nächste, wonach Sie fragen, fällt mir sofort in dc.js ein gestapeltes Balkendiagramm ( Beispiel ). Aber ich denke, was Sie bevorzugen könnten, ist ein gruppiertes Balkendiagramm . Ich bin mir nicht sicher, ob dieser Diagrammtyp derzeit von dc.js unterstützt wird. Vielleicht weiß es jemand anderes.
Ich weiß, dass ich zu spät bin, aber es könnte jemand anderem helfen.
Um ein gruppiertes Balkendiagramm in dc.js zu erstellen, ohne den ursprünglichen DC-Code zu überschreiben, können Sie das Pretransition-Ereignis nutzen und die Balken aufteilen, um eine Gruppe zu erstellen.
Ich habe ein Beispiel (jsfiddle) erstellt
Die Magie passiert hier:
%Vor%...
%Vor%Vollständiger Code:
Markup
%Vor%Js
%Vor%Es ist nicht perfekt, aber es könnte einen Anfangspunkt geben.
Ich konnte dies mit einer Drehung der Renderlet-Technik im folgenden Link tun Renderlet-Funktion zum Einfärben
Mein Code geht wie folgt
%Vor%Hinweis: Ich habe eine Dimension mit zwei Werten für die Serie verwendet.
Tags und Links javascript d3.js dc.js crossfilter