설문 조사 시스템이 있고이 설문 조사에 대한 답변을 색칠하고 싶습니다. 예 : 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);
}답변
색상 맵없이 몇 줄의 코드 (주석 제외)로이 작업을 수행 할 수 있습니다.
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에게 감사드립니다)
답변
이 방법은이 경우에 잘 작동합니다 (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();
}
크레딧은 앤드류에게갑니다. 그는 더 빨랐습니다.
답변
나는 이것이 원래 오래된 자바 스크립트 질문이라는 것을 알고 있지만 여기에서 CSS 전용 솔루션을 검색 했기 때문에 다른 사람들에게 똑같이 도움이 될 것입니다. 실제로는 매우 간단합니다.
백분율을 HSL 색상 값으로 사용하십시오! 에서 그린 스팬 H에 빨간색 0으로 128. (당신에 의해 비율을 펌프 할 수 있도록 1.2당신이 원하는 경우). 예:
background-color:hsl(perc,100%,50%);
perc는 %부호가 없는 숫자 일뿐 입니다.
답변
이것이 내가 생각 해낸 것입니다.
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로 변환 할 값입니다.
