当前设定的是红、橙、黄、蓝、绿五种颜色根据输入的值data,自动匹配对应的颜色
主要流程:
最大值减去最小值再除以4(四舍五入保留两位小数)获取每个颜色值之间的间距值,这个4是指段数,比如5个颜色就有4段,6个颜色就有5段
然后每个颜色对应的值分别是:最小值,最小值加一个间距值,最小值加两个间距值,最小值加三个间距值,最大值
每个间距值再除以255,获取到每个颜色每一小段的间距值(因为rgb颜色中最大的就是255)
判断当前数值在哪段中(即在哪两个颜色之间)
使用当前数值减去比自身小的颜色值,再除以每个颜色每一小段的间距值,获取到的值value就是颜色需要变动的值
根据每个颜色的rgb形式,看看两个颜色之间rgb哪个变动了,比如蓝色到绿色,即(0,255,255)到(0,255,0)这其中变动的是b,从255变动到0了,并且这个数值是在减小,所以就要在255的基础上减去value值,如果这个数值在增大(比如从0变成255了),那么就要在0的基础上加value值
使用:
1.获取全部数值data的最大值和最小值
let maxValue = 0.5;
let minValue = 0.5;
//data指需要匹配颜色的所有数值
data.forEach(item=>{
if (item > maxValue) {
maxValue = item;
}
if (item < minValue) {
minValue = item;
}
})
data.forEach(item=>{
this.color(item,minValue,maxValue)
})
2.计算数值对应的颜色值
color(dataNumber,minValue,maxValue){
let colorBar;
//获取每个颜色值之间的间距值
let colorspace = ((maxValue - minValue) / 4).toFixed(2);
//获取每个颜色对应的值
let f1 = minValue;
let f2 = minValue + colorspace*1;
let f3 = minValue + colorspace * 2;
let f4 = minValue + colorspace * 3;
let f5 = maxValue;
//获取到每个颜色每一小段的间距值
let smallspace = colorspace / 255;
//判断当前数值在哪段中
if (dataNumber >= f1 && dataNumber < f2) {
//获取颜色变动的值
let value = Math.round((dataNumber - f1) / smallspace);
let b = 255 - value;
//1指透明度为不透明
colorBar = rgba(0, 255, b, 1);
}else if(dataNumber >= f2 && dataNumber < f3){
let value = Math.round((dataNumber - f2) / smallspace);
let r = 0 + value;
colorBar = rgba(r, 255, 0, 1);
}else if(dataNumber >= f3 && dataNumber < f4){
let value = Math.round((dataNumber - f3) / smallspace);
let g = 255 - value;
colorBar = rgba(255, g, 0, 1);
}else if(dataNumber >= f4 && dataNumber < f5){
let value = Math.round((dataNumber - f4) / smallspace);
let g = 128 - value;
colorBar = rgba(255, g, 0, 1);
}else if(dataNumber = f5){
colorBar = rgba(255, 0, 0, 1);
}
}