От зеленого до красного цвета зависит от процента

У меня есть система опроса, и я хочу, чтобы ответы на этот опрос были окрашены. Например: если это 10%, это будет красным, если 40% будет желтым, а если 80% - зеленым, я хочу, чтобы мой код javascript использовал цвета rgb, чтобы сделать цвет в соответствии с данным процентом.

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

Теперь я хочу шестнадцатеричный процент.

ОТВЕТЫ

Ответ 1

Это может быть больше, чем вам нужно, но это позволяет вам настроить любую произвольную цветовую карту:

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
}

Ответ 2

Простая схема с использованием HSL вместе со скрипкой:

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

При необходимости измените насыщенность и яркость. и fiddle.

Ответ 3

Вы можете сделать это в нескольких строках кода (не включая комментарии) без необходимости в каких-либо цветовых картах.

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
*/

Пример: https://jsfiddle.net/x363g1yc/634/

Нет необходимости в цветовых картах (если это не нелинейное изменение цвета, которое не было задано)

Предупреждение. Это несовместимо с IE8 или ниже. (Спасибо Bernhard Fürst)

Ответ 4

Этот метод хорошо работает в этом случае (в процентах от 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)';
        }

Ответ 5

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

Кредит идет к andrew. Он был быстрее.

Ответ 6

Измените эти две строки в коде Джейкоба:

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

в

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

если вы хотите заставить его работать для двух крайних значений (то есть 0.0 и 1.0).

Ответ 7

На основании ответа Якоба я создал грузовик. Это от зеленого до красного, но вы можете изменить цвета. Для интересующихся здесь мой код и 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);

Ответ 8

HSL будет работать в IE8 с помощью jquery-ui-1.10.4.

Я модифицировал jongo45 ответ, чтобы принять легкость в функции.

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

Ответ 9

Код Mattisdada был действительно полезен для меня, когда я составлял диаграмму для отображения статистики некоторых результатов викторины. Я немного изменил его, чтобы разрешить "отсечение" процента (не уверен, что такое правильный термин), а также работать в обоих направлениях по цветному колесу, например. как от зеленого (120) до красного (0), так и наоборот.

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%)';
}

В принципе, задав процентное значение, чтобы скопировать масштаб, все, что ниже этого значения, будет окрашено в качестве начального цвета. Он также пересчитывает масштабирование в соответствии со 100% клипом.

Пропустите примерный сценарий, в который я введу следующие значения:

  • процентов: 75
  • клип: 50
  • saturation: 100 (несущественно, я использую это для выделения диаграммы Chart.js)
  • start: 0 (красный)

  • end: 120 (зеленый)

    • Я проверяю, меньше ли процентов, чем клип, и я возвращаю 0%, если это так. В противном случае, я пересчитываю процент - 75% на полпути между 50% и 100%, поэтому я получаю 50%. Это дает мне 0,5.
    • Я получаю разницу между началом и концом. Вы должны использовать Math.abs(), если значение вашего начального оттенка больше, чем значение вашего конечного оттенка. Затем я умножаю разницу на результат, полученный на шаге 1, чтобы увидеть, сколько мне нужно, чтобы компенсировать значение оттенка начала.
    • Если начальное значение больше конечного значения, вам нужно перемещаться по цветному колесу в противоположном направлении. Добавьте или вычтите из начального значения соответственно.

Я заканчиваю желтым, который находится на полпути между красным и зеленым. Если бы я не сделал пересчет в шаге 1, я бы получил более зеленоватый цвет, что может ввести в заблуждение.

Ответ 10

Я знаю, что это своего рода удар по теме, но я нашел еще один способ сделать это.

Для этого вы также можете создать динамический холст размером 100x1 и применить к нему градиент, а затем от функции, вам просто нужно получить цвет пикселя в процентах.

Вот код: Это глобально:

/* 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);

Тогда функция:

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

Демо: https://jsfiddle.net/asu09csj/

Ответ 11

Вот что я придумал:

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

Флаг moreisgood переключается, если более высокие значения должны быть красного или зеленого. maxval и minval - пороговые значения для вашего диапазона. val - это значение, которое должно быть преобразовано в rgb

Ответ 12

Изменение red с red на green с использованием HLS. Значение должно быть от 0 до 100, в этом случае симуляция процента (%).

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}