Chart.js – Datenvisualisierung in einer .NET Core 3.1 Webanwendung (Teil 1)

von Veröffentlicht am: 09.11.2021Kategorien: How to, Serien6.1 min Lesezeit

Teile den Artikel

«Ein Bild sagt mehr als tausend Worte!» Die grafische Aufbereitung der Daten bietet oft die einzige Möglichkeit, komplexe Sachverhalte aus den Daten zu extrahieren und für den Anwender verständlich darzustellen. Die Visualisierung der Daten erhöht die Akzeptanz der Anwendung für den Benutzer und bestimmt die User-Experience ungemein. Aus diesem Grund möchte ich in diesem Blogeintrag auf die Verwendung von „Chart.js“ eingehen. Mit Hilfe dieser JavaScript-Bibliothek ist es möglich, mit wenig Aufwand verschiedene Diagramme in HTML einzubetten.

Was ist Chart.js?

Was ist Chart.js?

Chart.js ist ein Open-Source-Projekt mit einer MIT Lizenz, die es erlaubt HTML5 Schaubilder zu erstellen. Aufgrund der ausführlichen Dokumentation auf der Homepage, des leichten Einstiegs sowie der großen Community lassen sich mit überschaubarem Aufwand ansehnliche Grafiken in der Webanwendung darstellen. Chart.js kann Diagramme jeglicher Art erzeugen: Linien-, Balken-, Kuchen-, Polar-Area-, Netz- und Doughnut-Diagramm. Der Teufel steckt selbstverständlich im Detail. Prinzipiell bietet das Produkt jedoch genug Spielraum, einem Großteil der heute aufkommenden Anforderungen gerecht zu werden, das notwendige Knowhow sowie die Ideen vorausgesetzt.

Installation und Setup

Es gibt verschiedene Möglichkeiten, Chart.js in das Projekt zu integrieren. Der einfachste Weg führt über den Node Package Manager:

npm install chart.js –save

Das Package lässt sich wie andere externe Bibliotheken über CDN im Header der View einbinden:

Copy to Clipboard

Beim Einsatz des Bibliotheks-Managers „LibMan“ in der Projektmappe erfolgt das Herunterladen der JS-Library über Rechtsklick auf das Projekt in der Projektmappe -> Add -> Client Site Library. Anschließend muss die Bibliothek in der entsprechenden View eingebunden werden.

Copy to Clipboard

Diagramme

Für eine Initialisierung des Doughnut-Diagramms ist zunächst eine Aufbereitung der Daten notwendig. In unserem Beispiel werden einige Kategorien der Blogeinträge im Chart dargestellt. Dazu wird das Datenobjekt als JSON bereitgestellt sowie die wichtigsten Eigenschaften, wie Labels, Farbe und Anzahl der Beiträge in Arrays verpackt.

Copy to Clipboard

Die Labels entsprechen den einzelnen Segmenten im Bild. Die Farben können im RGB-Format oder als Hexadecimal definiert werden. Wichtiger Hinweis: Immer darauf achten, dass die Anzahl der Farben, Labels und Elemente im Set übereinstimmen, um kein „seltsames“ Verhalten hervorzurufen.

Diagramme erstellen

Mit den aufbereiteten Daten lässt sich nun das Chart kinderleicht in die eigene Webanwendung integrieren. Chart.js verwendet das Canvas-Element. Die Canvas-Tags werden wie gewohnt zwischen div-Tags oder td eingebettet und mit einer eindeutigen ID versehen.

Copy to Clipboard

Im ersten Schritt suchen wir unser Canvas-Element im DOM und holen mit „getContext()“ den aktuell Context, in dem wir agieren. Anschließend initialisiert man mit der Methode „new Chart()“ und den aufbereiteten Daten den Context.

Abschluss

Dieses Tutorial führte dich durch die grundlegenden Schritte zum Erstellen eines Schaubildes mit Chart.js. Dies soll eine Basis bilden, um komplexe Sachverhalte visuell nach eigenen Wünschen abzubilden. Im zweiten Teil der Blogreihe stelle ich anhand eines konkreten Kundenfalls, die überarbeitete Darstellung der Gefährdungsbeurteilung unseres Kunden der BGHM vor. Die besondere Schwierigkeit bestand hier in der Abbildung eines Doughnut-Charts mit zwei Datasets. Innerhalb der Grafik werden die verschiedenen Aufgaben in Untersegmenten abgebildet und durch weitere Fortschrittssegmente angereichert.

Nach seiner Studententätigkeit bei Objektkultur übernahm Andreas die Rolle als Entwickler und Berater. In Kundenprojekten ist Andreas als Full-Stack-Entwickler im Einsatz und verbindet das Back- mit dem Frontend im .NET-Umfeld. Neben der Tätigkeit als Berater übernimmt Andreas die Betreuung der Studierenden für die optimale Ausbildung und Wohlfühlatmosphäre bei OK.

Teile den Artikel

Nach seiner Studententätigkeit bei Objektkultur übernahm Andreas die Rolle als Entwickler und Berater. In Kundenprojekten ist Andreas als Full-Stack-Entwickler im Einsatz und verbindet das Back- mit dem Frontend im .NET-Umfeld. Neben der Tätigkeit als Berater übernimmt Andreas die Betreuung der Studierenden für die optimale Ausbildung und Wohlfühlatmosphäre bei OK.