根据动态值生成梯度步长，包括小数

Question

基于this question, which has a fabulous answer for values from 0..1，我尝试修改函数以包含最小值和最大值。

function getColor(value, min, max){
    var hue=((max-(value-min))*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

它似乎适用于整数，但不适用于小数。例如，这些按预期工作：

var value=42;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,42,100);
document.body.appendChild(d);

var value=42;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be red)";
d.style.backgroundColor=getColor(value,0,42);
document.body.appendChild(d);

但这些不是：

var value=0.1;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,0,90);
document.body.appendChild(d);

var value=0.1;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,0,5);
document.body.appendChild(d);

最后一个居然是蓝色的...Here is a fiddle。我如何更改它以适用于所有 4 种情况？

Answer 1

这似乎工作得很好：

function getColor(value, min, max){
    if (value > max) value = max;
    var v = (value-min) / (max-min);
    var hue=((1 - v)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

编辑：根据以下评论进行了调整

根据动态值生成梯度步长，包括小数

Generate gradient step based on dynamic value, including decimals

javascript

css

hsl

jquery