Couleur dans graphique bar en focntion de la valeur

[jmv75013]

Bonjour,

Je cherche à afficher un graphique présentant le risque d'allergies au pollen. Les données proviennent du site www.pollens.fr. Voici le résultat

image.png

C'est presque le résultat que je souhaite sauf que je voudrais affecter une couleur en fonction du niveau (Vert claire pour 1, Vert foncé pour 2, ...) et la.... je ne m'en sors pas.

En fouillant dans les différents sites et la doc voici le code javascript que j'utilise pour obtenir le résultat, il ne tiens pas compte des informations de couleur mises dans plotoptions. Quelqu'un peux m'aider car j?

Code : Tout sélectionner

$(document).ready(function() {  
    var seriesNom = [];
	var seriesData= [];k
	var arrData = [];
	
	var requestURL = 'https://www.pollens.fr/risks/thea/counties/27';
	var request = new XMLHttpRequest();
	request.open('GET', requestURL);
	request.responseType = 'text'; // now we're getting a string!
	request.send();

	request.onload = function() {
		var json = request.response; // get the string from the response
		var obj = JSON.parse(json); // convert it to an object
		var risk = obj['risks'];
		for (var i = 0; i < risk.length; i++) {
			seriesNom.push(risk[i].pollenName);
 			arrData.push(risk[i].level);
			seriesData = [{
					data: arrData,
					borderWidth: 2
			}];	
		}
		
		var dept = obj['countyName'];
		var level= obj['riskLevel'];
		var titre = 'Niveau global = ' + level;
		var divID = '#popup_pollens';
		createGraphPollen(divID, seriesNom, seriesData, dept, titre);	
	}

})

function createGraphPollen(divID, seriesNom, seriesData, dept, vdesc) {// create graph
	console.clear;
	console.log(seriesData);
	console.table(seriesData);
	$(divID).highcharts({
        chart: { type: 'bar' },
		
		plotOptions: {
			bar: {
				colorByPoint: true
 			},
			series: {
				zones: [ {
					color: '#00FF00',
					value: 1
				}, {
					color: '#0B610B',
					value: 2
				}, {
					color: '#F7FE2E',
					value: 3
				}, {
					color: '#FFBF00',
					value: 4
				}, {
					color: '#FF0000',
					value: Number.MAX_VALUE
            }]
			}
		},
			
        title: { text: dept },
        subtitle: { text: vdesc },		
        legend: { enabled: false },
        credits: { enabled: false },
		
	    xAxis: { categories: seriesNom },
		
	    yAxis: {
			min: 0,
			max: 5,
			allowDecimals: false,
			title: {
				text: 'Niveau de risque',
				align: 'high'
			},

		},

      series: seriesData

    });	
}

Merci

[Météo Villarzel]

Salut,
je n'ai rien trouvé dans les API, mais en passant par du css c'est possible
exemple à creuser
https://jsfiddle.net/paaubert/7d69w0nq/41/

A+

[jmv75013]

Bonjour,

Merci pour ta réponse, je vais essayer d'adapter cela.

[jmv75013]

RE-bonjour,

Nickel avec un peu de css cela fonctionne, merci beaucoup.
Le code js

Code : Tout sélectionner

$(document).ready(function() {  
    	var seriesNom = [];
	var seriesData= [];
	var arrData = [];
	
	var requestURL = 'https://www.pollens.fr/risks/thea/counties/12';
	var request = new XMLHttpRequest();
	request.open('GET', requestURL);
	request.responseType = 'text'; // now we're getting a string!
	request.send();

	request.onload = function() {
		var json = request.response; // get the string from the response
		var obj = JSON.parse(json); // convert it to an object
		var risk = obj['risks'];
		for (var i = 0; i < risk.length; i++) {
			seriesNom.push(risk[i].pollenName);
 			arrData.push(risk[i].level);
			seriesData = [{
					data: arrData,
			}];	
		}
		
		var dept = obj['countyName'];
		var level= obj['riskLevel'];
		var titre = 'Niveau global = ' + level;
		var divID = '#popup_pollens';
		createGraphPollen(divID, seriesNom, seriesData, dept, titre);	
	}

})

function createGraphPollen(divID, seriesNom, seriesData, dept, vdesc) {// create graph
	console.clear;
	console.log(seriesData);
	console.table(seriesData);
	$(divID).highcharts({
        chart: { 
		type: 'bar',
        styledMode: true
		},
		
		plotOptions: {

			series: {
				zones: [ {
					value: 1,
					className: 'zone-0'
				}, {
					value: 2,
					className: 'zone-1'
				}, {
					value: 3,
					className: 'zone-2'
				}, {
					value: 4,
					className: 'zone-3'
				}, {
					value: 5,
					className: 'zone-4'
				}, {					
					value: Number.MAX_VALUE,
 					className: 'zone-5'
				}]
			}
		},
			
        title: { text: dept },
        subtitle: { text: vdesc },		
        legend: { enabled: false },
        credits: { enabled: false },
		
	    xAxis: { categories: seriesNom },
		
	    yAxis: {
			min: 0,
			max: 5,
			allowDecimals: false,
			title: {
				text: 'Niveau de risque',
				align: 'high'
			},

		},

      series: seriesData

    });	
}

le css associé

Code : Tout sélectionner

#popup_pollens {
width: 250px;
}

.highcharts-point.zone-1 {
	fill: lime;
}
.highcharts-point.zone-2 {
	fill: green;
	border: 0;
}
.highcharts-point.zone-3 {
	fill: yellow;
}
.highcharts-point.zone-4 {
	fill: darkOrange;
}
.highcharts-point.zone-5 {
	fill: red;
}

le résultat

[Météo Villarzel]

Superbe, dommage que je ne trouve pas de fichier équivalent pour la suisse, autrement je t'aurais piqué ton idée.

Bonne continuation

[PascalWMR]

Salut à tous

C'est pas mal ce truc. J'adopte

A+
Pascal

[muchistic]

Bonjour à tous

effectivement , pas mal du tout et merci pour le partage !

Dominique