du vert au rouge selon le pourcentage

Question

J'ai un système de sondage et je veux que les réponses à ce sondage soient colorées. Par exemple : si c'est 10% ce serait du rouge, si 40% ce serait du jaune et si 80% ce serait du vert, donc je veux que mon code javascript utilise les couleurs rgb pour faire une couleur selon le pourcentage donné.

 function hexFromRGB(r, g, b) {
    var hex = [
        r.toString( 16 ),
        g.toString( 16 ),
        b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}  

Maintenant, je veux un sort de pourcentage.

Answer 1

Un schéma simple utilisant HSL avec violon :

 function getColor(value){
    //value from 0 to 1
    var hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

ajustez la saturation et la luminosité au besoin. et un violon .

 function getColor(value) {
  //value from 0 to 1
  var hue = ((1 - value) * 120).toString(10);
  return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
  var value = i / len;
  var d = document.createElement('div');
  d.textContent = "value=" + value;
  d.style.backgroundColor = getColor(value);
  document.body.appendChild(d);
}

Answer 2

C'est peut-être plus que ce dont vous avez besoin, mais cela vous permet de configurer n'importe quelle palette de couleurs arbitraire :

 var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
};

Answer 3

Cette méthode fonctionne bien dans ce cas (pourcentage de 0 à 100) :

 function getGreenToRed(percent){
            r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
            g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
            return 'rgb('+r+','+g+',0)';
        }

Answer 4

Je sais que c'est à l'origine une vieille question javascript, mais je suis arrivé ici à la recherche d' une solution CSS uniquement , alors peut-être que cela aidera les autres également : C'est en fait assez simple :

Utilisez le pourcentage comme valeur de couleur HSL ! Le rouge au vert s'étend sur H de 0 à 128 (vous pouvez donc augmenter le pourcentage de 1.2 si vous le souhaitez). Exemple:

 background-color:hsl(perc,100%,50%);

Où perc est juste le nombre, sans le signe %