数据可视化---之---数据色彩化

最新推荐文章于 2024-03-17 22:41:25 发布

敲门级前端工程师

最新推荐文章于 2024-03-17 22:41:25 发布

阅读量2.3k

点赞数

文章标签：可视化数据色彩化 javascript RGB HSV

本文链接：https://blog.csdn.net/cc2293260/article/details/50868078

版权

数据可视化正热门中。博主前端小白，因毕业设计题目与这个相关。所以也打算入一下门。

本文主要表达一下个人观点。用颜色表示温度，或者类似的概念大家都不陌生。尤其是蓝色大家一看就懂表示温度低，红色一看就是表示温度高。常常都会看到下图这样的色条。

一个简单的渐变，大家都能直观地明白数据的差异。

博主做的项目是一个用户关系图。所以打算用颜色表示用户间交流频次。交流越频繁颜色越往右。

算法是由“百度百科中hsv转rgb”算法改写的，比原算法简单了很多。为因为三个参数中我把亮度和饱和度都固定成了100%。色相决定颜色，这样就可以只传一个参数，那就是交流频次。

简单解释一下我的算法逻辑。当饱和度和亮度都设置成100%以后，唯一的变量也就是色相了。rgb颜色模式可以想象成一个色环，红色#ff0000处为0度。绿色#00ff00处为120度，蓝色#0000ff处为240度。那么，红色为中心的前后60度，即300度（负60度）到60度之间，红色通道应该是取0xff值，60度到120度区间红色通道取值应该逐渐减弱至0，从240度起逐渐增加至0xff；同理绿色通道取值应该是，60-180为0xff，180-240渐弱，0-60坚强；蓝色通道取值应该是，180-300为0xff，300-0渐弱，120-180渐强。也就是说，色环上任意一点都至少有两个参数是固定的0或者0xff，这个时候颜色的值表示只差一个参数，我们可以叫他动态参数（不明白rgb和hsv的童鞋请自行百度，毕竟我也不是很明白）

所以将传入参数先进行比例处理为0到360之间的值。传入后，参数除以60并向下取整的值为该点在色环里的大体位置，取值应该是0、1、2、3、4、5（等于6时看作等于0）对应从最红点#ff0000出发的第一到六个板块。对60取余为向下第一个ff点或0点的距离。可以用这个余值与60除得到的浮点数即为该点的动态参数。

注意： 这里面还有一个渐强和渐弱的区别，所以这个动态参数在第一板块、第三板块、第五板块时为余数除以60(即商为偶数时)。当在另外三个板块时（商为奇数），动态参数应该是(60-余数)/60。

最后把这个动态参数按比例转换为2位16进制数加上另外两个固定参数即为得到的颜色值。

以下是源代码，因为在这个应用中紫色不是很必要所以我计算了0到240度。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数据可视化</title>
<style>#fonder{ width:50px; height:50px; background:#f00;}</style>
</head>

<body>
<p>请输入0到240之前的值，我将为您计算出对应的温度颜色<br/>
240为最暖红色,0为最冷为蓝色。上下方向键调节数字大小。</p>
<input type="number" value="240" id="v"/>
<div id="fonder"></div>
<script>
// JavaScript Document
window.onload = function(){
document.getElementById("v").onfocus = function(){
	document.onkeydown = function(event){
		var e = event||window.event;
		if(e&&e.keyCode == 38){
			if(document.getElementById("v").value<240)
			document.getElementById("v").value -= -1;
			fuck(document.getElementById("v").value);
			}
		if(e&&e.keyCode == 40){
			if(document.getElementById("v").value>0)
			document.getElementById("v").value -= 1;
			fuck(document.getElementById("v").value);
		}
	}
}
document.getElementById("v").onchange =function(){
		if(document.getElementById("v").value>=240)
			document.getElementById("v").value=240;
		else if(document.getElementById("v").value<=0)
			document.getElementById("v").value = 0;
		fuck(document.getElementById("v").value);
	}	
}
function fuck(value){
	var p = parseInt(value/60);
	var key = parseInt((parseFloat(value%60)/60)*255);
	var nkey = 255-key;
	if(key.toString(16).length==1)
	key = 0+key.toString(16);
	else
	key = key.toString(16);
	if(nkey.toString(16).length==1)
	nkey = 0+nkey.toString(16);
	else
	nkey = nkey.toString(16);
	var color;
	switch(p)
	{
		case 0:{
			color = "#00"+key+"ff";
			break;}
		case 1:{
			color = "#00ff"+nkey;
			break;}
		case 2:{
			color = "#"+key+"ff00";
			break;}
		case 3:{
			color = "#ff"+nkey+"00";
			break;}
		case 4:{
			color = "#ff0000"
			break;}
	}
		document.getElementById("fonder").style.background=color;
	}
</script>
</body>
</html>