前端实行不规则的进度条的问题？

Question

实现效果：如上图的进度条，他的数据是动态传出入的
问题点：
1，这个进度条的底下对应的数据是不太规则的，45到41,41到38.5之间的空余不是有规可循，如何根据传入的数值让上方的小三角移动到对应的位置？
2，小三角的颜色要与底下进度条渐变色对应该如何实现？

Answer 1

类似视差滚动，百度下，小三角背景图放一张长图即可，三角往右，背景往左。

Answer 2

写一个分段线性插值的函数作出两组数值的对应即可。输入数轴为你的数值分段点，输出为前端页面定位坐标和颜色数值。

Answer 3

我觉得可以用障眼法做。
三角那一排直接做成一个div
div背景图是没有数值的DNA甲基图
div里面有

两个白条和 中间夹着这个一个小方块。
方块利用border属性做成三角形边框白色中间透明即可。
左中右布局。
根据数值来改变左右两边的width即可

Answer 4

既然分界点不是规则的，那你下边的举例就得按照比例来啊。怎么能等分呢？设定最大最小数，然后算下比例，来决定指在哪里才对呀