从绿色到红色取决于百分比
我有投票系统，我想回答这个投票是彩色的。 例如：如果它是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(); } 现在我想从百分之十六
这可能比你需要的多，但是这可以让你设置任意的颜色映射：
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 }
一个使用HSL和小提琴的简单scheme：
function getColor(value){ //value from 0 to 1 var hue=((1-value)*120).toString(10); return ["hsl(",hue,",100%,50%)"].join(""); }
根据需要调整饱和度和亮度。 和小提琴 。
给出的答案是非常复杂的。 你可以用4行代码（不包括注释）来做到这一点。
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 : Applications/Images/colormap_6_3_lg.png /* Quick ref: 0 – red 60 – yellow 120 – green 180 – turquoise 240 – blue 300 – pink 360 – red */
例如： http : //jsfiddle.net/x363g1yc/
不需要彩色地图….（除非是非线性的颜色变化，这是没有问）
警告：这与IE8或以下版本不兼容。 （感谢BernhardFürst）
这种方法在这种情况下效果很好（从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)'; }
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(); }
信贷去安德鲁。 他速度更快
在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）。
基于雅各布的答案，我做了一个负载。 这是从绿色到红色，但你可以改变颜色。 对于那些感兴趣的是我的代码和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);
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(""); }
在我制作图表来显示一些测验结果的统计数据时，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％剪辑重新计算缩放比例。
让我们通过一个示例场景，我input以下值：
- 百分比：75
- 剪辑：50
- 饱和度：100（不重要的，我用这个突出Chart.js图表）
- 开始：0（红色）
-
结束：120（绿色）
- 我检查百分比是否小于剪辑，如果是，则返回0％。 否则，我重新计算百分比 – 75％在50％到100％之间，所以我得到50％。 这给了我0.5。
- 我得到开始和结束的区别。 你需要使用Math.abs（）以防你的开始色调值超过你的最终色调值。 然后我乘以第1步获得的结果差异，看看我需要多less抵消开始色调值。
- 如果起始值大于最终值，则需要沿相反的方向沿着色轮移动。 相应地添加或减去起始值。
最后是黄色，这是红色和绿色之间的一半。 如果我没有在第一步中进行重新计算，那么我最终会看到一个更绿的颜色，这可能会引起误解。
这就是我想到的：
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
如果较高的值应该是红色或绿色，则更高标志会切换。 maxval和minval是您的范围的阈值。 val是要转换为rgb的值
我知道这是对话题的一个颠簸，但我find了更多的方法来做到这一点。
要做到这一点，你也可以创build一个100×1维度的dynamiccanvas，并对其应用渐变，然后从函数中获取百分比位置的像素颜色。
这里是代码：这是全球性的：
/* 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：
function getColor(value) { return 'rgba(' + ctx.getImageData(Math.round(value), 0, 1, 1).data.join() + ')'; }
演示： https ： //jsfiddle.net/asu09csj/
