Chart.js

Chart.js est une bibliothèque JavaScript gratuite pour créer des graphiques basés sur HTML.

C'est l'une des bibliothèques JavaScript de visualisation les plus simples, et elle contient les types de graphiques intégrés suivants :

  • Scatter Plot
  • Line Chart
  • Bar Chart
  • Pie Chart
  • Donut Chart
  • Bubble Chart
  • Graphique en surface (Area Chart)
  • Graphique radar (Radar Chart)
  • Graphique mixte (Mixed Chart)

Comment utiliser Chart.js?

Chart.js est facile à utiliser.

Tout d'abord, ajoutez un lien vers le CDN (Content Delivery Network):

<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>

Ensuite, ajoutez <canvas> à l'emplacement où vous souhaitez dessiner le graphique:

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

L'élément canvas doit avoir un id unique.

Voici comment!

Syntaxe typique de diagramme de points:

const myChart = new Chart("myChart", {
  type: "scatter",
  data: {}
  options: {}
});

Syntaxe typique de graphique en ligne:

const myChart = new Chart("myChart", {
  type: "line",
  data: {}
  options: {}
});

Syntaxe typique de graphique en barres:

const myChart = new Chart("myChart", {
  type: "bar",
  data: {}
  options: {}
});

Diagramme de points

Prix de l'immobilier vs. Surface

Code source

const xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];
new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgba(0,0,255,1)",
      data: xyValues
    }]
  ,
  options:{...}
});

Essayer par vous-même

Graphique en ligne

Prix de l'immobilier vs. Surface

Code source

const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor:"rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  ,
  options:{...}
});

Essayer par vous-même

Si vous définissez borderColor sur 0si, alors il est possible de dessiner un graphique en ligne en tant que diagramme de points:

borderColor: "rgba(0,0,0,0)",

Essayer par vous-même

multiligne

Code source

const xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    },{
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    },{
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  ,
  options: {
    legend: {display: false}
  }
});

Essayer par vous-même

Graphique linéaire

Code source

const xValues = [];
const yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);
new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      pointRadius: 1,
      borderColor: "rgba(255,0,0,0.5)",
      data: yValues
    }]
  ,
  options: {...}
});
function generateData(value, i1, i2, step = 1) {
  for (let x = i1; x <= i2; x += step) {
    yValues.push(eval(value));
    xValues.push(x);
  }
}

Essayer par vous-même

Graphique de fonction

Comme le graphique linéaire. Il suffit de changer les paramètres generateData :

generateData("Math.sin(x)", 0, 10, 0.5);

Essayer par vous-même

Graphique en barres

Code source

var xValues = ["Italie", "France", "Espagne", "États-Unis", "Argentine"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green", "blue", "orange", "brown"];
new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  ,
  options: {...}
});

Essayer par vous-même

Colorer une seule barre :

var barColors = ["blue"];

Essayer par vous-même

Toutes les barres ont une seule couleur :

var barColors = "red";

Essayer par vous-même

différentes couleurs de profondeur :

var barColors = [
  "rgba(0,0,255,1.0)",
  "rgba(0,0,255,0.8)",
  "rgba(0,0,255,0.6)",
  "rgba(0,0,255,0.4)",
  "rgba(0,0,255,0.2)",
];

Essayer par vous-même

graphique en barres horizontales

seulement en changeant type par "bar" modifié en "horizontalBar"：

type: "horizontalBar",

Essayer par vous-même

diagramme en cercle

instance

new Chart("myChart", {
  type: "pie",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  ,
  options: {
    title: {
      display: true,
      text: "Production mondiale de vin"
    }
  }
});

Essayer par vous-même

diagramme en cercle

seulement en changeant type par "pie" modifié en "doughnut"：

type: "doughnut";

Essayer par vous-même