緑から赤への色はパーセンテージに依存します

89

私は投票システムを持っており、この投票の回答に色を付けたいと思っています。例：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();
}

今、私はパーセントから16進数が欲しいです。

javascript 
— それは私です
ソース
— Yevgen

回答:

93

これは必要以上のことかもしれませんが、これにより任意のカラーマップを設定できます。

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
};
— ヤコブ
ソース
1
うわー、ありがとうミスター@ジェイコブ^-^ https://jsfiddle.net/JeancarloFontalvo/1sco9Lpe/3/
— Jeancarlo Fontalvo 2017年
これはまさに私がプロジェクトに必要なものです。どうもありがとう@ジェイコブ！
— サバド
1
イエスこれはすごい
— トールボーイ
どうもありがとう。これは、私が取り組んでいるプロジェクトに役立ちました。
— rayalois 2220
127

HSLとフィドルを使用した単純なスキーム：

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

必要に応じて、彩度と明度を微調整します。とフィドル。

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);
}
スニペットを展開

— jongo45
ソース
3
だから、それはブラックボックスです。説明はありますか？
— Saeed Neamati 2015
7
赤から緑へ。var hue =（value * 120）.toString（10）;
— Qian Chen
3
最小値と最大値を含めるようにこれをどのように適応させることができますか？たとえば、getColor(12,0,100)（getColor(value, min, max)）？
— 悪魔の代弁者
：100％動作しない、というスクラッチstackoverflow.com/questions/40110721/...
— 悪魔の支持者
@SaeedNeamati渡した値（0から1）に基づいて、色相を0から120（赤から緑を表す）の間に設定します。色相を文字列（「0」から「120」）に変換し、色をhsl形式（色相、彩度、明度）でコード化した文字列を返します。彩度は100％、明度は50％に設定されています。
— mattsoave 2017年
39

これは、カラーマップを必要とせずに、数行のコード（コメントを含まない）で実行できます。 

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以下と互換性がありません。（ベルンハルトフュルストに感謝）

コードスニペットを表示

— マティスダダ
ソース
HSLカラーモデルの使用はすばらしいですが、残念ながらInternet Explorer8では機能しません。
— ベルンハルトフュルスト
これは本当です、私は私の答えを修正します
— Mattisdada 2014年
あなたは説明できますstartし、endこの中に？
— 悪魔の提唱
1
いいえ、end上記のコードの開始色と終了色の違いです。hsl_col_perc(100, 60, 120)緑ではなくターコイズになります。2行目をに変更b = (end-start)*aするか、読みやすくするために1行にする必要があります。
— riv 2016年
1
クイックHSLカラーリファレンスを残していただきありがとうございます！
— ああ、
13

この場合、この方法はうまく機能します（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)';
        }
— zmc
ソース
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();
}

クレジットはアンドリューに送られます。彼は速かった。

— ジョセフ・マリクル
ソース
7

私はこれが元々古いjavascriptの質問であることを知っていますが、CSSのみの解決策を探してここに来たので、おそらくそれは他の人にも等しく役立つでしょう：それは実際には非常に簡単です：

パーセンテージをHSLカラー値として使用してください！赤から緑はHから0までに及び128ます（1.2必要に応じてパーセンテージを上げることができます）。例： 

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

ここで、percは、%記号のない単なる数値です。

— Rmaxx
ソース
3

これは私が思いついたものです：

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は、範囲のしきい値です。 valrgbに変換される値です

— keithxm23
ソース
3

HLSを使用してredからgreenカラーに変更します。値は0〜100である必要があります。この場合、パーセンテージ（％）をシミュレートします。

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}
— fgfernandez0321
ソース
必要に応じてまともな
— 落ち着いた
3

ジェイコブスの答えに基づいて、ロードバーを作成しました。これは緑から赤ですが、色を変えることができます。興味のある方のために、私のコードと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);

コードスニペットを表示

— アーロン
ソース
2

Jacobのコードで次の2行を変更します。

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];

2つの極端な条件（つまり、0.0と1.0）で機能させたい場合。

— 神経学者
ソース
2

私はこれがトピックへの一種のバンプであることを知っていますが、私はそれを行うもう1つの方法を見つけました。

これを行うには、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/

— ゼウス
ソース
1

HSLは、jquery-ui-1.10.4を使用してIE8で機能します。

関数の明度を受け入れるようにjongo45の回答を変更しました。 

function getColor(value, lightness) {
    //value from 0 to 1
    var hue = ((value) * 120).toString(10);
    return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}
— ジャスティンラッセル
ソース
1

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
  • 飽和度：100（重要ではありません。これをChart.jsチャートの強調表示に使用します）
  • 開始：0（赤）

  • 終了：120（緑）

    1. パーセントがクリップよりも小さいかどうかを確認し、小さい場合は0％を返します。それ以外の場合は、パーセンテージを再計算します。75％は50％と100％の中間なので、50％になります。これは私に0.5を与えます。
    2. 開始と終了の違いがわかります。開始色相値が終了色相値よりも大きい場合は、Math.abs（）を使用する必要があります。次に、その差に手順1で得られた結果を掛けて、開始色相値をオフセットする必要がある量を確認します。
    3. 開始値が終了値よりも大きい場合は、カラーホイールに沿って反対方向に移動する必要があります。それに応じて開始値に加算または減算します。

赤と緑の中間にある黄色になってしまいます。手順1で再計算を行わなかった場合は、より緑がかった色になってしまい、誤解を招く可能性があります。

— セイレン
ソース
0

zmcの回答を変更して、緑（0％）から赤（100％）へのグラデーションを作成しました。

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}
— スティーブ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.