Dc.js piechart legende überfüllt

Im mit dc.js zu rendern unter anderem ein Kreisdiagramm, das eine Legende hat. Wenn das Kreisdiagramm jedoch viele Daten enthält, passen alle Legendenelemente nicht und sie werden einfach ausgeblendet. Ich kann sagen, dass sie gerendert werden, wenn ich das DOM inspiziere.Dc.js piechart legende überfüllt

Screenshots von meinem Problem:

Ich habe einfach versucht, ein overflow:scroll;, um das <g class="dc-legend"> Element hinzugefügt wird, die alle Legendenelemente halten. Aber das funktioniert nicht obv seit seiner Svg.

Ich habe versucht, dafür googeln, aber nicht über eine Lösung gekommen. Ich weiß, in Highcharts gibt es eine Option, um das Etikett zu paginieren.

Wie löst man dieses Problem in dc.js?

Quelle

2016-05-26 Erik Svedin

Dies ist kein sehr guter visueller Anwendungsfall für ein Tortendiagramm, wenn so viele Gruppen angezeigt, unabhängig von der Legende Situation. Könnten Sie stattdessen einen anderen Diagrammtyp verwenden? –

Haben Sie versucht, den Container breiter zu machen? Sie können die .svg Funktion verwenden, die das obere svg Element für das Diagramm zurückgibt, dort können Sie die Breite einstellen, die Sie wünschen. Weitere Informationen here.

EDIT:

Oder Sie könnten eine feste Breite und Höhe auf die div mit Ihrem Diagramm gesetzt und die svg so groß machen, wie Sie so die Etiketten zeigen wollen. Und dann mach die Div scrollbar.

prüft diese Antwort für weitere Informationen: How to get ScrollBars in SVG?

Quelle

2016-05-26 09:16:31 torresomar

Nun, ich kann den Container größer machen, aber das würde mein Layout ziemlich durcheinander bringen, wie man an der Scheibenbreite erkennen kann. Es gibt einige verschiedene Legendenelemente, die gerendert werden können. Ich habe eher die Legende feste Breite neben meinem Kreisdiagramm und machen den Container scrollbar/paginiert –

, um Ihre bearbeitete Antwort zu beantworten: Jetzt sind wir irgendwo. Es gibt jedoch immer noch ein Problem, da dies bedeuten würde, dass das tatsächliche Tortendiagramm auch außer Sichtweite gescrollt werden würde. Nur die Legende muss scrollbar sein. –

Gut, dass sie d3 hinter den Kulissen verwenden, sollten Sie wahrscheinlich überprüfen, ob Sie etwas machen können, um die Etiketten in einem anderen Container zu rendern. Meiner Erfahrung nach ist das die Last, Bibliotheken auf andere zu verwenden, das Ergebnis kann ziemlich schnell kommen, aber das Anpassen wird ein Schmerz sein :( – torresomar

Dc.js piechart legende überfüllt

Antwort

Verwandte Themen