Ich möchte alle Punkte in meinem Diagramm aus den Daten anzeigen, die ich erhalte, aber ich möchte nicht alle Beschriftungen für sie anzeigen, da das Diagramm dann nicht sehr gut lesbar ist. Ich habe in den Dokumenten danach gesucht, konnte aber keinen Parameter finden, der dies einschränken würde.
Ich möchte zum Beispiel nicht nur drei Beschriftungen nehmen, da das Diagramm dann auch auf drei Punkte beschränkt ist. Ist es möglich?
Ich habe gerade so etwas:
Wenn ich nur jedes dritte bis vierte Label verlassen könnte, wäre es großartig. Aber ich fand absolut nichts über Etikettenoptionen.
Antworten:
Versuchen Sie, die
options.scales.xAxes.ticks.maxTicksLimit
Option hinzuzufügen :quelle
maxRotation: 0
wenn Sie möchten, dass es sich nicht dreht, bevor Sie mit dem Löschen der Etiketten beginnen.Nehmen wir zur Vereinfachung an, Ihre ursprüngliche Liste der Etiketten sieht folgendermaßen aus:
["0", "1", "2", "3", "4", "5", "6", "7", "8"]
Wenn Sie nur jedes 4. Etikett anzeigen möchten, filtern Sie Ihre Liste der Etiketten so, dass jedes 4. Etikett ausgefüllt wird und alle anderen die leere Zeichenfolge sind (z
["0", "", "", "", "4", "", "", "", "8"]
. B. ).quelle
""
auch die entsprechenden QuickInfos in der Grafik entfernt werden!my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]
. Die Nummer 10 kann natürlich am Anfang der Datei als Konstante deklariert werden, um die Parametrisierung des Prozesses zu vereinfachen.""
, wie in der Antwort auf diese Frage vertikales Gürtellinienproblem mit chart.js, bei dem das OP ein Problem mit schwarzer Linie hatte, erscheint beim ersten Auftreten dieses doppelten Anführungszeichens, in diesem Fall half es wieder als @ Haywire erwähnte, dass es das Etikett aus dem Tooltip entferntFür alle, die dies in Chart JS V2 erreichen möchten, funktioniert Folgendes:
Übergeben Sie dann die Optionsvariable wie gewohnt an:
quelle
AKTUALISIEREN:
Ich habe meine Gabel mit dem neuesten Zug (Stand: 27. Januar 2014) aus NNicks Chart.js-Hauptniederlassung aktualisiert. https://github.com/hay-wire/Chart.js/tree/showXLabels
URSPRÜNGLICHE ANTWORT:
Für diejenigen, die immer noch mit diesem Problem konfrontiert sind, habe ich Chart.js vor einiger Zeit gegabelt, um das gleiche Problem zu lösen. Sie können es unter folgender Adresse überprüfen: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Ältere Niederlassung! Überprüfen Sie den showXLabels-Zweig auf den neuesten Pull.
Wie benutzt man:
Anwendbar auf Balkendiagramm und Liniendiagramm.
Der Benutzer kann jetzt a übergeben
{ showXLabels: 10 }
, um nur 10 Beschriftungen anzuzeigen (die Anzahl der tatsächlich angezeigten Beschriftungen kann je nach Anzahl der insgesamt auf der x-Achse vorhandenen Beschriftungen etwas unterschiedlich sein, bleibt jedoch weiterhin nahe bei 10).Hilft sehr, wenn sehr viele Daten vorhanden sind. Früher sah das Diagramm aufgrund der übereinander gezeichneten Beschriftungen der x-Achse in dem engen Raum am Boden zerstört aus. Mit
showXLabels
hat der Benutzer nun die Möglichkeit, die Anzahl der Etiketten auf die Anzahl der Etiketten zu reduzieren, die gut in den ihm zur Verfügung stehenden Platz passen.Siehe die beigefügten Bilder für einen Vergleich.
Ohne
showXLabels
Option:Mit
{ showXLabels: 10 }
übergeben in Option:Hier einige Diskussionen dazu: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304
quelle
für Achsendrehung
benutze das:
quelle
Laut der Github-Ausgabe Nr. 12 von chart.js . Aktuelle Lösungen umfassen:
Nach ein paar Minuten denke ich jedoch, dass es eine bessere Lösung gibt.
Das folgende Snippet blendet Beschriftungen automatisch aus . Durch Ändern
xLabels
mit leerer Zeichenfolge vor dem Aufrufendraw()
und Wiederherstellen danach. Darüber hinaus können neu rotierende x-Beschriftungen angewendet werden, da nach dem Ausblenden mehr Platz vorhanden ist.Bitte beachten Sie, dass dies
clone
eine externe Abhängigkeit ist.quelle
Ich hatte eine ähnliche Art von Problem und erhielt eine nette Lösung für mein spezielles Problem- Show-Label im Tooltip, aber nicht in der x-Achse für das Liniendiagramm von chartjs . Sehen Sie, ob dies Ihnen hilft
quelle
Diese Antwort wirkt wie ein Zauber.
Wenn Sie sich über die
clone
Funktion wundern , versuchen Sie diese:quelle
In der Datei Chart.js sollten Sie finden (in Zeile 884 für mich)
Wenn Sie nur diesen einzeiligen Anruf
fillText
mit einschließenif ( i % config.xFreq === 0){ ... }
und dann eine Zeilechart.Line.defaults
hinzufügen,xFreq : 1
sollten Sie in der Lage sein, siexFreq
in Ihrem zu verwendenoptions
Anruf zu verwenden, wenn Sie anrufennew Chart(ctx).Line(data, options)
.Wohlgemerkt, das ist ziemlich hackig.
quelle