설문 조사 시스템이 있고이 설문 조사에 대한 답변을 색칠하고 싶습니다. 예 : 10 %이면 빨간색, 40 %이면 노란색, 80 %이면 녹색이므로 내 자바 스크립트 코드에서 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 진수를 원합니다.
답변:
필요한 것보다 많을 수 있지만 임의의 색상 맵을 설정할 수 있습니다.
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을 사용하는 간단한 계획 :
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);
}getColor(12,0,100)( getColor(value, min, max))?
색상 맵없이 몇 줄의 코드 (주석 제외)로이 작업을 수행 할 수 있습니다.
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에게 감사드립니다)
start및 end이에?
end위 코드에서 시작 색상과 종료 색상의 차이입니다. hsl_col_perc(100, 60, 120)초록색 대신 청록색이됩니다. 두 번째 줄을으로 변경 b = (end-start)*a하거나 읽기 쉽기 때문에 한 줄로 만들어야합니다.
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();
}
크레딧은 앤드류에게갑니다. 그는 더 빨랐습니다.
이것이 내가 생각 해낸 것입니다.
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)";
}
moreisgood플래그 토글 높은 값은 빨간색이나 녹색해야합니다.
maxval그리고 minval당신의 범위에 대한 임계 값입니다.
valrgb로 변환 할 값입니다.
에서 변경 red에 greenHLS를 사용하여 색상. 값은 0에서 100 사이 여야하며이 경우 백분율 (%)을 시뮬레이션합니다.
function getColorFromRedToGreenByPercentage(value) {
const hue = Math.round(value);
return ["hsl(", hue, ", 50%, 50%)"].join("");
}
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);
나는 이것이 주제에 대한 일종의 충돌이라는 것을 알고 있지만 한 가지 더 많은 방법을 찾았습니다.
이를 위해 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() + ')';
}
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 %-클립에 따라 배율을 다시 계산합니다.
다음 값을 입력하는 예제 시나리오를 살펴 보겠습니다.
끝 : 120 (녹색)
나는 빨강과 초록의 중간에있는 노랑으로 끝납니다. 1 단계에서 재 계산을 수행하지 않았다면 더 녹색을 띠게되었고 이는 오해의 소지가있을 수 있습니다.