[Chart.js] Changer la couleur de la bar selon la valeur de la serie

Changer la couleur de la bar selon la valeur de la serie

Bonjour à tous
J'essai de construire un graphique à partir de données provenant d'une requête SQL. Il s'agit d'un graphique mixte (linéaire et barre).
Tout se passe bien et mon graphique s'affiche correctement, sauf que je souhaiterai changer la couleur des barres en fonction des valeurs de la série concernée.

Par exemple, je souhaiterai que la barre passe rouge si la valeur de la barre est supérieure a la valeur de max de la même série.

Je n'arrive pas à le faire, les réponses que je trouve font référence à des graphique simple et non combiné comme dans mon cas. Je me tourne donc vers vous.

Ci dessous mon code :

Code:

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
function mychart(test) {
    var ops = [];
    var serie = [];
    var min = [];
	var max = [];
 
	for (var i in test) {
		ops.push(test[i].ops);
        serie.push(test[i].serie);
        min.push(test[i].min);
        max.push(test[i].max);
    }
 
	var chartdata = {
		labels: ops,
		datasets: [
			{
				type: 'line',
				label: 'Min',
				yAxisID: 'A',
				backgroundColor: "rgb(255, 0, 0)",
				borderColor: "rgb(255, 0, 0)",
				data: min //la valeur mini a comparer avec la valeur de serie
			}, {
				type: 'line',
				label: 'Max',
				yAxisID: 'A',
				backgroundColor: "rgb(255, 255, 0)",
				borderColor: "rgb(255, 255, 0)",
				data: max //la valeur maxi a comparer avec la valeur de serie
			}, {
				type: 'bar',
				label: 'Serie',
				yAxisID: 'A',
				backgroundColor: "rgb(0, 0, 255)", // changer couleur si valeur serie inferieure ou superieur a maxi
				data: serie //la valeur serie a comparer avec les valeurs mini et maxi
			}
		]
    };
    rendertest(chartdata);
}
 
function rendertest(chartdata) {
	var delayed;
    var ctx = document.getElementById("charttest").getContext('2d');
    window.myCharta = new Chart(ctx, {
		type: 'bar',
		data: chartdata,
		options: {
			responsive: true,
			plugins: {
				legend: {
                    display: true,
                    position: 'bottom',
                },
				title: {
					display: true,
					position: 'top',
					align: "start",
					text: 'Graphique test',
					font: {
						size: 20,
						family : 'sans-serif',
						color: "#666",
						weight: "normal"
					}
				},
			},
			animation: {
				onComplete: () => {
					delayed = true;
				},
				delay: (context) => {
					let delay = 0;
					if (context.type === 'data' && context.mode === 'default' && !delayed) {
						delay = context.dataIndex * 300 + context.datasetIndex * 100;
					}
					return delay;
				},
			},
			maintainAspectRatio: true
		}
	});
}

Merci d'avance pour votre aide

Cordialement

Bonjour,

Quelle est la structure et les valeurs du paramètre test de la fonction mychart(test) ?

Bonjour

Ci dessous la structure :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
    {
        "ops": "Ops1",
        "serie": 0.23,
        "max": 0.49,
        "min": 0.42
    },
    {
        "ops":  "Ops2",
        "serie": 0.19,
        "max":  0.49,
        "min":  0.42
    }
]

Merci

Bonjour,

Si je comprends bien cette fonction pourrait être utile :

Code:

1
2
3
4
5
6
let setColor=function(mx,ser){
    return ser.map((value,index)=>{
  	 console.log(value,mx[index]);
         return value>mx[index]?"rgb(255, 0, 0)":"green";
    }) ;
}

Puis vous appelez la fonction en l'affectant à la propriété backgroundColor du 3éme élément :

Code:

1
2
3
4
5
6
7
{
	type: 'bar',
	label: 'Serie',
	yAxisID: 'A',
	backgroundColor: setColor(max,serie), // changer couleur si valeur serie inferieure ou superieur a maxi
	data: serie //la valeur serie a comparer avec les valeurs mini et maxi
}

Merci pour ton aide, c'est parfait!