Mit Canvas-Elementen hübsche Diagramme erstellen

Chart.js – JavaScript-Library für Diagramme
Kommentare

Mithilfe des HTML5-canvas-Elements Diagramme erzeugen, kann mittlerweile fast jede JavaScript-Library. Was Chart.js so besonders macht, ist ihre geringe Größe, die Unabhängigkeit von anderen JS-Bibliotheken und die dennoch umfangreiche Funktionalität.

Wir haben bereits vor einiger Zeit über Chart.js berichtet, da die Diagramm-Bibliothek in die Schlagzeilen geraten war: Einen Tag nach der Veröffentlichung wurde Entwickler Nick Downie von seinem Arbeitgeber dazu aufgefordert, die Open-Source-Library aus dem Netz zu nehmen – unter Berufung auf geistiges Eigentum. Nach einem Shitstorm seitens der Twitter-Community wurde Chart.js aber ziemlich schnell wieder unter MIT-Lizenz online gestellt.

Mittlerweile wurde Chart.js gründlich überarbeitet und liegt aktuell in Version 2.0 vor – Grund genug also, einen genaueren Blick darauf zu werfen.

Funktionalitäten von Chart.js

Im Grunde ist Chart.js eine einfache, aber dennoch flexible und mit einigen Funktionen ausgestattete JavaScript-Library. Mit ihr und dem verwendeten HTML5-canvas-Element können Designer und Entwickler mit wenig Aufwand clientseitig Diagramme erstellen. Die minifizierte und gzip-komprimierte Installationsdatei von Chart.js ist gerade einmal 31 kB groß und kann via npm/bower installiert werden. Durch die Verwendung des canvas-Elements kann die Bibliothek in jedem Browser genutzt werden. Zudem sind die entworfenen Diagramme responsiv und passen sich so dem jeweiligen Ausgabegerät an.

Mit der Diagramm-Bibliothek lassen sich Linien-, Balken-, Netz-, Polar-, Torten- und Donutdiagramme sowie Skalen darstellen:

In Version 2.0 ist es jetzt möglich, Diagramm-Typen zu kombinieren, um so eine deutliche visuelle Unterscheidung zwischen unterschiedlichen Datensets zu schaffen. Auch Skalen lassen sich jetzt besser modifizieren: Mehrere x- und y-Achsen werden unterstützt, Beschriftungen sind möglich und eigene Skalen lassen sich einfacher erstellen. Zusätzlich stehen Animationen zur Verfügung, die bei einer Änderung der visualisierten Daten oder neuen Datensets in Anspruch genommen werden können.

Die gewünschten Diagramme werden in 2D realisiert, bieten aber keine weiteren Interaktionsmöglichkeiten. Möchte man also mit einzelnen Elementen eines Diagramms interagieren, bietet sich Chart.js eher nicht an. Wem aber ein dynamisch generierter Graph ohne darüberhinausgehende Features reicht, der ist mit der Library bestens bedient.

Name Chart.js
Entwickler Nick Downie
Projektwebsite http://www.chartjs.org/
GitHub https://github.com/chartjs/Chart.js

 

Aufmacherbild: Laptop and diagrams are on a white background von Shutterstock / Urheberrecht: fkdkondmi

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -