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

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
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
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
Manfred
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
gionkunz

Hi Manfred

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

Lg Gion

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung