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

时间：2011-08-20 00:18:47

标签： javascript

我有一个民意调查系统，我希望这个民意调查的答案有色。 例如：如果它是10％它将是红色，如果40％它将是黄色，如果80％它将是绿色，所以我希望我的javascript代码使用rgb颜色根据给定的百分比制作颜色。 / p> 

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

现在我想要百分之十六。

15 个答案:

答案 0 :(得分：95)

使用HSL和小提琴的简单方案：

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

根据需要调整饱和度和亮度。和 fiddle 。

答案 1 :(得分：58)

这可能超出您的需要，但这可以让您设置任意颜色映射：

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 :(得分：33)

您可以在几行代码（不包括注释）中执行此操作，而无需任何颜色映射。 

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）

答案 3 :(得分：12)

此方法在这种情况下效果很好（百分比从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)';
        }

答案 4 :(得分：6)

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

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

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

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

答案 5 :(得分：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();
}

归功于安德鲁。他的速度更快。

答案 6 :(得分：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];

如果你想让它适用于两个极端（即0.0和1.0）。

答案 7 :(得分：2)

根据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);

答案 8 :(得分：2)

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

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

答案 9 :(得分：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("");
}

答案 10 :(得分：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步中重新计算，我最终会变成更绿的颜色，这可能会产生误导。

答案 11 :(得分：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/

答案 12 :(得分：0)

这就是我提出的：

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的值

答案 13 :(得分：0)

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

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}

答案 14 :(得分：0)

使用与雅各布的最佳答案类似的逻辑，

我已经创建了一个 Javascript color-scales 来处理它。您还可以输入多个色标以及设置透明度级别。

现场演示在这里：https://codepen.io/dalisc/pen/yLVXoeR

包的链接在这里：https://www.npmjs.com/package/color-scales

示例用法：

const ColorScale = require("color-scales");
let colorScale = new ColorScale(0, 100, ["#ffffff", "#000000"], 0.5);
let rgbaStr = colorScale.getColor(50).toRGBAString(); // returns "rgba(127,127,127, 0.5)"

该包能够根据您的需要输出十六进制、rgb 或 rgba 字符串。它还可以输出自定义颜色对象 ({r,g,b,a})，以防您需要挑选单个颜色组件。

我在尝试在基于 Javascript 的应用程序上模仿 Tableau 仪表板时遇到了类似的问题。我意识到这是 Tableau 和 Microsoft Excel 等数据可视化工具的常见功能，因此我创建了一个 npm 包来在 Javascript 应用程序上处理它。如果你想减少你的代码，你可以使用这个包。

相关问题
最新问题