Mittwoch, 16. Februar 2022

Better Access Charts: Chart in Berichten verbessert

Gerade erst habe ich eine Version herausgebracht und stolz berichtet, dass Better Access Charts jetzt auch in Berichten verfügbar ist - und schon gibt es ein neues Release mit Verbesserungen. Um was es dabei genau geht, zeigt dieser Beitrag.

Im letzten Blogpost habe ich über die Möglichkeit, Better Access Charts in Berichten einzusetzen, berichtet. Der konzeptionelle Ansatz sieht vor, dass der Chart unsichtbar erzeugt wird, dann als Grafik gespeichert wird und diese am Ende in einem Bildsteuerelement zur Anzeige gebracht wird.

Soweit funktioniert das auch alles. Nur bei der Darstellung der Charts wurde schnell ein Problem sichtbar. Die Größe bzw. Dimensionen des Charts passten nicht richtig zur Größe des Bildsteuerelements. Ein Beispiel macht am besten deutlich, wie ich das meine:

Der Chart wird vollständig und richtig dargestellt. Nur ist am Ende alles viel zu klein. Die Überschrift, die Legende und die Achsenbeschriftungen sind nur schwer lesbar.

Wenn wir den gleichen Chart in einem Webbrowser ActiveX-Steuerelement von ungefähr gleicher Größe darstellen lassen, sind alle Beschriftungen klar lesbar.:

Wie kommt es nun zu diesem unterschiedlichen Verhalten? Die Ursache ist im Internet-Explorer zu suchen. Dieser wird im Hintergrund geöffnet. Dort wird der Chart angezeigt und am Ende als Grafik gespeichert. Die Größe des IE-Fensters bestimmt dann den Platz, der für den Chart zur Verfügung steht. Diesen nutzt Chart.js optimal aus und erstellt den Chart in passender Größe.

Wenn ich jetzt diesen Chart als Grafik speichere, dann wird diese im Bildsteuerelement entsprechend gezoomed. Dadurch wird die Darstellung insgesamt für alle Objekte des Charts verkleinert.

Mit diesem Wissen ist die Lösung dann nicht mehr weit. Wir passen einfach den Chart so an, dass er im Internet-Explorer immer in der Größe des Bildsteuerelements angezeigt wird. Das Ganze ist damit dann unabhängig von der Größe des Fensters des IE.

Kaum das dieses Problem gelöst war, wurde ein weiteres Problem sichtbar: Die Balken im Chart werden nicht richtig gezeichnet. Diese waren zu kurz:

Hier habe ich ein wenig nachdenken und experimentieren dürfen. Am Ende wurde mir klar, dass dieser Effekt mit der Animation der Charts zusammenhängt. Der Aufbau des Charts erfolgt mit einer Animation. Dies ist macht den Chart auf dem Bildschirm interessant. Im Moment der Speicherung des Charts als Bild ist aber nun diese Animation noch nicht abgeschlossen. Das Ergebnis ist im obigen Bild gut zu sehen.

Die Lösung hierfür liegt auf der Hand. Für die Charts, die im Bildsteuerelement angezeigt werden sollen, wird die Animation ausgeschaltet. Damit sieht das Ergebnis am Ende so aus:

Jetzt stimmt alles. Die Textelemente sind gut lesbar und die Balken des Charts werden vollständig angezeigt. Der Vergleich mit dem Webbrowser ActiveX Steuerelement zeigt, dass beide Charts nun gleich aussehen.

Jetzt freue ich mich über Rückmeldungen zu Better Access Charts in Berichten. Ich bin gespannt.

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

Keine Kommentare: