js实现动态数值的colorscale
站长
· 阅读数 302
场景描述：根据数值大小，给定长刻度尺划分动态单位刻度。
1. css刻度实现
刻度由很多个小块（li）、刻度线（a）组成。本次案例中以总长100个像素，五个单位块为例。第一步：首先模拟等长单位的刻度。设刻度尺总长度为100px，那么单位长度为20px，总共5个格子。通过使用伪类的方式给刻度尺添加刻度线，最后给单位刻度添加数值就完成了第一步刻度尺。（片段代码如下）
<div class="colorBarScale-container">
<ul class="colorBarScale">
<li class="colorBarScaleli">
<a class="" href="javascript:void()"></a>
</li>
<li class="colorBarScaleli">
<a class="" href="javascript:void()">20k</a>
</li>
<li class="colorBarScaleli">
<a class="" href="javascript:void()">15k</a>
</li>
<li class="colorBarScaleli">
<a class="" href="javascript:void()">10k</a>
</li>
<li class="colorBarScaleli">
<a class="" href="javascript:void()">5k</a>
</li>
<a class="" href="javascript:void()">0</a>
</ul>
</div> .colorBarScale-container{
z-index: 10;
right: 7%;
bottom: 4%;
position: absolute;
}
.colorBarScale {
list-style: none;
background-image: linear-gradient(to top, #0c3383,#005ea3, #0a88ba, #00c199, #f2d338, #F6b132, #f28f38, #e76124, #d91e1e);
width: 25px;
height: 100px;
/* display: flex; */
flex-direction: column;
padding-left: 0;
display: block;
}
.colorBarScale >.colorBarScaleli {
width: 10px;
height: 20px;
position: relative;
margin-left: 15px;
display: block;
}
.colorBarScale li:first-child::before {
height: 0px;
}
.colorBarScale li:first-child> a{
margin-top: -8px;
}
.colorBarScale li:last-child::before{
bottom: -2px;
top: 20px;
}
.colorBarScale > a{
margin-top: -10px;
margin-left: 35px;
display: block;
color: #79d0f3;
text-decoration: none;
}
.colorBarScale>.colorBarScaleli:before {
content: "";
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 1px;
background-color: #000;
}
.colorBarScale>.colorBarScaleli+.colorBarScaleli {
border-left-color: gray;
}
.colorBarScale > .colorBarScaleli > a {
display: block;
position: absolute;
height: 20px;
line-height: 20px;
margin-left: 20px;
margin-top: -10px;
color: #79d0f3;
text-decoration: none;
}
// 等长刻度
2. 刻度单位化
1. 获取最近单位长度
- 假设现有单位选择为：5, 10, 15, 20, 30, 50, 100, 200, 300, 500, 1000, 1500, 2000, 5000, 10000, 15000, 18000, 20000, 22000, 25000, 28000, 30000, 35000, 40000, 50000, 100000, 200000, 500000, 1000000, 2000000, 5000000, 10000000（自定义单位序列）
根据最大数值获取最邻近单位
最大值为5000：最邻近单位为1000； 最大值为45000，以5个单位为例，一个单位为9000，但实际序列里没有9000，那么最邻近的单位则应该为10000；查找方法：第一步：unit：用最大值除以预设刻度尺单位（本次案例中为4个格子）获得平均单位长度。第二步：nearCale：用平均单位长度与预设单位长度比较获取最邻近的等长（即：一个格子的单位）。第三步：unitCalePX：根据计算所得的单位长度，计算出单位长度对应的像素（即：一个格子的长度）。第四步：插入dom
2. 获取最近单位长度
数值1000格式化：1k
数值1000000格式化：1Mjs实现
// 将最近单位格式化
function formatterUnit(value:number, unitValue: number){
let unitArr = ['', 'k', 'M', 'G', 'T'];
let unit = Math.floor( (value.toString().length - 1) / 3); // 获取单位进制
let isFormatterValue = Math.floor( (unitValue.toString().length - 1) / 3); // 用于判断是否格式化
let formatterValue = isFormatterValue > 0 ? unit > 0 ? ( (value / Math.pow(1000,unit)) + unitArr[unit] ) : (value + ''):(value + '');
return formatterValue;
}
// 获取最近单位
function getNearCale(value: number){
const scalArr = [5, 10, 15, 20, 30, 50, 100, 200, 300, 500, 1000, 1500, 2000, 5000, 10000, 15000, 18000, 20000, 22000, 25000, 28000, 30000, 35000, 40000, 50000, 100000, 200000, 500000, 1000000, 2000000, 5000000, 10000000];
let nearCale: number[] = [];
let scalIndex:number = 0;
scalArr.forEach((item, index)=>{
if( (value / item) < 1 && nearCale.length < 1){
nearCale.push( value);
return;
}else if((value / item) >= 1){
nearCale.push(item);
scalIndex = index;
} });
// 判断是否有更接近的单位刻度
if( (1 - value / scalArr[scalIndex + 1]) < (value / scalArr[scalIndex + 1] - 1) ){
nearCale.push(scalArr[scalIndex + 1]);
}
let len = nearCale.length;
return nearCale[len - 1]
}
// 单位化刻度（最大值为23626）