od zielonego do czerwonego w zależności od procentu

89

Mam system ankiet i chcę, aby odpowiedzi w tej ankiecie były kolorowe. Na przykład: Jeśli jest to 10%, byłoby to czerwone, jeśli 40% byłoby żółte, a jeśli 80% byłoby zielone, więc chcę, aby mój kod javascript używał kolorów rgb do tworzenia koloru zgodnie z podanym procentem.

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

Teraz chcę hex od procenta.

javascript 
— to ja
źródło
— Yevgen

Odpowiedzi:

93

Może to być więcej niż potrzebujesz, ale pozwala to skonfigurować dowolną mapę kolorów:

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
};
— Jakub
źródło
1
Wow, dzięki Mister @Jacob ^ - ^ https://jsfiddle.net/JeancarloFontalvo/1sco9Lpe/3/
— Jeancarlo Fontalvo
To jest dokładnie to, czego potrzebuję do projektu. Dziękuję bardzo @Jacob!
— Savado
1
Jezu, to jest niesamowite
— Tallboy
Wielkie dzięki. To właśnie przydało się w projekcie, nad którym pracuję!
— rayalois 22
127

Prosty schemat wykorzystujący HSL wraz ze skrzypcami:

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

w razie potrzeby dostosuj nasycenie i jasność. i skrzypce .

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);
}
Rozwiń fragment

— jongo45
źródło
3
Więc to czarna skrzynka. Jakieś wyjaśnienie?
— Saeed Neamati
7
Od czerwieni do zieleni. var hue = (wartość * 120) .toString (10);
— Qian Chen,
3
Jak możesz to dostosować, aby uwzględnić wartości minimalne i maksymalne? Na przykład getColor(12,0,100)( getColor(value, min, max))?
— Devil's Advocate
Zresztą, nie działa w 100%: stackoverflow.com/questions/40110721/ ...
— Devil's Advocate
@SaeedNeamati Ustawia odcień od 0 do 120 (reprezentujący od czerwieni do zieleni) na podstawie wartości, którą przepuszczasz (od 0 do 1). Konwertuje odcień na ciąg (od „0” do „120”), a następnie zwraca ciąg kodujący kolor w formacie hsl (odcień, nasycenie, jasność), z nasyceniem ustawionym na 100% i jasnością ustawionym na 50%.
— mattsoave
39

Możesz to zrobić w kilku wierszach kodu (bez komentarzy) bez konieczności używania jakichkolwiek map kolorów. 

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

Przykład: https://jsfiddle.net/x363g1yc/634/

Nie ma potrzeby map kolorów (chyba że jest to nieliniowa zmiana koloru, o którą nie pytano)

Ostrzeżenie: to nie jest zgodne z IE8 lub starszymi. (Dzięki Bernhard Fürst)

Pokaż fragment kodu

— Mattisdada
źródło
Używanie modelu kolorów HSL jest fajne, ale niestety nie działa w Internet Explorerze 8.
— Bernhard Fürst
To prawda, poprawię moją odpowiedź
— Mattisdada
Można wyjaśnić starti endw tym?
— Devil's Advocate
1
Nie, endto różnica między kolorem początkowym i końcowym w powyższym kodzie. hsl_col_perc(100, 60, 120)da kolor turkusowy zamiast zielonego. Musisz zmienić drugą linię na b = (end-start)*alub po prostu uczynić ją jednowierszową, ponieważ będzie to łatwiejsze do odczytania.
— riv
1
Dzięki za pozostawienie w szybkim kolorze ref. HSL!
— ohsully
13

Ta metoda działa dobrze w tym przypadku (procent od 0 do 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)';
        }
— zmc
źródło
7 
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();
}

Kredyt trafia do Andrew. Był szybszy.

— Joseph Marikle
źródło
7

Wiem, że pierwotnie jest to stare pytanie javascript, ale znalazłem tutaj szukanie rozwiązania tylko dla CSS , więc może to pomoże innym w równym stopniu: To właściwie całkiem proste:

Użyj wartości procentowej jako wartości koloru HSL! Od czerwonego do zielonego rozciąga się od H 0do 128. (Więc 1.2jeśli chcesz, możesz zwiększyć wartość procentową ). Przykład: 

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

Gdzie perc to tylko liczba bez %znaku.

— Rmaxx
źródło
3

Oto co wymyśliłem:

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

W moreisgoodprzełącza flag czy wyższe wartości powinien być czerwony lub zielony. maxvali minvalsą wartościami progowymi dla Twojego zakresu. valto wartość do przeliczenia na rgb

— keithxm23
źródło
3

Zmiana z redna greenkolor za pomocą HLS. Wartość powinna wynosić od 0 do 100, w tym przypadku symulując procent (%).

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}
— fgfernandez0321
źródło
Bardzo fajnie, ponieważ obsługuje przyzwoite wyciszone kolory, jeśli ich potrzebujesz :)
— dijipiji
3

Na podstawie odpowiedzi Jacobsa zrobiłem belkę ładunkową. Ten jest z zielonego na czerwony, ale możesz zmienić kolory. Dla zainteresowanych tutaj mój kod i 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);

Pokaż fragment kodu

— Aaron
źródło
2

Zmodyfikuj te dwie linie w kodzie Jacoba:

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

do:

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

jeśli chcesz, aby działał dla dwóch ekstremów (tj. 0,0 i 1,0).

— nerfolog
źródło
2

Wiem, że to trochę przerost w temacie, ale znalazłem jeszcze jeden sposób na zrobienie tego.

Aby to zrobić, możesz również utworzyć dynamiczne płótno o wymiarach 100x1 i zastosować do niego gradient, a następnie z funkcji wystarczy pobrać kolor piksela położenia procentowego.

Oto kod: To jest globalne:

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

Następnie funkcja:

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

Demo: https://jsfiddle.net/asu09csj/

— Zeus
źródło
1

HSL będzie działać w IE8 przy użyciu jquery-ui-1.10.4.

Zmodyfikowałem odpowiedź jongo45, aby zaakceptować lekkość w funkcji. 

function getColor(value, lightness) {
    //value from 0 to 1
    var hue = ((value) * 120).toString(10);
    return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}
— Justin Russell
źródło
1

Kod Mattisdada był dla mnie bardzo pomocny, kiedy tworzyłem wykres do wyświetlania statystyk niektórych wyników quizów. Zmodyfikowałem to trochę, aby umożliwić „obcinanie” procentu (nie jestem pewien, jaki jest właściwy termin), a także aby działał w obie strony wzdłuż koła kolorów, np. Zarówno od zielonego (120) do czerwonego (0) i odwrotnie.

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

Zasadniczo, ustawiając wartość procentową, aby przyciąć skalowanie, wszystko poniżej tej wartości zostanie pokolorowane jako kolor początkowy. Przelicza również skalowanie zgodnie z 100% - klip.

Przejdźmy przez przykładowy scenariusz, w którym wpisuję następujące wartości:

  • procent: 75
  • klip: 50
  • nasycenie: 100 (nieważne, używam tego do podświetlania wykresu Chart.js)
  • start: 0 (czerwony)

  • koniec: 120 (zielony)

    1. Sprawdzam, czy procent jest mniejszy niż klip i zwracam 0%, jeśli tak. W przeciwnym razie ponownie obliczam procent - 75% to połowa między 50% a 100%, więc otrzymuję 50%. To daje mi 0.5.
    2. Rozumiem różnicę między początkiem a końcem. Musisz użyć Math.abs () w przypadku, gdy początkowa wartość odcienia jest większa niż końcowa wartość odcienia. Następnie mnożę różnicę przez wynik uzyskany w kroku 1, aby zobaczyć, ile potrzebuję, aby zrównoważyć początkową wartość odcienia.
    3. Jeśli wartość początkowa jest większa niż wartość końcowa, musisz poruszać się po kole kolorów w przeciwnym kierunku. Odpowiednio dodaj lub odejmij od wartości początkowej.

Skończyłem na żółtym, który jest w połowie drogi między czerwonym a zielonym. Gdybym nie wykonał przeliczenia w kroku 1, uzyskałbym bardziej zielonkawy kolor, co mogłoby wprowadzać w błąd.

— Seyren
źródło
0

Zmodyfikowałem odpowiedź zmc, aby nadać gradient od zielonego (0%) do czerwonego (100%).

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}
— Steve
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.