chart.jsAan de slag met chart.js


Opmerkingen

Chart.js is een eenvoudige maar flexibele open source JavaScript- kaartbibliotheek voor ontwerpers en ontwikkelaars.

Kijk voor versie-informatie op hun GitHub

Installatie of instellingen

Chart.js kan op verschillende manieren worden opgenomen:

NPM

Voer de volgende opdracht uit op uw NPM-projectmap

npm install chart.js --save
 

CDN

Neem een script-tag op in uw HTML-koppeling naar het CD. van chart.js

<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>
 

De nieuwste versie is te vinden op cdnjs.com/libraries/Chart.js .

Lokaal exemplaar

Een lokale kopie kan ook op uw server worden gehost. Je kunt de laatste versie krijgen van hun GitHub .

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

Zie www.chartjs.org/docs/ voor meer informatie over het installeren van chart.js.

Minimaal grafiekvoorbeeld

Afhankelijk van de versie van Chart.JS die u gebruikt (de huidige is 2.X), is de syntaxis anders om een minimaal voorbeeld van een staafdiagram te maken ( JSFiddle Demo voor 2.X ).

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>
 

Een iets meer geavanceerde versie hiervan is te vinden in de chart.js documentatie ( JSFiddle Demo ).


Chart.js 1.X

Als u echter de oudere versie wilt gebruiken, bekijkt u eerst de documentatie op Github .

Hier is een minimaal voorbeeld van een staafdiagram ( 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>
 

Een iets meer geavanceerde versie hiervan is te vinden in de Github-documentatie ( JSFiddle-demo ).