Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Genial einfach zu responsiven Diagrammen: Das kann ChartistJS

SVG-Diagramme. (Screenshot: ChartistJS)

ChartistJS ist eine einfache JavaScript-Library zur Erstellung von SVG-Diagrammen. Die erstellten Graphen sind voll responsiv und DPI-unabhängig.

ChartistJS ist eine JavaScript-Library zur Erstellung von responsiven SVG-Diagrammen. (Screenshot: ChartistJS)
ChartistJS ist eine JavaScript-Library zur Erstellung von responsiven SVG-Diagrammen. (Screenshot: ChartistJS)

ChartistJS: Einfach responsive SVG-Diagramme erstellen

Es gibt keinen Mangel an guten JavaScript-Libraries zur Erstellung von Diagrammen. Allerdings setzen Bibliotheken wie Epoch auf das Canvas-Element. Die Macher von ChartistJS haben sich dagegen entschieden und setzen auf SVG zur Darstellung der Graphen. Die damit erstellten Diagramme sind vollständig responsiv und sollten unabhängig von der Auflösung des Nutzers gut aussehen.

ChartistJS punktet mit einfachem Handling und zugleich großer Flexibilität. Außerdem gibt es eine klare Trennung von Belangen. Kontrolliert werden die Diagramme mit JavaScript, das Styling wird durch CSS erreicht. Ihr könnt euch die JavaScript-Library entweder von der offiziellen ChartistJS-Website herunterladen, über GitHub, oder direkt über einen der beiden Paketmanager Bower und npm.

bower install chartist --save

$ npm install chartist

ChartistJS: Ihr könnt euren SVG-Diagrammen auch mit CSS-Animationen aufhübschen. (Screenshot: ChartistJS)
ChartistJS: Ihr könnt euren SVG-Diagrammen auch mit CSS-Animationen aufhübschen. (Screenshot: ChartistJS)

ChartistJS ist ein quelloffenes Community-Projekt von unzufriedenen Entwicklern

ChartistJS ist ein Community-Projekt von Entwicklern, die nicht zufrieden mit bestehenden Diagramm-Libraries waren. Neben dem Einsatz von Canvas statt SVG störte sie nach eigenen Angaben vor allem die fehlende Flexibilität, unnötige Abhängigkeiten von anderen Bibliotheken und weitere „nervige Dinge“. Die Library steht übrigens unter der freien „DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE“.

Wer Diagramme in ein Projekt einbinden muss, sollte einen Blick auf ChartistJS werfen. Alternativ dazu könnt ihr euch auch unseren Artikel „6 Tools für Diagramme in Webseiten und Web-Apps“ anschauen.

via www.producthunt.com

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Manfred

Habe die drei im Artikel genannten Chart-Lösungen mal mit den Online-Demos getestet. Die Canvas-Lösungen scheinen mir weiter gediehen. Die SVG-Variante hatte beim Skalieren so seine Probleme. Bei mir unster FF32 war somit der Mehrwert des druchegehenden responsiven Ansatzes weniger gegeben.
Vielleicht wird es aber noch.

Antworten
gionkunz

Hi Manfred

Leider hatten wir einen kleinen Bug mit FF32. Der wurde aber in Chartist 0.1.14 gelöst.

Lg Gion

Antworten
Roman

Ich vermisse die MouseOver Funktion, die mir die exakten Werte an einem Knoten anzeigt. Es ist zwar nett, dass die funktionsweise so schlank ist, aber die MouseOvers zur Anzeige der Daten ist für mich ein Must-Have.

Antworten
gionkunz

Es wurde bewusst darauf verzichtet solche Funktionalität in Chartist.js zu lösen da dies sehr einfach mit Standardtechnologie möglich ist im Rahmen von inline-svg. Schau dir hierfür mal das letzte Beispiel unter "getting started" an http://gionkunz.github.io/chartist-js/getting-started.html

Lg Gion

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.