Premiers pas avec chart.js

Installation ou configuration

Chart.js peut être inclus de différentes manières :

MNP

Exécutez la commande suivante sur votre répertoire de projet NPM

npm install chart.js --save

** CDN **

Inclure une balise de script dans votre lien HTML vers le CDN 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>

La dernière version est disponible sur cdnjs.com/libraries/Chart.js.

Copie locale

Une copie locale peut également être hébergée sur votre serveur. Vous pouvez obtenir la dernière version à partir de leur GitHub.

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

Pour plus d’informations sur l’installation de chart.js, consultez www.chartjs.org/docs/.

Exemple de graphique minimal

Selon la version de Chart.JS que vous utilisez (la version actuelle étant 2.X), la syntaxe est différente pour créer un exemple minimal de graphique à barres ([JSFiddle Demo for 2.X](https://jsfiddle. net/ywdguuz7/2/)).

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

Une version légèrement plus avancée de ceci peut être trouvée dans la documentation chart.js ([JSFiddle Demo](https: //jsfiddle.net/ywdguuz7/1/)).

Graphique.js 1.X

Cependant, si vous devez utiliser la version héritée, consultez d’abord la documentation sur Github.

Voici maintenant un exemple minimal d’un graphique à barres (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>

Une version légèrement plus avancée de ceci peut être trouvée dans la documentation Github ([JSFiddle Démo] (https://jsfiddle.net/cocw07xx/1/)).

Plugins →