퍼센트(%) 수치에 따라 색깔 표현하기 정보
퍼센트(%) 수치에 따라 색깔 표현하기관련링크
본문
퍼센테이지를 표현할때 주로 상승 수치는 빨간색, 하향 수치는 파란색으로 표현 되는데요,
그 보다는 좀 세밀하게 표현 해 보고 싶었습니다.
마이너스가 클수록 더 파랗고, 플러스가 더 클수록 더 빨간겁니다.
예시를 보시죠
지금 이 글을 쓰고 있는 상황엔 오올블루지만, 좀 내려 보시면 빨간 애들도 있습니다.
색깔을 구하는 소스는 아래와 같습니다.
function perColor($percent) {
$hex = dechex(min(30,abs($percent)) / 30 * 100 + 155);
if($percent < 0) {
return "#0000".$hex;
} else if($percent > 0) {
return "#".$hex."0000";
} else {
return "#000000";
}
}
간단하죠?
플러스 마이너스 30이 최대값입니다. +30이 되면 완전 빨간색, -30이 되면 완전 파란색. 그 사이는 퍼센테이지에 따라서 채도가 정해집니다. 이 최대값을 수정 하시려면 위에서 30이라고 된 값 2개를 수정 해 주시면 됩니다.
-0.1% 같은 경우 마이너스라 파랗게 보여야 하는데 너무 순차적으로 올라가면 파란색이 거의 티가 안나겠죠. 그래서 100이라는 값을 기본으로 줍니다.
색깔코드는 십진수 기준으로 0 ~ 255까지이기 때문에, 새빨갛고 새파랗게 하고 싶으면 나누는 수와 더하는 수의 합이 255가 나와야 합니다. 좀 덜 빨갛고 덜 파랗게 하고 싶다면 합이 255보다 작게 나오도록 조절 하시면 되겠죠?
정말 간단한 수식이므로 달리 설명할 필요가 없을 듯 합니다.
그냥 완전 빨간색, 완전 파란색은 좀 못생겼다고 생각하시면
if($percent < 0) {
return "#5533".$hex;
} else if($percent > 0) {
return "#".$hex."3355";
} else {
return "#000000";
}
이렇게 나머지 값들을 좀 조절 해 주시면 됩니다.
마지막으로, 색깔을 편하게 적용하고 ▲ ▼ 까지 표현 해 주고 싶다면, 아래 함수를 같이 쓰시면 됩니다.
function upDown($percent) {
if($percent > 0)
return "<span style='color:".perColor($percent)."'>▴".$percent."%</span>";
else
return "<span style='color:".perColor($percent)."'>▾".$percent."%</span>";
}
저는 이렇게 활용합니다.
<?=upDown('-25')?>
이렇게 해 주면 파란색의, 아래쪽 화살표를 가진 25가 보입니다.
예시는 아래 주소에서 보시면 됩니다.
진짜 마지막으로, php뿐만 아니라 ajax로 불러와서 값을 세팅하는 분들을 위하여 자바스크립트 버전 함수입니다.
function perColor(percent) {
hex = (Math.min(30,Math.abs(percent)) / 30 * 100 + 155).toString(16).substring(0,2);
console.log(percent+' '+hex);
if(percent < 0) {
return "#5533"+hex;
} else if(percent > 0) {
return "#"+hex+"3355";
} else {
return "#000000";
}
}
function upDown(percent) {
if(percent > 0)
return "<span style='color:"+perColor(percent)+"'>▴"+percent+"%</span>";
else
return "<span style='color:"+perColor(percent)+"'>▾"+percent+"%</span>";
}
3