Sonntag, 16. Januar 2022

Better Access Charts: Das Seitenverhältnis

Seither hat sich das Projekt Better Access Charts keine Gedanken um das Seitenverhältnis des erstellten Charts gemacht. Das ändert sich jetzt. Wie das geht und welche Auswirkungen das hat, zeigt dieser Beitrag.

Das Seitenverhältnis gibt das Verhältnis der Breite zur Höhe des Charts an. Wenn man hier keine besonderen Einstellungen vornimmt, dann verwendet Chart.js als Standardwert den Wert "2", d.h. der Chart ist doppelt so breit wie er hoch ist.

Im Ergebnis führt dies im Zweifel dazu, dass der Chart im Webbrowser-Steuerelement nur unzureichend dargestellt wird:


Im ersten Bild ist ein Chart zusehen, bei dem ein Scrollbalken dargestellt wird. Das zweite Bild zeigt unterhalb des eigentlichen Charts noch sehr viel Whitespace. Beide Sachverhalte gilt es zu vermeiden.

Chart.js, die Bibliothek, die wir für die Erstellung der Charts verwendent, stellt für dieses Problem eine Eigenschaft mit dem Namen "AspectRatio" bereit. Diese Eigenschaft nutzen wir jetzt auch in Better Access Charts.

Mit dem passenden Wert für die "AspectRatio" wird der Chart aus dem unteren Bild wie folgt dargestellt:

Der notwendige Code hierfür kann z.B. so aussehen:

In Zeile 4 wird der Wert für die Eigenschaft "AspectRatio" festgelegt. Dazu werden die Breite und die Höhe des Webbrowser-Steuerelements herangezogen.

Mit dieser Ergänzung ist Better Access Charts wieder ein Stück besser geworden. Durch die gezielte Vorgabe des Seitenverhältnisses kann das Aussehen des Charts im Webbrowser-Steuerelement beeinflußt werden.

Die aktuelle Version von Better Access Charts steht wie immer auf GitHub bereit:
https://github.com/team-moeller/better-access-charts

Keine Kommentare: