Immer schon Chart JS lernen wollen, aber die Anweisungen auf eine visuellere Weise verstehen müssen? Diese Website behandelt Chart JS mit einem visuelleren Ansatz. Das Ziel hierbei ist es, ein höheres Verständnis sicherzustellen.
Chart JS Video-Anleitung
Chart JS ist eine wunderbare JavaScript-Bibliothek mit vielen Optionen, die trotzdem recht kompakt ist. Das macht Chart JS zu einem echten Schatz. Es ist viel möglich, aber wenn Sie nicht verstehen, wie es funktioniert, sehen Sie es vielleicht nicht. Diese Website deckt so viel wie möglich über Chart JS und alle Möglichkeiten ab. Bereit zu erkunden?
What is Chart.js?
Oft hört man, dass Chart.js eine JavaScript-Bibliothek oder ein Framework zum Zeichnen von Diagrammen in JavaScript ist. Was jedoch ziemlich überraschend ist, ist, dass Leute, die Chart.js verwenden, diese Verbindung mit JavaScript oft nicht erkennen.
Viele vergessen oft, dass Chart.js auf JavaScript basiert. Was ich meine, ist, dass sie nicht sehen, wie man JavaScript-Arrays zusammen mit Chart.js kombinieren kann, aufgrund der Komplexität des Canvas-Tags, den Chart.js verwendet.
Ein Diagramm wird in einem Canvas-Tag gezeichnet. Der Code, den Chart.js verwendet, sind im Grunde Anweisungen zum Zeichnen von Linien, Punkten, Kreisen und anderen Formen in einem Canvas an präzisen x- und y-Koordinaten. Wenn Sie verstehen, dass Chart.js wie ein "Bootstrap" für Canvas ist, um schnell Diagramme zu zeichnen, haben Sie ein besseres Verständnis dafür, was es ist.
Chart.js spart Ihnen Zeit, da Sie nicht die Canvas-API lernen müssen. Der Chart.js-Code ist eine vordefinierte Vorlage, die die Canvas-API lesen und sofort das gewünschte Diagramm zeichnen kann. Dieses zeitsparende Werkzeug hilft Ihnen, voranzukommen. Ohne Chart.js müssten Sie lernen, wie Sie JavaScript-Code schreiben, den die Canvas-API lesen kann (oder im Codeterminus "parsen").
Daher lassen Sie uns zur Frage zurückkehren: Was ist Chart.js? So würde ich Chart.js definieren:
"Chart.js ist eine vorgeschriebene Diagrammvorlage, die in JavaScript codiert ist und von der Canvas-API gelesen werden kann."
www.Chartjs3.com
Diese Definition gibt Ihnen einen guten Ausgangspunkt zum Arbeiten. Sie verstehen sofort, dass es sich um JavaScript handelt, sehen aber auch den Zusammenhang, warum es etwas anders ist. Es ist so geschrieben, dass es für das Canvas-Tag lesbar ist. Die Canvas-API ist in JavaScript geschrieben, aber der Code ist etwas anders.
Viele haben Schwierigkeiten, weil sie diese Beziehung nicht sehen und Chart.js nicht wirklich auf einer tieferen Ebene verstehen können. Es ist nicht schlimm, nicht zu verstehen, wie man die Canvas-API verwendet oder wie man sie in JavaScript schreibt. Es wird Ihre Optionen einschränken und die Interaktivität Ihrer Grafik begrenzen. Diese Einschränkung ist das, was viele als Hürde empfinden.
Warum Sie Chart.js verwenden möchten und das Hindernis
Viele, die Chart.js verwenden möchten, stellen sich schöne, klickbare und interaktive Diagramme vor. Wo Daten aus einer Datenbank oder einem JSON-Objekt abstrahiert werden und sich nach einem Klick auf eine Schaltfläche in etwas Neues und Erfrischendes ändern. Es sollte mehr sein als nur ein Standard-Flachdiagramm, wie wir es üblicherweise in Ms. Excel sehen. Leider erkennen sie, dass die Verwendung von Chart.js ein solides Verständnis verschiedener Disziplinen erfordert (Javascript, Chart.js, Canvas-API, MySQL, PHP, Node JS und mehr), was zu einem echten Hindernis wird, um das Diagramm interaktiv zu gestalten.
Wie kann man das Stolpersteinproblem in Chart.js überwinden?
Das Ziel dieses Buches ist es, den Stolperstein in Chart.js zu überwinden. Nachdem ich festgestellt habe, dass die meistgesehenen Videotopics sich mit Chart.js in Verbindung mit Interaktivität befassen, habe ich beschlossen, ein Buch darüber zu schreiben.
Dieses Buch wurde geschrieben, um Ihnen dabei zu helfen, dieses Ziel zu erreichen. Es handelt sich um ein visuelles Video-Buch, was bedeutet, dass Sie lernen werden, aber alle Themen sind auch im Videoformat für eine bessere Erklärung und Verständnis vorhanden. Viele Programmierer sind visuell orientiert, weshalb sie mit Websites und Coding arbeiten. Es ist entscheidend, Chart.js zu lernen, indem Sie sehen, wie es funktioniert, und das Wie und Warum verstehen.
Warum behandelt die Chart.js-Dokumentation keine Themen zur Interaktivität?
Sie haben möglicherweise die Chart.js-Dokumentation gelesen und festgestellt, dass sie nicht in die Tiefe der Interaktivität gehen. Das Ziel der Chart.js-Dokumentation besteht darin, Ihnen beizubringen, wie Sie Chart.js verwenden können. Mit anderen Worten, es liegt außerhalb ihres Umfangs. Da sie erklären möchten, wie man Diagramme zeichnet, gehen sie nicht darauf ein, wie man Interaktivität erstellt, da dies als Javascript, Canvas-API-Code, MySQL oder sonstiges betrachtet wird, das nicht mit Chart.js zusammenhängt. Sie erwarten zu Recht, dass Sie ihre Website besuchen, weil Sie lernen möchten, wie man ein Diagramm in Chart.js zeichnet.
Chart.js wird als JS-Framework bezeichnet. Ein Framework besteht aus zwei Wörtern, nämlich "frame" und "work". Das bedeutet, dass Sie innerhalb eines festen Rahmens arbeiten. Stellen Sie sich dies wie einen Bilderrahmen vor, der wie ein "Rahmen" (denken Sie an CSS) ist. Alles außerhalb dieses Rahmens liegt außerhalb des Geltungsbereichs und wird in Chart.js nicht abgedeckt.
Warum? Wenn Sie Chart.js mit MySQL lernen möchten, erwarten sie von Ihnen, die MySQL-Dokumentation zu studieren, da sie nicht hier sind, um Ihnen das beizubringen. Obwohl sie in Kombination nützlich sind, vermeidet die Chart.js-Dokumentation dies, um die Dokumentation übersichtlich zu halten. Andernfalls würde die Dokumentation riesig und unübersichtlich werden. Denken Sie darüber nach, all die Themen, die sie abdecken müssten, darunter viele andere Frameworks und Programmiersprachen.
Interaktive Chart.js-Dokumentation
Das Chart.js Interactive Documentation fügt eine zusätzliche Ebene der Komplexität hinzu, indem es die interaktiven Teile von Chart.js behandelt.
Um ein interaktives Diagramm zu erstellen, müssen Sie mehrere Sprachen und Themen innerhalb von Javascript kennen.
- HTML-Eingabefelder: Eingabefelder sind der Ausgangspunkt für Interaktivität in einem Diagramm.
- JavaScript-Arrays: Ohne dieses Verständnis können Sie Daten in keiner Weise oder Form manipulieren.
- JavaScript-Funktionen: Funktionen sind erforderlich, um eine Reaktion auszulösen, sobald eine Schaltfläche geklickt wurde oder ein Hover-Effekt ausgelöst wurde.
- Chart.js-API: Chart.js behandelt einige fortgeschrittene Themen, die Ihnen bei mit canvas-Tag verbundenen Elementen helfen.
- Datenbank (MySQL, MongoDB usw.): Für die Verbindung mit einer Datenbank gibt es viele mögliche Optionen. Viele Menschen wechseln zu einer Fullstack-JS-Programmiersprache, was bedeutet, dass Frontend und Backend JS sind.
- Serverseitige Skriptsprachen (PHP, Nodejs usw.): Diese sind wesentlich für die Kommunikation zwischen Frontend und Backend (Datenbank oder Server).
Lassen Sie uns diese Themen in den folgenden Kapiteln behandeln.
Kapitel 1: Erstellen eines festen Diagramms in Chart.js
Das Erstellen eines Diagramms mit Chart.js ist ziemlich einfach. Die Chart.js-Dokumentation enthält einen schönen Democode. Allerdings lassen sie manchmal zusätzliche Erklärungen aus. Der entscheidende Teil sind die Blöcke, die Codeabschnitte sind, die schließlich schön miteinander verbunden sind. Es gibt auch eine ältere Demo, die aus Chart.js 2 stammt, und ich empfehle nicht, diesen speziellen Code zu verwenden. Lernen Sie die neue Methode.
Diese Blöcke sind in der Regel in drei separate Teile strukturiert, aber oft gibt es mehr, wenn das Diagramm einige benutzerdefinierte Anpassungen hat. Diese Blöcke können als das Skelett oder die Grundlage des Chart.js-Codes betrachtet werden. In den Videos bezeichne ich sie oft als:
- Setup- oder Datenblock
- Config- oder Konfigurationsblock
- Render- oder Initialisierungsblock
Setup- oder Datenblock
Der Setup- oder Datenblock besteht aus allen Standarddaten, die wir in unserem Diagramm verwenden. Alles von Beschriftungen, Datensätzen, Datenpunkten und mehr.
Config- oder Konfigurationsblock
Der Konfigurationsblock besteht aus dem Datenblock-Verweis, den Optionen und dem Diagrammtyp.
Render- oder Initialisierungsblock
Der Rendern- oder Initialisierungsblock startet oder aktiviert den Prozess zum Zeichnen des Diagramms im Canvas-Tag, auf das er verweist.
Skelettblockcode
Dieses Video zeigt, wie man den alten Democode aus der Chart.js-Dokumentation herausgreift und in die neueste Version umwandelt, da Chart.js dazu neigt, diese Struktur zu verwenden.
Wenn Sie am genauen Quellcode interessiert sind, finden Sie die vollständige Seite mit weiteren Erklärungen auf dieser speziellen Seite.
Das beinhaltet das gleiche Video, aber auch zusätzliche Informationen zu den Chart.js-Blöcken und dem Quellcode.
Kapitel 2: Erkunden des Render-, Config- und Datenblocks.
Während der Render-Block das Zeichnen des Diagramms abdeckt, erklärt dies, warum er als Render- oder Initialisierungsblock bezeichnet wird. Initialisierung würde auf den Anfang hinweisen, also beginnt es, das Diagramm von Anfang an zu zeichnen. Dies wird wichtiger, wenn Sie die " chart.destroy-API" verwenden. Diese ist entscheidend, wenn Sie bei einem Klick auf einen Button den Diagrammtyp ändern möchten.
Verschiedene Diagrammtypen im Konfigurationsblock
Chart.js 3 bietet von Haus aus viele verschiedene Diagrammtypen. Hier sind einige gängige Diagrammtypen, die im Konfigurationsblock festgelegt werden können.
- Balkendiagramm
- Liniendiagramm
- Kreisdiagramm
- Ringdiagramm (Donut-Diagramm)
- Punktdiagramm
- Blasendiagramm
- Radardiagramm
- Polardiagramm
Neben den Standardtypen von Diagrammen gibt es auch weitere Optionen wie Combo-Diagramme, aber das sind nur die grundlegenden Funktionen, die in Chart.js integriert sind. Natürlich möchten die meisten Benutzer immer mit fortschrittlicheren Diagrammtypen experimentieren, die individuell angepasst sind. Zum Beispiel ein Histogrammdiagramm und mehr, was etwas fortgeschrittener ist und später behandelt wird.
Die Änderung grundlegender Diagrammtypen ist jedoch recht einfach. Bei Chart.js müssen Sie lediglich zum Konfigurationsblock gehen und den gewünschten Diagrammtyp einfügen.
// config block
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Hier sehen Sie das fett markierte Element, das angepasst werden sollte. Was müssen Sie jedoch tun, wenn Sie eine Ebene der Interaktivität erstellen möchten?
Obwohl die Arten ein interessantes Element sind, ist es ziemlich einfach. Die meisten Diagrammtypen haben viele Ähnlichkeiten, aber einige sind unterschiedlich und können oder können möglicherweise keine Achse haben, wie das Torten- und Doughnut-Diagramm. Oder sie enthalten eine andere Struktur wie ein Radar-Diagramm. Wir werden dies bald genauer besprechen, aber zuerst gehen wir darauf ein, wie Daten modifiziert werden können.
Datenblock und Datensätze
Der wichtigste Teil, dem die meiste Aufmerksamkeit gilt, betrifft den Datensatz. Der Datensatz ist der Block, der das Zeichnen der Datenpunkte abdeckt. Das Ziel des Diagramms besteht darin, eine Geschichte von Zahlen in ein Bild zu übermitteln, um Zahlen für den Verstand leicht verdaulich zu machen.
Während das Härten der Zahlen recht einfach ist, ist das Weicher-Codieren eine Herausforderung. Der Hauptgrund dafür liegt in der Manipulation von Arrays. Die Fähigkeit zur Manipulation von Array-Daten hilft dabei, nur die Werte anzuzeigen, die sichtbar sein sollen.
Viele Menschen, die mit Chart.js arbeiten, erfassen diesen Teil oft nicht wirklich. Der Hauptgrund dafür ist, dass sie Chart.js anders betrachten. Oft, wenn sie entdecken, wie ein großer Teil von Chart.js auf Arrays basiert, erkennen sie, dass Chart.js wirklich JavaScript ist, jedoch mit einer großen Menge an daran angefügtem Canvas-API-Code.
Wie modifiziert man ein Array?
Die Modifizierung eines Arrays verwendet in der Regel die vier häufigsten Methoden, aber JavaScript bietet eine umfangreiche Liste von Array-Methoden, die Sie verwenden können. Wenn Sie dies wirklich verstehen möchten, erkunden Sie die Chart.js Array Series behandelt wird.. Es behandelt viele verschiedene Themen.
Allerdings ist es für den Anfang eine gute Einführung, Ihnen die vier häufigsten Methoden zu geben. Wenn Sie mehr erfahren möchten, erkunden Sie unbedingt die Serie mit 19 verschiedenen Videos zur Array-Manipulation.
- Push-Array-Methode: Fügt einen Wert am Ende des Arrays hinzu.
- Pop-Array-Methode: Entfernt den letzten Array-Wert.
- Unshift-Array-Methode: Fügt einen Wert am Anfang des Arrays hinzu.
- Shift-Array-Methode: Entfernt den ersten Array-Wert.
Mit diesen vier grundlegenden Array-Methoden können Sie bereits viel erreichen. Wie man sie verwendet? Schauen wir uns hier ein Beispiel an.
const colors = ['red', 'blue', 'green'];
colors.push('yellow') // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop() // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift() // colors = ['red', 'blue', 'green'];Wie Sie sehen können, führt jede Array-Methode aus, und wie Sie es tun, besteht einfach darin, das Array-Element, in diesem Fall 'colors', anzufügen und die Array-Methode am Ende hinzuzufügen. Wenn Sie einen Wert hinzufügen, wie bei push oder unshift, müssen Sie den Wert definieren, der dem Array hinzugefügt wird.
Das ist der einfachste Weg, um mit dem Array fortzufahren. Es gibt auch eine weitere fortgeschrittene und leistungsfähige Methode, die als Datenstrukturen in Chart.js bezeichnet wird.
Datenstrukturen sind eine fortgeschrittene Methode für Datensätze.
Datenstrukturen sind eine der leistungsstärksten und fortschrittlichsten Möglichkeiten, Dinge zu tun. Chart.js gibt diesem Element einen kleinen Abschnitt, was schade ist, denn Datenstrukturen können die Array-Manipulation wirklich vereinfachen. Im Wesentlichen handelt es sich bei Datenstrukturen um JavaScript-Objekte, die direkt in Ihrem Diagramm gelesen werden können.
Chart.js hat dies gemacht, weil wir oft Daten aus JSON oder einem Objekt erhalten und das Modifizieren des Objekts in mehrere Arrays keinen Sinn ergeben würde. Daher wäre es sinnvoller, Chart.js beizubringen, eine vorhandene Struktur zu lesen. Dies wurde in Chart.js 3.1 schön eingeführt.
Um dies zu verstehen, gibt es mehrere Videos zu diesem Thema auf einer separaten Seite. Stellen Sie sicher, dass Sie alle Videos zu Datenstrukturen ansehen.
Um jedoch sicherzustellen, dass Sie die Essenz verstehen, wird Ihnen dieses Video ein grundlegendes Verständnis vermitteln.
Die fortgeschrittenen Themen im Zusammenhang mit Datenstrukturen finden Sie auf der Seite Datenstrukturen . Sehr empfehlenswert!
Um Datenstrukturen zu verwenden, müssen wir die x- und y-Werte neu zuweisen, da wir Chart.js mitteilen müssen, woher der Datenpunkt stammt. Wie Sie im Video sehen, verwenden wir dazu das Parsen sowie xAxisKey und yAxisKey.
Das Parsen bedeutet, etwas lesbar für die Sprache zu machen, in die wir es parsen. In diesem Fall parsen wir das neue Datenobjekt, um es lesbar für Chart.js zu machen und das Diagramm zu zeichnen.
Die Datenstrukturen sind eine der besten Funktionen in Chart.js, aber sie sind nicht wirklich klar, da dies etwas ist, das man erst bemerkt, wenn man oft mit Daten und Diagrammen arbeiten muss. Jetzt, da wir ein Verständnis für den wichtigsten Teil der Daten haben, sollten wir uns auf die Funktionalität konzentrieren.
Funktionalität und Interaktionen in Chart.js
Die Verwendung von Farben in Chart.js kann sehr nützlich sein, um etwas hervorzuheben. Mit farblich codierten Datenpunkten können Sie etwas ohne Worte kommunizieren. Wenn wir beispielsweise einen negativen Wert rot und einen positiven Wert grün färben, haben wir ohne ein Wort zu sagen kommuniziert. So intuitiv wird der Benutzer es höchstwahrscheinlich verstehen.
Die Hintergrundfarbe und die Randfarbe werden innerhalb des Datenblocks im Dataset festgelegt. Das Video hier steuert grundlegende farbcodierte Optionen mit Grün und Rot, abhängig vom Wert.
Diese Optionen sind zum Glück noch nicht kompliziert, da sie mit Arrays arbeiten. Sobald Sie verstehen, wie Sie Werte in ein Array einfügen können, können Sie auf eine intuitivere Weise mit Farben experimentieren. Wie Sie bemerken, können Sie jedes Mal, wenn eine neue Fähigkeit gemeistert wurde, Ihre Optionen in Chart.js erweitern.
Alles darunter sind spezifische Konzepte, die in Kapitel umstrukturiert werden müssen.
Verstehen des Unterschieds zwischen Zeit und Zeitreihe in Chart JS
In Chart.js müssen wir oft Diagramme mit spezifischen Datumsangaben erstellen. Wenn Sie beispielsweise ein Börsendiagramm erstellen, in dem Ihr Diagramm nur Daten für die Wochentage enthält, haben Sie fehlende oder statische Daten an Wochenenden und Feiertagen. Dies kann unerwünscht sein, und Sie möchten diese spezifischen Daten entfernen, um das Diagramm sauber zu halten.
Time Chart JS
Der Typ "time" ist in diesem Fall nicht nützlich. Denn dies würde den Raum aufgrund des Zeitrahmens berechnen. Wenn beispielsweise der nächste Datenpunkt eine Woche nach dem aktuellen Datenpunkt liegt, wird er 7 Segmente Platz berechnen. Dies erzeugt eine große Lücke in unserem Diagramm. Sehen Sie die Lücke in den X-Skalen unten.
Zeitreihen Chart JS
Chart.js verfügt über eine nützliche integrierte Funktion, um dieses spezifische Problem zu lösen, nämlich die Zeitreihe (timeseries). Dabei werden alle Datenpunkte auf gleichem Abstand voneinander platziert. "Gleichmäßig" leitet sich von den Wörtern 'gleich' und 'Abstand' ab. Mit anderen Worten werden alle nächsten Datenpunkte auf gleichen Abstand gesetzt, unabhängig von der Zeitspanne zwischen den Jahren. Siehe das Bild unten:
Natürlich müssen wir dies anpassen, wie die Skalierung die Daten darstellt, da es zu Überlappungen kommen kann, wenn eine große Menge Daten zwischen einem Segment gepresst wird.
Wie man eine Tabelle aus Datensätzen in Chart JS erstellt
Die Erstellung einer Tabelle basierend auf den Daten von Chart.js erfordert ein genaues Verständnis von JavaScript. Insbesondere, wie man Tabellenelemente erstellt und ein Tabellenobjekt in JS aufbaut.
Mit Chart.js können wir das Datenobjekt extrahieren, das ordentlich organisiert ist, um das Diagramm zu zeichnen. Dieselbe Datenquelle ist nützlich für die Erstellung der Tabelle. Das folgende Video zeigt Ihnen genau, wie das geht.
Wie man ein Sales Funnel-Diagramm in Chart JS erstellt
Die Erstellung eines Sales Funnel-Diagramms in Chart JS ist möglich. Es erfordert jedoch einige fortgeschrittene Plugin-Anpassungen, um es zum Laufen zu bringen. Wir müssen verstehen, wie man benutzerdefinierte Formen zeichnet, die die Balken in einen Trichter umwandeln.
Wenn Sie bereit für einige fortgeschrittene Chart.js sind, ist dieses Video eine großartige Herausforderung. Es verfolgt den Verkaufstrichter, und bei jedem Schritt des Trichters schrumpft dieser basierend auf den Werten des Datensatzes.
Wie man ein Chart als Bild in Chart JS speichert
Um ein Diagramm oder eine Leinwand als Bild zu speichern und herunterzuladen, müssen wir einige Arbeit leisten. Standardmäßig können Sie durch Rechtsklick das Diagramm als Bild herunterladen und speichern. Dies ist jedoch für viele nicht ganz offensichtlich, daher ist die Erstellung einer speziellen Download-Schaltfläche eine gute Alternative.
Wie man eine Leinwand als Bild bei einem Klick auf eine Schaltfläche in Chart JS herunterlädt.
Das folgende Video zeigt Ihnen genau, wie Sie dies erreichen können. Wir werden die Leinwand in eine PNG-Datei umwandeln, die wir herunterladen und auf unserem Gerät speichern können.
Skillshare-Kurs kommt bald!
Ich arbeite derzeit an einigen Skillshare-Kursen. Wenn Sie kein Skillshare haben und ihre Optionen erkunden möchten, können Sie eine Woche Skillshare kostenlos erhalten, indem Sie auf diesen Link klicken. Dies ist ein Affiliate-Link, der mir eine Provision gibt, wenn Sie sich anmelden. Es kostet Sie während dieser kostenlosen Periode nichts. Und die Provision, die ich erhalte, wird in Chart.js-Tutorials und Forschung und Entwicklung reinvestiert.
German 
English 
Chinese 
French 
Korean 
Portuguese (Portugal) 
Portuguese (Brazil) 
Spanish 
Vietnamese