Animation: Kuchen, Balken, Diagramme! Chart.js

Chart.js ist eine simple, aber auch flexible Javascript-Bibliothek, die dir ermöglicht, verschiedene Arten an Diagrammen auf deiner Webseite einzubinden.

Installation

Um Chart.js verwenden zu können, kannst du, falls es sich um ein Node-Projekt handelt, die Bibliothek mit folgenden Command installieren:

$ npm install chart.js

Du kannst aber auch die Bibliothek verwenden, indem du diese mit einem script-tag einbindest

Erstellen von Diagrammen

Mit Chart.js hast du eine große Auswahl an Diagrammen, die zur Verfügung gestellt werden. Im Folgenden zeige ich dir, wie du Säulen-, Balken-, Blasen-, Linien-, Kreis- und Donut-Diagramme implementieren kannst.

Um Diagramme verwenden zu können, musst du zuerst ein Canvas-Element in deiner HTML-Datei hinzufügen.

Um ein neues Diagramm zu erstellen, kopierst du folgenden Code in deine Javascript-Datei und tauschst den Selektor mit der ID deines Canvas-Elementes aus.

const myChart = new Chart( document.getElementById('chart'), //Diese Zeile repräsentiert das Canvas-Element config );

Dem Diagramm wird eine Variable namens `config` übergeben, welche alle benötigten Daten für das Diagramm enthält.

Säulen- und Balkendiagramm

​HTML

Javascript

const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ];

const data = { labels: labels, datasets: [{ label: 'My First Dataset', data: [82, 18, 24, 82, 61, 51, 99], backgroundColor: [ 'rgba(245, 218, 40, 0.2)', 'rgba(102, 153, 204, 0.2)', 'rgba(71, 73, 115, 0.2)', 'rgba(22, 27, 51, 0.2)', 'rgba(13, 12, 29, 0.2)' ], borderColor: [ 'rgb(245, 218, 40)', 'rgb(102, 153, 204)', 'rgb(71, 73, 115)', 'rgb(22, 27, 51)', 'rgb(13, 12, 29)' ], borderWidth: 1 }] };

const config = { type: 'bar', data: data, options: { scales: { y: { beginAtZero: true } } }, };

const myChart = new Chart( document.getElementById('chart'), config );

Um anstelle eines Säulendiagrammes ein Balkendiagramm darzustellen, muss in der config `indexAxis` auf `true` gesetzt werden.

const config = { type: 'bar', data, options: { indexAxis: 'y', } };

Blasendiagramm

HTML

Javascript

const data = { datasets: [{ label: 'First Dataset', data: [{ x: 38, y: 40, r: 90 }, { x: 21, y: 34, r: 76 }], backgroundColor: 'rgb(245, 218, 40)' }] };

const config = { type: 'bubble', data: data, options: {} };

const myChart = new Chart( document.getElementById('chart'), config );

Liniendiagramm

HTML

Javascript

const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ];

const data = { labels: labels, datasets: [{ label: 'My First Dataset', data: [23, 46, 97, 34, 1, 24, 46], fill: false, borderColor: 'rgb(245, 218, 40)', tension: 0.1 }] };

const config = { type: 'line', data: data, };

const myChart = new Chart( document.getElementById('chart'), config );

Kreis- und Donutdiagramm

HTML

Javascript

const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [315, 65, 24], backgroundColor: [ 'rgb(245, 218, 40)', 'rgb(102, 153, 204)', 'rgb(71, 73, 115)' ], hoverOffset: 4 }] };

const config = { type: 'pie', data: data, };

const myChart = new Chart( document.getElementById('chart'), config );

Um aus dem Kreisdiagramm ein Donutdiagramm zu machen, muss nur der Typ in der Config
geändert werden.

const config = { type: 'doughnut', data: data, };

Falls du dich mehr mit Chart.js auseinandersetzen möchtest, kannst du dir die Docs durchlesen.