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 : 686 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 !