От зеленого до красного цвета зависит от процента
У меня есть система опроса, и я хочу, чтобы ответы на этот опрос были окрашены. Например: если это 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();
}
Теперь я хочу шестнадцатеричный процент.
Ответы
Ответ 1
Это может быть больше, чем вам нужно, но это позволяет вам настроить любую произвольную цветовую карту:
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
Простая схема с использованием HSL вместе со скрипкой:
function getColor(value){
//value from 0 to 1
var hue=((1-value)*120).toString(10);
return ["hsl(",hue,",100%,50%)"].join("");
}
При необходимости измените насыщенность и яркость. и fiddle.
Ответ 3
Вы можете сделать это в нескольких строках кода (не включая комментарии) без необходимости в каких-либо цветовых картах.
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 или ниже. (Спасибо Bernhard Fürst)
Ответ 4
Этот метод хорошо работает в этом случае (в процентах от 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)';
}
Ответ 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();
}
Кредит идет к andrew. Он был быстрее.
Ответ 6
Измените эти две строки в коде Джейкоба:
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
На основании ответа Якоба я создал грузовик.
Это от зеленого до красного, но вы можете изменить цвета.
Для интересующихся здесь мой код и 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
HSL будет работать в IE8 с помощью jquery-ui-1.10.4.
Я модифицировал jongo45 ответ, чтобы принять легкость в функции.
function getColor(value, lightness) {
//value from 0 to 1
var hue = ((value) * 120).toString(10);
return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}
Ответ 9
Код 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
- saturation: 100 (несущественно, я использую это для выделения диаграммы Chart.js)
- start: 0 (красный)
-
end: 120 (зеленый)
- Я проверяю, меньше ли процентов, чем клип, и я возвращаю 0%, если это так. В противном случае, я пересчитываю процент - 75% на полпути между 50% и 100%, поэтому я получаю 50%. Это дает мне 0,5.
- Я получаю разницу между началом и концом. Вы должны использовать Math.abs(), если значение вашего начального оттенка больше, чем значение вашего конечного оттенка. Затем я умножаю разницу на результат, полученный на шаге 1, чтобы увидеть, сколько мне нужно, чтобы компенсировать значение оттенка начала.
- Если начальное значение больше конечного значения, вам нужно перемещаться по цветному колесу в противоположном направлении. Добавьте или вычтите из начального значения соответственно.
Я заканчиваю желтым, который находится на полпути между красным и зеленым. Если бы я не сделал пересчет в шаге 1, я бы получил более зеленоватый цвет, что может ввести в заблуждение.
Ответ 10
Я знаю, что это своего рода удар по теме, но я нашел еще один способ сделать это.
Для этого вы также можете создать динамический холст размером 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/
Ответ 11
Вот что я придумал:
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
Ответ 12
Изменение red с red на green с использованием HLS. Значение должно быть от 0 до 100, в этом случае симуляция процента (%).
function getColorFromRedToGreenByPercentage(value) {
const hue = Math.round(value);
return ["hsl(", hue, ", 50%, 50%)"].join("");
}
