Es gab einen unschönen optischen Fehler, wenn man in Better Access Charts Data Labels verwendet und dann mit Min- und/oder Max-Werten für die Achsen arbeitet. Wie sich dieser Fehler auswirkt und was dagegen getan wurde, beschreibt dieser Beitrag.
Better Access Charts bietet schon lange die Möglichkeit, Data Labels zu verwenden. Damit ist es möglich, die konkreten Werte zu einem Datenpunkt neben dem grafischen Abbild anzuzeigen. Dies funktioniert einwandfrei.
Fast noch länger gibt es die Möglichkeit, innerhalb von Better Access Chart Minimal- und Maximalwerte für die Achsen festzulegen. Auch dies funktioniert - für sich genommen - einwandfrei.
Interessant wirtd es jetzt, wenn man beide Sachverhalte kombiniert. Dann kommt es nämlich zu unschönen optischen Effekten. Mir persönlich ist das noch nie aufgefallen. Der entscheidende Hinweis kam während meiner Präsentation bei der Europe Access User Group.
Fangen wir langsam an und nehmen einen Chart, bei dem Data Labels verwendet werden. In diesem Fall werden die Labels unten angezeigt und sind rot formatiert. Alles erscheint so, wie wir es erwarten:
Wenn wir jetzt auf die Idee kommen mit Minimal- und Maximalwerten für die X-Achse zu arbeiten, wir das Problem sichtbar. Ich habe dazu festgelegt, dass minimal der Wert "Feb" und maximal der Wert "May" angezeigt weden soll. Das Ergebnis sieht dann so aus:
Man sieht, dass die Einschränkungen für die Achse nicht bei den Data Labels wirken. Diese werden immer noch angezeigt. Dies ist sehr schön an den roten Zahlen 6, 9 und 4 rechts neben der Grafik zu sehen. Und auch auf der linken Seite ist noch ein Überbleibsel zu finden; dort ist es die 3.
Um auszuschließen, dass es sich um ein Problem des Edgebrowser Steuerelements handelt, habe ich den zu Grunde liegenden html-String als Datei gespeichert. Diese Datei habe ich dann sowohl in Chrome als auch in Edge geöffnet. In beiden Browsern zeigte sich das obige Bild.
Nun war guter Rat teuer. Ich habe mich im ersten Schritt bei den Entwicklern des Plug-Ins für die Data Labels auf die Suche gemacht. Nachdem ich dort keinen Hinweis auf das Problem gefunden habe, habe ich mir erlaubt einen Issue in GitHub dazu anzulegen.
Hilfe kam am Ende von meinem Sohn. Er hatte bei seiner Recherche im Internet ein Video entdeckt, welches genau dieses Problem behandelt - und löst:
Bei Minute 9:31 wird der optimierte Code sichtbar. Vereinfacht gesagt werden die Data Labels, die nicht angezeigt werden sollen, transparent formatiert. Damit sind sie zwar noch da - aber nicht mehr sichtbar. 😎
Diese coole Idee, habe ich dann in Better Access Charts übernommen. Es hat eine kleine Weile gedauert, bis ich den JavaScript Code für Better Access Charts adaptiert hatte. Am Ende hat es funktioniert.
Auf der Zielgeraden ist mir dann noch der Gedanke gekommen, zu prüfen, was passiert, wenn man einen horizontalen Chart verwendet. Ergebnis: hier zeigt sich der optische Fehler ebenso. Dieses Problem war schnell gelöst.
Dank des Hinweises während meiner Präsentation ist Better Access Charts wieder ein kleines bisschen besser geworden.
Die aktuelle Version von Better Access Charts steht wie immer auf GitHub bereit:
https://github.com/team-moeller/better-access-charts
Nachtrag:
Leider habe ich mit diesem Release einen Fehler eingebaut. Bei der Erstellung von Radar-, Pie-, Doughnut- und Polar-Area-Charts wurde kein Chart erstellt, wenn die Anzeige von Datalables aktiviert war. Dieser Fehler wurde mit dem Release 4.20.01 bereinigt.
Keine Kommentare:
Kommentar veröffentlichen