Chart.js-Verwendung

Um ein Diagramm mit Chart.js zu erstellen, müssen Sie die Chart-Klasse initialisieren und den Diagramm-Node übergeben:

HTML-Canvas-Code, die Anzeigeposition des Diagramms:

<canvas id="myChart" width="400" height="400"></canvas>

Den Node auf verschiedene Arten abrufen:

Initialisierungsmethode

// Alle folgenden Methoden funktionieren
const ctx = document.getElementById('myChart');  // Node abrufen
const ctx = document.getElementById('myChart').getContext('2d');  // Die getContext()-Methode gibt den Canvas-Kontext zurück
const ctx = $('#myChart'); // Abruf über jQuery
const ctx = 'myChart'; // Node-ID übergeben

Nachdem wir den Elementknoten mit dem obigen Code erhalten haben, können wir unsere eigenen Diagrammtypen erstellen.

Im folgenden Beispiel erstellen wir ein einfaches Liniendiagramm:

Beispiel

const ctx = document.getElementById('myChart');
const labels = ['January', 'February', 'March','April', 'Mai', 'Juni', 'Juli'];  // Setze die entsprechenden Beschriftungen auf der X-Achse
const data = {
  labels: labels,
  datasets: [{
    label: 'Mein erstes Liniendiagramm',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // Setze die Linienfarbe
    tension: 0.1
  }]
};
const config = {
  type: 'line', // Setze den Diagrammtyp
  data: data,
};
const myChart = new Chart(ctx, config);

Selbst ausprobieren »

Die Ausgabe des obigen Beispiels ist:

Das folgende Beispiel erstellt ein Balkendiagramm, das Stimmen in verschiedenen Farben anzeigt.

Beispiel

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Rot', 'Blau', 'Gelb', 'Grün', 'Lila', 'Orange'],
        datasets: [{
            label: '# Stimmen',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Selbst ausprobieren »

Die Ausgabe des obigen Beispiels ist:

Struktur des Konfigurationsobjekts

Die allgemeine Struktur des Konfigurationsobjekts ist wie folgt:

const config = {
  type: 'line'
  data: {}
  options: {}
  plugins: []
}

Parameterbeschreibung:

  • type-- Gibt den Diagrammtyp an
  • data-- Der im Diagramm angezeigte Datensatz
  • options-- Einige optionale Konfigurationen; verschiedene Diagrammtypen haben unterschiedliche Konfigurationen
  • plugins-- Plugins
Andere Erweiterungen