Modifier la couleur d'un graphique en fonction des valeurs

**maithary64** · 10/01/2021, 15h41

Bonjour à tous !
J'ai une question pratique pour la création d'un graphique jauge. J'ai des données contenues dans un JSON que j'importe dans mon graphique jauge. J'aimerais que le graphique jauge change de couleurs en fonction du nombre de places de parking occupées, suivant le système suivant :
- si le total du créneau horaire sélectionné est inférieur à 567 places occupées (soit moins de la moitié du total des places de parkings), la jauge sera en vert
- si le total du créneau horaire sélectionné est compris entre 567 et 850 places occupées (soit entre la moitié et les 3/4 des places de parkings), la jauge sera en orange
- si le total du créneau horaire sélectionné est compris entre 850 et 1133 places occupées (soit entre les 3/4 et la totalité des places de parkings), la jauge sera en rouge
- si le total du créneau horaire sélectionné est supérieur à 1133 places occupées, la jauge sera en noir

Mon JSON se présente ainsi :
Nom : parking.PNG
Affichages : 567
Taille : 13,9 Ko

Nom : parking.PNG
Affichages : 567
Taille : 13,9 Ko

Mon code actuel (cela fonctionne, j'ai bien le nombre de places, mais la couleur reste toujours verte).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
 
  <meta charset="UTF-8">
  <meta name ="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>essai js</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
  <link rel="stylesheet" href="css/monstyle.css">
  <link rel="stylesheet" href="css/Chart.min.css">
  <script src="js/jquery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 
 
 
</head>
 
<body>
 
    <canvas id="myChart" ></canvas>
 
<script>
 
var texteliste=""
  var donnees=[] //var donnees=new Array()
  var date=[]
  var creneauhoraire=[]
  var placesoccupees=[]
 
    $.getJSON("json/parking.json", function(data){
      for(var i=0;i<data.length;i++){
      if (data[i].date=="2020-08-13"& data[i].creneauhoraire=='22h-00h'){
      donnees.push([data[i].creneauhoraire,data[i].placesoccupees])
 
 
 
 
      //console.log(data[i].fields.nombre_plaintes)
      //texteliste+="<li>Année : "+data[i].fields.annee+", nombre de plaintes : "+data[i].fields.nombre_plaintes+"</li>"
        }      
        }
        donnees=donnees.sort()
        console.log(donnees)
 
        var contenudiv=""
        for(var i=0;i<donnees.length;i++){
  creneauhoraire.push(donnees[i][0])
  placesoccupees.push(donnees[i][1])
 
 
        //texteliste+="<li>Année : "+donnees[i][0]+", nombre de plaintes : "+donnees[i][1]+"</li>"
      }
      //  $("#liste").append(texteliste)
 
//}).done(function() {
 
 
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'doughnut',
 
    // The data for our dataset
    data: {
        labels: ['Nombre de places de parkings'],
        datasets: [{
            label: 'Créneau horaire',
            backgroundColor: ['green', 'orange', 'red', 'black'],
            borderColor: ['green', 'orange', 'red', 'black'],
            data: [placesoccupees]
        }]
    },
 
    // Configuration options go here
    options: {
        circumference : 1 * Math.PI,
        rotation : 1 * Math.PI,
            }
});
    })
</script>
<script src="js/Chart.min.js"></script>
</body>
 
</html>

Je pense que je dois créer une fonction et des conditions du style if placesoccupees>567, met toi en vert Mais je sais pas trop comment l'écrire ni où

Merci d'avance !

**mathieu** · 10/01/2021, 22h13

vous pouvez créer la liste des couleurs dans la même boucle où vous créez la liste des valeurs.

je me demandais juste si le choix d'afficher sous forme de camembert est définitif ? étant donné qu'il s'agit d'afficher un taux d'occupation, j'aurais mieux vu un affichage sous forme d'histogramme qui permet de voir la différence de fréquentation entre chaque période comme cela par exemple :
https://jsfiddle.net/qrwvvtxs/3/

**maithary64** · 11/01/2021, 10h08

Bonjour Mathieu,
Merci pour votre retour.
En fait, c'est une jauge que je souhaiterais mettre en place. En fonction du nombre de places occupées, et suivant des modalités déterminées, la jauge aurait telle ou telle couleur et permettrait d'alerter si le seuil d'alerte est dépassé ...

**Toufik83** · 11/01/2021, 11h56

Bonjour,

Pour les couleurs c'est simple, une boucle $.map sur placesoccupees retourne un tableau contenant les couleurs que tu cherches :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
let bgColors=$.map(placesoccupees,function(value,i){
	return value<567?"green":value>567 && value<850?"orange":value>=850&&value<=1133?"red":value>1133?"black":"none";
});

Reste ensuite l'affecter à la propriété backgroundColor de datasets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
datasets: [{
            label: 'Créneau horaire',
            backgroundColor: bgColors,
            borderColor: ['green', 'orange', 'red', 'black'],
            data: placesoccupees //Pas de crochets "[]" ici, seulement placesoccupees
        }]

**maithary64** · 11/01/2021, 13h23

Merci beaucoup pour ton aide, le code proposé fonctionne parfaitement ! Vraiment merci beaucoup ! Je vais essayer de l'adapter pour avoir vraiment ce que je souhaitais, mais ça correspond tout à fait à ce que je recherchais !
Une étape de validée, me reste désormais encore beaucoup d'autres graphiques à faire fonctionner, car ils ne veulent pas fonctionner alors que je n'ai pas de message d'erreur particulier.

Modifier la couleur d'un graphique en fonction des valeurs [Chart.js]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager