js实现动态数值的colorscale

场景描述:根据数值大小,给定长刻度尺划分动态单位刻度。
1. css刻度实现

刻度由很多个小块(li)、刻度线(a)组成。本次案例中以总长100个像素,五个单位块为例。

第一步:首先模拟等长单位的刻度。
设刻度尺总长度为100px,那么单位长度为20px,总共5个格子。通过使用伪类的方式给刻度尺添加刻度线,最后给单位刻度添加数值就完成了第一步刻度尺。
(片段代码如下)
  • 20k
  • 15k
  • 10k
  • 5k
  • 0

.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; }

js实现动态数值的colorscale
文章图片
// 等长刻度
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格式化:1M

【js实现动态数值的colorscale】js实现
// 将最近单位格式化 function formatterUnit(value:number, unitValue: number){ let unitArr = ['', 'k', 'M', 'G', 'T']; let unit = Math.floor( (value.toString().length - 1) / 3); // 获取单位进制 let isFormatterValue = https://www.it610.com/article/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] }

js实现动态数值的colorscale
文章图片
// 单位化刻度(最大值为23626)
代码详细地址

    推荐阅读