Haupt / Wie Man

So erstellen Sie reaktionsschnelle Diagramme mit Chartist.js

Seite 1 von 2: Seite 1

Seite 1
Seite 2

Als reaktionsschneller Webentwickler bin ich ständig auf der Suche nach Standardtechnologien unter einer Haube und versuche gleichzeitig, mit den Anforderungen Schritt zu halten W3C One Web versprechen.

Es mag zunächst unmöglich erscheinen, auf jedem Medium die gleichen Informationen, das gleiche Design und die gleichen Interaktionen verfügbar zu machen - obwohl jedes Medium seine eigenen Einschränkungen aufweist. Es ist einer der herausforderndsten Teile des Jobs eines Entwicklers, aber ich denke immer noch, dass dies ein Versprechen ist, das wir erfüllen können und sollten.

Das Problem, bestimmte Inhalte auf bestimmten Medien nicht anzuzeigen oder Interaktionen zu verwerfen, besteht nicht darin, dass ein W3C-Vertrag gebrochen wird, sondern dass die Erwartungen unserer Benutzer verletzt werden. Dort zahlen wir die Geldstrafe.

Es gibt nichts ärgerlicheres, als zu entdecken, dass Ihr Lieblingsknopf auf einer Website nicht existiert, wenn Sie im Bus sitzen und Lust haben, ihn zu drücken! Nach meiner Erfahrung kann dies sogar dazu führen, dass ein Benutzer sich einfach dafür entscheidet, eine Website nicht vollständig auf agiven Medien anzuzeigen.

Ich denke, diese Prinzipien sollten auf alle Inhalte im Web angewendet werden, und dazu gehört auch die Datenvisualisierung. Angesichts eines Projekts für einen Kunden, der wollte, dass ich ein Leistungs-Dashboard implementiere, auf das auf einem Handy und Tablet zugegriffen werden kann, das aber auch auf einem großen Breitbildfernseher gut angezeigt wird, verlor Ifelt mit den verfügbaren Optionen.

Es gab bereits Unmengen guter Diagrammbibliotheken, aber keine von ihnen löste tatsächlich das Problem der Erstellung einfacher und gut aussehender Diagramme, die sich auch reaktionsschnell verhielten.

Nachdem ich stundenlang versucht hatte, vorhandene Bibliotheken so zu optimieren, dass sie sich so verhalten, wie ich es wollte, entschied ich mich einfach, meine eigenen zu erstellen. Dies war die Geburt von Chartist.js .

Inbetriebnahme

Der einfachste Weg, um mit Chartist.js zu beginnen, ist die Verwendung des Bower-Paketmanagers (bower.io). Sie können dann die neueste Version von Chartist.js installieren, indem Sie den folgenden Befehl in Ihre Shell eingeben:

bower install chartist --save

Sie haben jetzt Chartist.js lokal installiert und warten auf Ihre weitere Anweisung. Alles, was Sie tun müssen, ist, die Ressourcen in Ihr HTML einzufügen, und schon können Sie einige ansprechende Diagramme zeichnen.

Chartist.js wird ohne Abhängigkeiten geliefert und hat eine komprimierte Größe von weniger als 10 KB. Der Hauptzweck von Chartist.js besteht darin, ein und nur ein Problem zu lösen, das es Entwicklern ermöglicht, einfache, reaktionsschnelle Diagramme zu zeichnen. Dies geschieht mithilfe von Webstandards wie Inline-SVG im DOM und CSS für das Erscheinungsbild. Mit dieser klaren Trennung der Bedenken und der Nutzung von Standardtechnologien kann Chartist.js Ihnen alles bieten, was Sie brauchen, und nichts weiter.

Chartist.js geht nur ein Problem an: Entwickler können einfache, reaktionsschnelle Diagramme zeichnen

Das größte Problem, das ich derzeit bei vielen Bibliotheken bemerke, ist, dass sie versuchen, zu viele Probleme zu lösen, und dass sie vergessen, dass es sich um Bibliotheken und nicht um Anwendungen handelt. Ich bin sicher, Sie haben Situationen erlebt, in denen eine Bibliothek alles außer dem einen anpasst, das Sie wirklich anpassen möchten. Indem Sie auf Webstandards aufbauen, können Sie die Funktionalität von Chartist.js problemlos erweitern und linear skalieren.

Hacken Sie Ihr erstes Diagramm

Nachdem Sie Chartist.js in Ihr Projekt aufgenommen haben, können Sie Ihr erstes Diagramm erstellen. Die Bibliothek enthält einige Standardstile, die mit der SCSS-Version (Sass) leicht überschrieben oder angepasst werden können.

Wenn Sie mit den Standardstilen arbeiten möchten, können Sie einfach die vorgefertigte CSS-Klasse .ct-chart verwenden, um einen Diagrammcontainer in Ihrem HTML zu erstellen.

Das wars schon für den HTML-Teil. Natürlich liegt es an Ihnen, ob Sie ein oder ein anderes Element verwenden möchten, das Ihrer Meinung nach besser zum Kontext passt.

Chartist.Line(‘.ct-chart', {   labels: [‘Mon', ‘Tue', ‘Wed', ‘Thu', ‘Fri'],   series: [[0, 3, 2, 8, 9], [1, 2, 3, 5, 8]] }, {   width: ‘300px',   height: ‘200px' });

Herzlichen Glückwunsch, Sie haben gerade Ihr erstes Diagramm mit Chartist.js erstellt! War das nicht ein Kinderspiel? Aber warten Sie ... soll das nicht eine reaktionsschnelle Diagrammbibliothek sein? Natürlich würde ich nicht empfehlen, dass Sie für Ihr Diagramm feste Abmessungen verwenden, die auf Pixeln basieren, oder?

Nächste Seite: Weitere Informationen zum Erstellen reaktionsfähiger Diagramme mit Chartist.js