Looking for chart.js Answers? Try Ask4KnowledgeBase
Looking for chart.js Keywords? Try Ask4Keywords

chart.jsErste Schritte mit chart.js


Bemerkungen

Chart.js ist eine einfache, aber flexible Open Source-JavaScript-Diagrammbibliothek für Designer und Entwickler.

Informationen zur Version finden Sie in ihrem GitHub

Installation oder Setup

Chart.js kann auf verschiedene Arten eingefügt werden:

NPM

Führen Sie den folgenden Befehl in Ihrem NPM-Projektverzeichnis aus

npm install chart.js --save
 

CDN

Fügen Sie Ihrem HTML-Skript ein Skript-Tag hinzu, das mit dem CDN chart.js verlinkt wird

<html>
   <body>    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
   </body>
</html>
 

Die aktuellste Version finden Sie unter cdnjs.com/libraries/Chart.js .

Lokale Kopie

Eine lokale Kopie kann auch auf Ihrem Server gehostet werden. Sie können die letzte Version von ihrem GitHub erhalten .

<html>
   <body>    
      <script type="text/javascript" src="/Path/To/Chart.bundle.min.js"></script>
   </body>
</html>
 

Weitere Informationen zum Installieren von chart.js finden Sie unter www.chartjs.org/docs/ .

Minimales Diagrammbeispiel

Abhängig von der verwendeten Version von Chart.JS (die aktuelle Version ist 2.X), unterscheidet sich die Syntax, um ein minimales Beispiel für ein Balkendiagramm ( JSFiddle Demo for 2.X ) zu erstellen .

Chart.js 2.X

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
              var ctx = document.getElementById("myChart");
              var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Group 1", "Group 2", "Group 3"],
                      datasets: [{
                          label: 'Groups',
                          data: [12, 19, 3]
                      }]
                  }
              });
        </script>
    </body>
</html>
 

Eine etwas fortgeschrittenere Version davon finden Sie in der chart.js-Dokumentation ( JSFiddle Demo ).


Chart.js 1.X

Wenn Sie jedoch die ältere Version verwenden müssen, schauen Sie sich zuerst die Dokumentation zu Github an .

Hier ist ein minimales Beispiel für ein Balkendiagramm ( JSFiddle Demo ):

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart= new Chart(ctx).Bar({
                labels: ["Group 1", "Group 2", "Group 3"],
                datasets: [
                {
                    label: "Group",
                    data: [12, 19, 3]
                }]
            });
        </script>
    </body>
</html>
 

Eine etwas fortgeschrittenere Version davon finden Sie in der Github-Dokumentation ( JSFiddle-Demo ).