Diagramme in AngularJS
Willkommen in der Welt der Statistik – Wo der Storch die Kinder bringt
In allen Bereichen der modernen Gesellschaft sind sie anzutreffen, Statistiken, aber was ist eine Statistik eigentlich? Laut Wikipedia kann man eine Statistik wie folgt beschreiben: „Statistik ist die Lehre von Methoden zum Umgang mit quantitativen Informationen“. Im Kern also die Verdeutlichung von Sachverhalten basierend auf umfangreichen Datensätzen. Bei so einer Statistik lassen sich einfach, wichtige Informationen ablesen um beispielsweise Prognosen für die Zukunft zu treffen oder die Entscheidungsfindung zu unterstützen.
Hierbei sind dem Statistik-Ersteller kaum Grenzen gesetzt, denn in der Welt der Statistik bringt auch der Storch gerne mal die Kinder, um kurz den Bogen zur Überschrift des Absatzes zu spannen.
Da jedoch die Qualität einer Statistik stark von der Qualität der erhobenen Datensätze abhängt und schwierig verallgemeinert werden kann, soll es im folgenden Artikel nicht um die Erhebung von statistischen Daten gehen, sondern viel mehr um die grafische Aufarbeitung von diesen Datensätzen durch zu Hilfenahme von AngularJS.
Angular lernt neue Freunde kennen – Diagramm-Bibliotheken für jedermann
Ohne Hilfe geht es nicht. Bibliotheken zur Erstellung von Diagrammen / Graphen gibt es wie Sand am Meer. Um eine kleine Orientierung zu bieten, werden hier nun kurz die bekanntesten Bibliotheken vorgestellt. Zu jeder Bibliothek gibt es eine Angular-Direktive, welche die Funktionalität kapselt und das Arbeiten mit den Bibliotheken vereinfacht. Diese sollten deshalb nach Möglichkeit verwendet werden.
Choose wisely
Angular nvD3 „Bring data to life with SVG, Canvas and HTML. “
https://github.com/krispo/angular-nvd3
nvD3 ist eine der umfangreichsten Bibliotheken und bietet viele Einstellungsmöglichkeiten. Aus großer Vielfallt folgt aber auch großer Speicherbedarf (~1Mb). Aufgrund der 22 verschiedenen Diagrammtypen ist die nvD3-Bibliothek kein Leichtgewicht und auch der Einstieg ist nicht der Einfachste. Hat man sich jedoch mit der Bibliothek angefreundet, steht einem ein äußerst mächtiges Tool zur Erstellung von Diagrammen zur Seite.
Angular-Chart.js „Reactive, responsive, beautiful charts for AngularJS”
http://jtblin.github.io/angular-chart.js/
Chart.js, auf der Angular-Chartjs basiert, ist eine besonders leichtgewichtige Bibliothek ohne weitere Abhängigkeiten. Gerade die API und das Design überzeugen. Der Einstieg geht besonders leicht von der Hand und man kommt schnell zu guten Resultaten. Bei umfangreicheren Projekten kommt man jedoch schnell an die Grenzen dieser Bibliothek, da nur 9 verschiedene Diagrammtypen unterstützt werden. Man sollte sich daher im Vorfeld überlegen, ob der Umfang dieser Bibliothek ausreichend ist.
Highcharts.js „Make your data come alive “
https://github.com/pablojim/highcharts-ng
Highcharts.js ist ein Kompromiss aus Umfang und Leichtgewicht. Es unterstützt viele verschiedene Diagrammtypen und ist etwas anpassbarer als Chart.js. Des Weiteren bietet es die Möglichkeit direkt generierte Diagramme zu exportieren. Gerade dieses Feature ist für Projekte sinnvoll, die zwingend einen Export der Diagramme benötigen. Unterstützt werden JPG, PNG, PDF und SVG. Für kommerzielle Projekte muss für die Verwendung jedoch bei Highcharts.js eine Lizenz erstanden werden.
Lets code
Um in die Welt der Diagramme abtauchen zu können, braucht es zu allererst einmal ein Projekt. Dieses wird in diesem Beispiel mit Yeoman generiert – Weitere Details zu Yeoman enthält unser Artikel „Von 0 auf 100 mit Yeoman“.
yo hottowel [App-Name]
im nächsten Schritt sollten nun die benötigten Abhängigkeiten installiert werden, in diesem Beispiel wurde hierfür auf bower zurückgegriffen (bower.json). Anschließend können die Abhängigkeiten im dazugehörigen Angular-Modul einfach verwendet werden (highchart.module.js).
Hierbei ist zu beachten dass die erstellten Module anschließend in der Applikationsdefinition hinzugefügt werden müssen. (app.module.js). Diese Projektstruktur ermöglicht eine bessere Wartbarkeit und führt zu deutlich übersichtlicheren Source-Code.
Auszug bower.json
Auszug highchart.module.js
Direktiven im Code Vergleich
Anschließend kann im jeweiligen Controller der Anwendung das Diagramm definiert werden, um es dann in der View darzustellen. Auf den folgenden Seiten wird jeweils ein identisches Diagramm, welches das Durchschnittsalter der Menschen in Deutschland von 1950 -2016 zeigt, grafisch dargestellt. (Basierend auf Daten des Statistischen Bundesamtes https://www.destatis.de/bevoelkerungspyramide/)
nvD3
Script:
Html:
Ergebnis:
AngularChart.JS
Script:
Html:
Ergebnis:
Highcharts.js
Script:
Html:
Ergebnis:
Fazit
Welche Bibliothek eignet sich für welchen Anwendungsfall am besten?
Design: Wer auf der Suche nach möglichst schicken und einfachen Diagrammen ist sollte sich für Angular-Chart.js entscheiden. Das Design der generierten Diagramme überzeugt, die Anpassbarkeit und Vielfalt sind dabei jedoch etwas eingeschränkt.
Anpassbarkeit: Wer viele Wissenschaftliche Statistiken erstellen möchte und eine Vielzahl an Diagrammtypen benötigt, sollte sich für nvD3 entscheiden. Da diese Bibliothek auf der bekannten D3-Bibliothek basiert, gibt es hier jede Menge Einstellungsmöglichkeiten und Diagrammtypen zu entdecken. Dadurch ist diese natürlich etwas komplexer und schwerfälliger als die anderen.
Allrounder: Der Allrounder unter den Diagramm-Bibliotheken ist Highcharts.js. Es überzeugt durch eine Vielzahl von Diagrammtypen und einer einfachen Handhabung. Des Weiteren gibt es standardmäßig einen Export der Diagramme. Lediglich die Lizenzkosten für kommerzielle Projekte sind als negativer Punkt anzumerken.
Quellen
https://de.wikipedia.org/wiki/Diagramm
http://www.bfs.admin.ch/bfs/portal/de/index/news/publikationen.Document.48507.pdf
https://github.com/johnpapa/generator-hottowel#readme
https://github.com/krispo/angular-nvd3
http://jtblin.github.io/angular-chart.js/
https://github.com/pablojim/highcharts-ng
Kommentare
Keine Kommentare