Animation: Kuchen, Balken, Diagramme! Chart.js

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 

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.

<canvas id="chart"></canvas> 

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

<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 

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

<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 

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

<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 

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

<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 

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.