zurück zum Artikel

Daten im Web präsentieren: Diagramme erstellen mit JavaScript-Frameworks

Tam Hanna

(Bild: oml)

Ein Diagramm sagt oft mehr als tausend Worte – gerade im Web sind sie darum unverzichtbar. Wir stellen JavaScript-Frameworks zum Erstellen von Diagrammen vor.

Das Internet ist voller komplexen Informationen und der durchschnittliche User hat kaum die Zeit, auch nur einen kleinen Bruchteil davon zu erfassen. Ziel sollte darum sein, ihm das Aufnehmen von Informationen möglichst einfach zu machen. Statt ihm also Bleiwüsten um die Ohren zu hauen, helfen anschauliche und gut aufbereitete Diagramme.

Dieser Artikel thematisiert zwei Bibliotheken, mit deren Hilfe Sie auch umfangreiches Datenmaterial anschaulich visualisieren. Während es sich bei HighCharts (Download) [1] [1] um ein kommerzielles Produkt handelt (ab 550 US-Dollar), das eine umfangreiche Erweiterungspalette anbietet, ist D3.js (Download) [2] [2] ein kostenfreies Open-Source-Produkt unter BSD-Lizenz. HighCharts vertritt das Genre der gewöhnlichen Diagramm-Bibliotheken, während D3.js mehr ein SVG-Renderer ist, der Entwicklern ein Werkzeug zur Realisierung eigener Diagramme in die Hand gibt.

Als Einstieg in die Arbeit mit HighCharts erstellen Sie mit unserer Anleitung ein Liniendiagramm, bevor Sie einen kleinen Ausflug in die Finanzwelt unternehmen und mit einem Candlestick-Chart Preisbewegungen darstellen. Anschließend stellen wir die Arbeit mit D3.js anhand kleiner Experimente vor, bevor Sie sich auch hier ein Liniendiagramm vornehmen.


URL dieses Artikels:
https://www.heise.de/-6061047

Links in diesem Artikel:
[1] https://www.highcharts.com/download/
[2] https://www.heise.de/download/product/d3.js-90162/download