从绿色到红色取决于百分比

84

我有一个投票系统，我希望此投票的答案是彩色的。例如：如果是10％，它将是红色；如果是40％，它将是黄色；如果是80％，它将是绿色。

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

现在我要从百分比开始。

javascript 
— 是我
source
— 叶夫根·

Answers:

87

这可能超出了您的需要，但是这使您可以设置任意颜色表：

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
};
— 雅各布
source
1
— Jeancarlo Fontalvo
这正是我需要的项目。非常感谢@Jacob！
— Savado
1
耶稣，这真是太神奇了
— 高个子男孩
非常感谢。这对于我正在从事的项目非常有用！
— rayalois22，
122

使用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
source
3
所以，这是一个黑匣子。有什么解释吗？
— Saeed Neamati 2015年
6
从红色到绿色。var hue =（值* 120）.toString（10）;
— 钱琛
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
38

您可以使用几行代码（不包括注释）来执行此操作，而无需任何颜色图。 

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或更低版本不兼容。（感谢BernhardFürst）

显示代码段

— 马蒂斯达达
source
使用HSL颜色模型很酷，但是不幸的是，它不能在Internet Explorer 8中使用。
— 2014年
的确如此，我将修改答案
— 马蒂斯达达（Matissada）2014年
你能解释一下start，并end在这？
— 魔鬼的拥护者
1
不，end上面的代码中开始和结束颜色之间的区别。hsl_col_perc(100, 60, 120)会产生青绿色而不是绿色。您需要将第二行更改为b = (end-start)*a，或者仅将其更改为单行，因为这样更容易阅读。
— riv
1
感谢您留下快速的HSL颜色参考！
— ohsully
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
source
6 
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();
}

归功于安德鲁。他更快。

— 约瑟夫·马里克
source
5

我知道这最初是一个古老的javascript问题，但是我在这里搜索仅CSS解决方案，所以它可能会同样帮助其他人：实际上很简单：

将百分比用作HSL颜色值！红色到绿色跨度H从0到128。（因此，您可以根据需要提高百分比1.2）。例： 

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

其中perc只是数字，没有%符号。

— 最大值
source
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对于你的范围内的阈值。 val是要转换为rgb的值

— keithxm23
source
3

使用HLS从更改red为green颜色。该值应为0到100，在这种情况下，模拟百分比（％）。

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}
— fgfernandez0321
source
非常好，因为如果您需要它们，它还支持不错的柔和颜色:)
— dijipiji
3

根据Jacobs的回答，我制作了一个负载条。这是绿色到红色，但是您可以更改颜色。对于那些感兴趣的人，这里是我的代码和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);

显示代码段

— 亚伦
source
2

在Jacob的代码中修改这两行：

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）。

— 神经科医生
source
2

我知道这很容易引起话题，但我发现了另一种方法。

为此，您还可以创建一个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/

— 宙斯
source
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("");
}
— 贾斯汀·罗素（Justin Russell）
source
1

当我制作图表以显示一些测验结果的统计信息时，马蒂斯达达的代码对我确实很有帮助。我对其进行了一些修改，以允许“剪切”百分比（不确定正确的术语是什么），并且还可以沿色轮双向使用，例如，从绿色（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中进行重新计算，则结果将是绿色，这可能会引起误解。

— 赛伦
source
0

我修改了zmc的答案，以给出从绿色（0％）到红色（100％）的渐变。

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}
— 史蒂夫
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.