Mit Chart JS beginnen

Dies ist der vorgefertigte Code, um die Blöcke sofort zu erstellen. Dies ist die Grundlage von Chart JS. Um damit zu beginnen, stellen Sie sicher, dass Sie dies bereit haben.

How to use the config, render and setup block to draw a chart in Chart JS

Erste Schritte mit Chart JS

Kopiere einfach den folgenden Code, und es wird sofort ein Diagramm erstellt. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Getting Started with Chart JS with www.chartjs3.com</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }
      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="chartMenu">
      <p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p>
    </div>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
    <script>
    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

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

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

    // Instantly assign Chart.js version
    const chartVersion = document.getElementById('chartVersion');
    chartVersion.innerText = Chart.version;
    </script>

  </body>
</html>

Chart-JS-Blöcke

Die Chart JS-Dokumentation geht in Richtung Blöcke. Standardmäßig gibt es 3 Blöcke. Dies sind der Einrichtungs- oder Datenblock, der Konfigurationsblock und der Render- oder Initialisierungsblock. Diese 3 Blöcke gelten als das Grundgerüst eines Diagramms.

Du kannst bei Bedarf weitere Blöcke hinzufügen. Zusätzliche Blöcke werden in der Regel hinzugefügt, wenn bestimmte Teile umfangreicher werden.

Einrichtungsblock oder Datenblock

Der Einrichtungsblock wird auch als Datenblock betrachtet. Dieser Block ist im Wesentlichen eine Konstante (Variable), die mehrere JavaScript-Objekte im Zusammenhang mit den Daten enthält. Dies kann alles Mögliche sein, von Datenpunkten über Beschriftungen bis hin zu Hintergrundfarben, Hover-Farben und mehr.

Auch andere Konstantenwerte, die sich auf die Werte oder Datenpunkte eines Diagramms beziehen, können hier platziert werden. Der Einrichtungsblock oder Datenblock-Code sieht so aus und sollte immer der erste Teil sein, der geladen wird. Denn alle anderen Blöcke sind vom Datenblock abhängig. 

    // setup 
    const data = {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 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)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

Konfigurationsblock

Der Konfigurationsblock enthält alle Konfigurationen eines Diagramms. Der Konfigurationsblock sollte vor dem Render-Block platziert werden, da dieser Block oft von der Datenblock abhängt, aufgrund der data .

Die drei Hauptteile sind der Diagrammtyp, die Optionen und die Datenvariable, die auf den Einrichtungs- oder Datenblock verweist. Sie können im Code sehen, dass der "data" ist eine Variable, die ES6-JavaScript-Code verwendet. 

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

Wir verwenden "data" nur, wenn der Objektwert GLEICH der Konstantenvariable ist. Wenn die Konstante und die Objektvariable identisch sind, können wir dies tun. Dies bedeutet, dass der obere Text eine verkürzte Schreibweise ist.

Wenn die Konstante in diesem Fall unterschiedlich ist, müssen wir den Code vollständig wie folgt schreiben. Sie sehen nun, dass sich die Konstante und der Objektwert unterscheiden, sodass wir den Code umfangreicher schreiben müssen. Siehe unten. 

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

Render-Block oder Initialisierungsblock

Der letzte Block, der immer zuletzt stehen sollte, ist der Render- oder Initialisierungsblock. Dieser Block zeichnet das Diagramm auf der Leinwand basierend auf dem gesamten oben stehenden Code. Das bedeutet, dass jeder Block geladen werden muss, bevor dieser Block geladen wird. Andernfalls würde dies einen Fehler verursachen und könnte bestimmte Codeblöcke ausschließen. 

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

Der getElementById-Code bezieht sich auf die Canvas-ID, die im HTML-Dokument benannt ist. In diesem Beispiel ist sie als "myChart" benannt, aber du kannst dies jederzeit nach deinen Wünschen ändern. Stelle einfach sicher, dass du den Namen der Canvas-ID korrekt abgleichst.

War diese Seite hilfreich?
Ja 22 Nein 12

2 Antworten auf „Getting Started“

Schreiben Sie einen Kommentar