Es gibt einige JavaScript-Bibliotheken zum Zeichnen verschiedener Diagramme, die von Balkendiagrammen bis hin zu Liniendiagrammen und mehr reichen. Wenn Sie lernen, wie Sie Daten mit JavaScript dynamisch auf Ihrer Website anzeigen können, ist Chart.js eine solche Bibliothek, die Sie ausprobieren sollten.

Wie können Sie mit Chart.js Datenvisualisierungen erstellen? Wie das geht, erfahren Sie in diesem Artikel.

Lass uns anfangen.

Was ist Chart.js?

Chart.js ist eine Open-Source-JavaScript-Bibliothek zur Datenvisualisierung, die zum Zeichnen von HTML-renderbaren Diagrammen verwendet wird. Es unterstützt derzeit acht verschiedene interaktive Diagrammtypen, die Sie auch animieren können. Um ein HTML-basiertes Diagramm mit chart.js zu erstellen, benötigen Sie eine HTML-Leinwand, um es aufzunehmen.

Die Bibliothek akzeptiert eine Reihe von Datensätzen und andere Anpassungsparameter wie Hintergrundfarbe, Rahmenfarbe und mehr. Einer der Datensätze ist der Etikett, die die Werte auf der X-Achse darstellt. Der andere ist ein Satz numerischer Werte, die typischerweise auf der Y-Achse liegen.

Sie müssen auch den Diagrammtyp innerhalb des Diagrammobjekts angeben, damit die Bibliothek weiß, welches Diagramm gezeichnet werden soll.

So erstellen Sie Diagramme mit Chart.js

Wie bereits erwähnt, können Sie damit verschiedene Arten von Diagrammen erstellen chart.js. In diesem Lernprogramm beginnen Sie mit Linien- und Balkendiagrammen. Sobald Sie das Konzept dahinter verstanden haben, verfügen Sie über alle Werkzeuge und das nötige Selbstvertrauen, um die anderen verfügbaren Diagramme zu zeichnen.

Verwandt:So machen Sie Ihre Website mit CSS und JavaScript reaktionsschnell und interaktiv

Um mit der Verwendung zu beginnen chart.js, erstellen Sie die erforderlichen Dateien. Für dieses Tutorial lauten die Dateinamen diagramm.html, plot.js, und index.css. Sie können jede beliebige Namenskonvention für Ihre Dateien verwenden.

Fügen Sie nun Folgendes in die Kopf Abschnitt Ihrer HTML-Datei, um mit dem Content Delivery Network (CDN) von Chart.js zu verlinken.

In diagramm.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Erstellen Sie als Nächstes eine HTML-Leinwand für Ihr Diagramm und geben Sie ihm eine ICH WÜRDE. Stellen Sie außerdem eine Verbindung zur CSS-Datei (index.css) in der Kopf Abschnitt und verweisen Sie auf Ihre JavaScript-Datei (plot.js) in der Karosserie Sektion.

Der Aufbau der HTML-Datei sieht folgendermaßen aus:

 Diagramme

Und in deinem CSS:

Karosserie{
 Hintergrundfarbe:#383735;
}
h1{
 Farbe:#e9f0e9;
 linker Rand: 43 %;
}
#Grundstücke{
 Rand: automatisch;
 Hintergrundfarbe: #2e2d2d;
}

Das obige CSS-Styling ist keine festgelegte Konvention. So können Sie Ihre je nach Ihrer DOM-Struktur nach Belieben gestalten. Sobald Ihre HTML- und CSS-Dateien fertig sind, können Sie Ihre Diagramme mit JavaScript zeichnen.

Das Liniendiagramm

So erstellen Sie ein Liniendiagramm mit chart.js, legen Sie das Diagramm fest Typ zu Linie. Dies weist die Bibliothek an, ein Liniendiagramm zu zeichnen.

Um dies zu demonstrieren, in Ihrer JavaScript-Datei:

// Den HTML-Canvas anhand seiner ID abrufen
Plots = document.getElementById("plots");
// Beispieldatensätze für X- und Y-Achsen
var Monate = ["Jan", "Feb", "März", "Apr", "Mai", "Jun", "Jul"]; //Bleibt auf der X-Achse
var Verkehr = [65, 59, 80, 81, 56, 55, 60] //Bleibt auf der Y-Achse
// Erstellen Sie eine Instanz des Chart-Objekts:
neues Diagramm (Plots, {
 Typ: 'Linie', //Deklarieren Sie den Diagrammtyp
 Daten: {
 Etiketten: Monate, // Daten der X-Achse
 Datensätze: [{
 Datenverkehr, //Daten der Y-Achse
 Hintergrundfarbe: '#5e440f',
 Randfarbe: 'weiß',
 füllen: falsch, //Füllt die Kurve unter der Linie mit der Hintergrundfarbe. Es ist standardmäßig wahr
 }]
 },
});

Ausgabe:

Fühlen Sie sich frei, die zu ändern füllen Wert zu wahr, verwenden Sie mehr Daten oder optimieren Sie die Farben, um zu sehen, was passiert.

Wie Sie auch sehen können, befindet sich oben im Diagramm ein kleines Legendenfeld. Sie können das in einem optionalen entfernen Optionen Parameter.

Der Optionen Der Parameter hilft neben dem Entfernen oder Einfügen der Legende auch bei anderen Anpassungen. Sie können es beispielsweise verwenden, um eine Achse zu zwingen, bei Null zu beginnen.

Ein erklären Optionen Parameter, so sieht der Diagrammabschnitt in Ihrer JavaScript-Datei aus:

// Erstellen Sie eine Instanz des Chart-Objekts:
neues Diagramm (Plots, {
 Typ: 'Linie', //Deklarieren Sie den Diagrammtyp
 Daten: {
 Etiketten: Monate, // Daten der X-Achse
 Datensätze: [{
 Datenverkehr, //Daten der Y-Achse
 Hintergrundfarbe: '#5e440f', //Farbe der Punkte
 Randfarbe: 'weiß', //Linienfarbe
 füllen: falsch, //Füllt die Kurve unter der Linie mit der Hintergrundfarbe. Es ist standardmäßig wahr
 }]
 },
 //Benutzerdefinierte Optionen angeben:
 Optionen:{
 Legende: {Anzeige: falsch}, //Entfernen Sie das Legendenfeld, indem Sie es auf "false" setzen. Es ist standardmäßig wahr.
//Einstellungen für die Waage festlegen. Zum Beispiel, um die Y-Achse bei Null beginnen zu lassen:
 Waage:{
 yAchsen: [{Ticks: {min: 0}}] //Sie können dasselbe für die X-Achse wiederholen, wenn sie ganze Zahlen enthält.
 }
 } 
});

Ausgabe:

Sie können auch unterschiedliche Hintergrundfarben für jeden Punkt verwenden. Das Variieren der Hintergrundfarben auf diese Weise ist jedoch bei Balkendiagrammen normalerweise hilfreicher.

Erstellen von Balkendiagrammen mit Chart.js

Hier müssen Sie nur das Diagramm ändern Typ zu Bar. Sie müssen die nicht einstellen füllen Option, da die Balken die Hintergrundfarbe automatisch erben:

// Erstellen Sie eine Instanz des Chart-Objekts:
neues Diagramm (Plots, {
 Typ: 'Balken', //Deklarieren Sie den Diagrammtyp
 Daten: {
 Etiketten: Monate, // Daten der X-Achse
 Datensätze: [{
 Datenverkehr, //Daten der Y-Achse
 Hintergrundfarbe: '#3bf70c', //Farbe der Balken
 }]
 },
 Optionen:{
 Legende: {Anzeige: falsch}, //Entfernen Sie das Legendenfeld, indem Sie es auf "false" setzen. Es ist standardmäßig wahr.
 }
});

Ausgabe:

Fühlen Sie sich frei, die Y-Achse zu zwingen, bei Null oder einem beliebigen Wert zu beginnen, wie Sie es für das Liniendiagramm getan haben.

Verwandt:JavaScript-Array-Methoden, die Sie beherrschen sollten

Um unterschiedliche Farben für jeden Balken zu verwenden, übergeben Sie ein Array von Farben, die der Anzahl der Elemente in Ihren Daten entsprechen, an die Hintergrundfarbe Parameter:

// Erstellen Sie eine Instanz des Chart-Objekts:
neues Diagramm (Plots, {
 Typ: 'Balken', //Deklarieren Sie den Diagrammtyp
 Daten: {
 Etiketten: Monate, // Daten der X-Achse
 Datensätze: [{
 Datenverkehr, //Daten der Y-Achse
//Farbe jedes Balkens:
 Hintergrundfarbe: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 Optionen:{
 Legende: {Anzeige: falsch}, //Entfernen Sie das Legendenfeld, indem Sie es auf "false" setzen. Es ist standardmäßig wahr.
 }
});

Ausgabe:

Erstellen eines Kreisdiagramms mit Chart.js

Um ein Tortendiagramm zu zeichnen, ändern Sie den Diagrammtyp in Kuchen. Möglicherweise möchten Sie auch die Anzeige der Legende auf einstellen wahr um zu sehen, was jedes Segment des Kuchens darstellt:

// Erstellen Sie eine Instanz des Chart-Objekts:
neues Diagramm (Plots, {
 type: 'pie', //Deklarieren Sie den Diagrammtyp
 Daten: {
 Etiketten: Monate, //Definiert jedes Segment
 Datensätze: [{
 data: traffic, // Bestimmt die Segmentgröße
 //Farbe jedes Segments
 Hintergrundfarbe: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 Optionen:{
 legend: {display: true}, //Dies ist standardmäßig wahr.
}
});

Ausgabe:

Wie in den obigen Beispielen können Sie andere Diagramme ausprobieren, indem Sie die ändern Typ.

Nichtsdestotrotz ist hier eine Liste der unterstützten chart.js Diagrammtypen, die Sie mit den obigen Codierungskonventionen ausprobieren können:

• Bar
• Linie
• streuen
• Krapfen
• Kuchen
• Radar
• Polargebiet
• Blase

Spielen Sie mit Chart.js herum

Obwohl Sie in diesem Lernprogramm nur Linien-, Kreis- und Balkendiagramme kennengelernt haben, folgt das Codemuster zum Zeichnen anderer Diagramme mit chart.js derselben Konvention. Zögern Sie also nicht, auch mit den anderen herumzuspielen.

Wenn Sie jedoch mehr wollen als das, was chart.js bietet, sollten Sie sich vielleicht auch einige andere JavaScript-Diagrammbibliotheken ansehen.

6 JavaScript-Frameworks, die es wert sind, gelernt zu werden

Es gibt viele JavaScript-Frameworks, die bei der Entwicklung helfen. Hier sind einige, die Sie kennen sollten.

Lesen Sie weiter

Über den Autor