Diagramme mit Highcharts
17.10.2022, 00:00 Uhr
Visualisierungswunder
Zahlen in Bilder verwandeln – mit der JavaScript-Bibliothek Highcharts kein Problem.
Die Visualisierung von Daten in Form von Diagrammen ist ein Kernelement zahlreicher Webanwendungen. Eine bunte, leicht zu erfassende Grafik ist in den meisten Fällen angenehmer als eine tabellarische Textwüste. Leider gibt es eine solche Funktionalität nicht „out of the box“. Webbrowser haben immerhin das <canvas>-Element, also eine Leinwand, auf die per JavaScript-API gezeichnet werden kann. Zudem gibt es mit SVG ein vektorbasiertes Grafikformat, das ebenfalls als Grundlage eines Diagramms dienen kann. Fehlt nur noch eines: das Zeichnen.
Bei ASP.NET WebForms gab es bereits das Chart-Control. Dieses ermöglichte es, rein deklarativ eine beschränkte Anzahl von Diagrammen zu zeichnen. Knapp zwei Jahrzehnte später gibt es auch in Razor Pages die Möglichkeit, Diagramme zu visualisieren, mit dem Chart-Helper. Bei beiden Ansätzen werden die Charts auf dem Server generiert und in ein Grafikformat gerendert. Ein alternativer Ansatz besteht darin, das komplett auf dem Client zu erledigen – der Server liefert lediglich die Daten, die angezeigt werden sollen (etwa über ein API). Mit dem Canvas-Element oder SVG haben wir im Browser alles, was wir benötigen.
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar
