Diagramm Js Ändern der Etikettenausrichtung auf der x-Achse für Liniendiagramme

Question

Diagramm Js Ändern der Etikettenausrichtung auf der x-Achse für Liniendiagramme

8

Ich verwende chart.js .

Ähnlich wie diese Frage würde ich Ich möchte meine X-Achsen-Etiketten um 90 Grad drehen. Zurzeit sind meine Beschriftungen mit Standardeinstellungen um 80 Grad gedreht.

Könnte mir jemand helfen, die Balkendiagramm-Lösung für rotierende Etiketten anzupassen, damit ich sie in Liniendiagrammen verwenden kann?

javascript charts chart.js

Delcon 26.01.2016, 20:02

quelle

3 Antworten

30

Wenn Sie chart.js 2.x verwenden, setzen Sie einfach maxRotation: 90 und minRotation: 90 in den Optionen. Für mich geht das! Und wenn Sie alle x-labels möchten, sollten Sie autoSkip: false einstellen. Das Folgende ist ein Beispiel.

%Vor%

tabetomo 26.09.2016 15:39

quelle

2

Hier ist eine etwas hackigere Version (Quinces Antwort ist besser - das Folgende könnte brechen, wenn eine zukünftige Implementierung von Chart.js calculateXLabelRotation anders macht)

Die Etikettendrehung wird berechnet, indem die Etiketten progressiv rotiert werden, so dass sie zwischen die vertikalen Gitterlinien passen - der Abstand zwischen ihnen wird mit scale.calculateX(1) - scale.calculateX(0) berechnet. Wir springen am richtigen Punkt ein, um das Ergebnis dieser Berechnung auf 0 zu setzen (indem wir scale.calculateX den gleichen Wert zurückgeben) - dies wiederum zwingt die Drehung zum Erreichen ihres Maximums (d. H. 90 Grad)

Vorschau

Skript

%Vor%

und dann

%Vor%

Geige - Ссылка

potatopeelings 27.01.2016 14:07

quelle

Tags und Links javascript charts chart.js

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Docker-compose, um trotzdem eine redis.conf-Datei anzugeben?

score 3 · Accepted Answer

Mit derselben Methode wie in der vorherigen Antwort muss nur die Erweiterung des Diagrammtyps geändert werden. Dieses Mal wird das Liniendiagramm erweitert, und die Einrichtung ist ein wenig anders, da der Liniendiagramm-Maßstab im Build-Maßstab erstellt wird, sodass diesmal buildScale überschrieben wird, sodass der benutzerdefinierte Maßstab verwendet wird und die neue Option overrideRotation kann übergeben werden. initialize wird ebenfalls überschrieben, aber nur so, dass die Superinitialisierung aufgerufen werden kann und der Ball beim Erstellen des Graphen ins Rollen kommt.

%Vor% %Vor%