javascript - tag - del verde al rojo dependen del porcentaje

title html w3schools

Question

Tengo un sistema de encuesta y quiero que las respuestas para esta encuesta sean de color. Por ejemplo: si es 10% sería rojo, si 40% sería amarillo y 80% sería verde, entonces quiero que mi código de JavaScript use los colores rgb para hacer un color de acuerdo con el porcentaje dado.

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();
}  

Ahora quiero el hexadecimal por ciento.

Answer 1

Basado en la respuesta de Jacobs hice una barra de carga. Este es de verde a rojo, pero puedes cambiar los colores. Para los interesados ​​aquí está mi código y jsfiddle ( http://jsfiddle.net/rxR3x/ )

var percentColors = [
    { pct: 0, color: ''#00FF00'' },   { pct: 3, color: ''#12FF00'' },   { pct: 6, color: ''#24FF00'' },
    { pct: 10, color: ''#47FF00'' },  { pct: 13, color: ''#58FF00'' },  { pct: 16, color: ''#6AFF00'' },
    { pct: 20, color: ''#7CFF00'' },  { pct: 23, color: ''#8DFF00'' },  { pct: 26, color: ''#9FFF00'' },
    { pct: 30, color: ''#B0FF00'' },  { pct: 33, color: ''#C2FF00'' },  { pct: 36, color: ''#D4FF00'' },
    { pct: 40, color: ''#E5FF00'' },  { pct: 43, color: ''#F7FF00'' },  { pct: 46, color: ''#FFF600'' },
    { pct: 50, color: ''#FFE400'' },  { pct: 53, color: ''#FFD300'' },  { pct: 56, color: ''#FFC100'' },
    { pct: 60, color: ''#FFAF00'' },  { pct: 63, color: ''#FF9E00'' },  { pct: 66, color: ''#FF8C00'' },
    { pct: 70, color: ''#FF7B00'' },  { pct: 73, color: ''#FF6900'' },  { pct: 76, color: ''#FF5700'' },
    { pct: 80, color: ''#FF4600'' },  { pct: 83, color: ''#FF3400'' },  { pct: 86, color: ''#FF2300'' },
    { pct: 90, color: ''#FF1100'' },  { pct: 93, color: ''#FF0000'' },  { pct: 96, color: ''#FF0000'' },
    { pct: 100, color: ''#FF0000'' }
];
var getColorPercent = function(selector, percent, time){
    var i = 0;
    var percentInterval = setInterval(function() {
         i++;
         if(percent >= percentColors[i].pct) {
            console.log(percentColors[i].color);
            $(selector).css(''background-color'', percentColors[i].color);
        }
        if(percentColors[i].pct>=percent) {
            clearInterval(percentInterval);
        }
    }, time/25);
    $(selector).animate({width:(200/100)*percent}, time);
}
getColorPercent(''#loadbar_storage'', 100, 1500);

Answer 2

El código de Mattisdada fue realmente útil para mí mientras hacía una tabla para mostrar las estadísticas de algunos resultados de la prueba. Lo modifiqué un poco para permitir el "recorte" del porcentaje (no estoy seguro de cuál es el término correcto) y también para trabajar en ambos sentidos a lo largo de la rueda de color, por ejemplo, del verde (120) al rojo (0) y viceversa.

function pickColourByScale(percent, clip, saturation, start, end)
{
    var a = (percent <= clip) ? 0 : (((percent - clip) / (100 - clip))),
        b = Math.abs(end - start) * a,
        c = (end > start) ? (start + b) : (start - b);
    return ''hsl('' + c + '',''+ saturation +''%,50%)'';
}

Básicamente, al establecer un valor porcentual para recortar la escala en, todo lo que esté por debajo de ese valor se coloreará como color de inicio. También recalcula la escala de acuerdo con 100% - clip.

Veamos un escenario de ejemplo donde ingreso los siguientes valores:

• por ciento: 75
• clip: 50
• saturación: 100 (sin importancia, uso esto para resaltar un gráfico Chart.js)
• inicio: 0 (rojo)

• final: 120 (verde)

  1. Compruebo si el porcentaje es menor que el clip, y devuelvo 0% si es así. De lo contrario, recalculo el porcentaje: el 75% está a medio camino entre el 50% y el 100%, así que obtengo el 50%. Esto me da 0.5.
  2. Obtengo la diferencia entre el comienzo y el final. Necesitas usar Math.abs () en caso de que tu valor de inicio de matiz sea mayor que tu valor de matiz final. Luego multiplico la diferencia por el resultado obtenido en el paso 1 para ver cuánto necesito para compensar el valor de tono de inicio.
  3. Si el valor de inicio es más que el valor final, entonces necesita moverse a lo largo de la rueda de color en la dirección opuesta. Sume o reste del valor de inicio en consecuencia.

Termino con amarillo, que está a medio camino entre rojo y verde. Si no hubiera hecho el recálculo en el paso 1, habría terminado con un color más verdoso, lo que podría ser engañoso.

Answer 3

Este método funciona bien en este caso (porcentaje de 0 a 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

Esto es lo que se me ocurrió:

function rgbify(maxval, minval, val, moreisgood) {
    var intnsty = (val - minval) / (maxval - minval);
    var r, g;
    if (moreisgood) {
        if (intnsty > 0.5) {
            g = 255;
            r = Math.round(2 * (1 - intnsty) * 255);
        } else {
            r = 255;
            g = Math.round(2 * intnsty * 255);
        }

    } else { //lessisgood
        if (intnsty > 0.5) {
            r = 255;
            g = Math.round(2 * (1 - intnsty) * 255);
        } else {
            g = 255;
            r = Math.round(2 * intnsty * 255);
        }
    }
    return "rgb(" + r.toString() + ", " + g.toString() + ", 0)";
}

jsfiddle

La bandera moreisgood alterna si los valores más altos deben ser rojos o verdes. maxval y minval son los valores de umbral para su rango. val es el valor que se convertirá a rgb

Answer 5

Esto puede ser más de lo que necesita, pero esto le permite configurar cualquier mapa de color arbitrario:

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 6

HSL funcionará en IE8 usando jquery-ui-1.10.4.

Modifiqué la respuesta de jongo45 para aceptar la ligereza en la función.

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

Answer 7

Las respuestas dadas son ridículamente complejas. Puede hacer esto en 4 líneas de código (sin incluir comentarios).

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
      b = (end - start) * a,
      c = b + start;

  // Return a CSS HSL string
  return ''hsl(''+c+'', 100%, 50%)'';
}
//Change the start and end values to reflect the hue map
//Refernece : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png

/*
Quick ref:
    0 – red
    60 – yellow
    120 – green
    180 – turquoise
    240 – blue
    300 – pink
    360 – red
*/      

Ejemplo: http://jsfiddle.net/x363g1yc/135/

No hay necesidad de mapas de color .... (A menos que sea un cambio de color no lineal, que no se solicitó)

Advertencia: Esto no es compatible con IE8 o inferior. (Gracias Bernhard Fürst)

Answer 8

Modifique estas dos líneas en el código de Jacob:

var lower = percentColors[i - 1];
var upper = percentColors[i];

a:

var lower = (i === 0) ?  percentColors[i] : percentColors[i - 1];
var upper = (i === 0) ? percentColors[i + 1] : percentColors[i];

si desea que funcione para los dos extremos (es decir, 0.0 y 1.0).

Answer 9

Sé que esto es una especie de cambio de tema, pero encontré una forma más de hacerlo.

Para hacer esto, también puede crear un lienzo dinámico de dimensión 100x1 y aplicarle degradado y luego desde la función solo necesita obtener el color de píxel de la ubicación porcentual.

Aquí está el código: Esto es global:

/* dynamic canvas */

// this should be done once in a page so out of function, makes function faster
var colorBook = $(''<canvas />'')[0];
colorBook.width = 101;
colorBook.height = 1;
var ctx = colorBook.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 101, 0);
grd.addColorStop(0, "rgb(255,0,0)"); //red
grd.addColorStop(0.5, "rgb(255,255,0)"); //yellow
grd.addColorStop(1, "rgb(0,255,0)"); //green    
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 101, 1);

Entonces la función:

function getColor(value) {
  return ''rgba('' + ctx.getImageData(Math.round(value), 0, 1, 1).data.join() + '')'';
}

Demostración: https://jsfiddle.net/asu09csj/

Answer 10

Un esquema simple usando HSL junto con violín:

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

ajustar la saturación y la luminosidad según sea necesario. y un fiddle

Answer 11

function hexFromRGBPercent(r, g, b) {
    var hex = [
        Math.floor(r / 100 * 255).toString( 16 ),
        Math.floor(g / 100 * 255).toString( 16 ),
        Math.floor(b / 100 * 255).toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

El crédito va para andrew. Él fue más rápido.