Cours 11 | Diagrammes¶

Où en sommes nous dans la session :

Chartjs¶

Chart.js est une librairie qui permet d'ajouter des diagrammes dans une page Web. La librairie utilise la balise HTML canvas.

C'est une alternative moins complexe à D3.

Installation¶

Si ce n'est déjà fait

npm init -y

npm i chart.js

Attention au nom du package

Il existe aussi le package chartjs, mais ce n'est pas la bonne librairie.

npm i chart.js

npm i chartjs

HTML

<html>
  <head>

    <script type="importmap">
      {
        "imports": {
          "chart.js/auto": "./node_modules/chart.js/auto/auto.js",
          "@kurkle/color": "./node_modules/@kurkle/color/dist/color.esm.js"
        }
      }
    </script>

    <script type="module" src="chart.js"></script>

  </head>
  <body>

    <canvas id="mon-graphique"></canvas>

  </body>
</html>

chart.js

import { Chart } from 'chart.js/auto';

let configurations = {
  type: "line",
  data: {
    // Données
  },
  options: {
    // Affichage
  }
};

const contexte = document.querySelector('#mon-graphique').getContext("2d");
new Chart(contexte, configurations);

Dans chaque graphique, il y a un type, des données (data), des options d'affichage et, optionnellement, des plugins.

Code minimal : https://codepen.io/tim-momo/pen/JoXoOaX
Plus d'options : https://codepen.io/tim-momo/pen/LEGwPay

Graphique à barres¶

Graphique en lignes¶

Graphique en nuage de points¶

Graphique à bulles¶

Graphiques en anneau et tarte¶

Graphique polaire¶

Graphique radar¶

Animation¶

Ajouter le graphique dans une variable pour le rendre accessible.
Ensuite, pour chaque dataset du graphique, on peut appliquer des valeurs différentes sur chacun des axes.
Enfin, la méthode update() permet d'appliquer le changement et l'animation s'appliquera.

L'animation peut se faire de 2 façons. Soit par une action, soit automatiquement. Dans le deux cas, c'est le même principe.

Événement

document.body.addEventListener("click", () => {

  for (const ds of graphique.data.datasets) {
    for (let i = 0; i < ds.data.length; i++) {
      ds.data[i].y = Math.round(Math.random() * 2000);
    }
  }
  graphique.update();

});

Temps

setInterval(() => {

  for (let ds of graphique.data.datasets) {
    for (let i = 0; i < ds.data.length; i++) {
      ds.data[i].y = Math.round(Math.random() * 2000);
    }
  }
  graphique.update();

}, 500);

Au lieu d'un interval JavaScript, on peut aussi utilise un callback d'AnimeJS.

Vitesse d'animation

Dans les options d'un graphique, on peut aussi ajuster la durée de l'animation.

options: {
  animation: {
    duration: 10000,
    easing: 'easeIn'
  },
}

Les options de lissage chart.js sont spécifiées ici : https://www.chartjs.org/docs/latest/configuration/animations.html#easing.

Dégradé de couleurs¶

Exemple

const ctx2d = document.querySelector("#chart123").getContext("2d");
const chart123 = new Chart(ctx2d, {
  type: "line",
  data: {
    datasets: [
      {
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3 y: 6}],
        fill: true,
        borderColor: "rgba(239, 85, 82, 1)",

        // 👇 Inspiré de : https://www.chartjs.org/docs/latest/samples/advanced/radial-gradient.html
        backgroundColor: (ctx) => {
          const { ctx: c, chartArea } = ctx.chart;
          if (!chartArea) return;
          const g = c.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
          g.addColorStop(0, "rgba(239, 85, 82, 0.25)");
          g.addColorStop(1, "rgba(239, 85, 82, 0)");
          return g;
        }

      }
    ]
  },
  options: {
    //...
  }
});