基于动态值生成渐变步骤，包括小数 [英] Generate gradient step based on dynamic value, including decimals

问题描述

根据此问题，其中有< a href =http://stackoverflow.com/a/17268489/736893>从值0..1的神话答案，我试图修改函数包括最小和最大值。

Based on this question, which has a fabulous answer for values from 0..1, I tried to modify the function to include the min and max values.

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

它似乎对整数工作正常，但不是小数。例如，这些工作按预期工作：

It seems to work fine for whole numbers, but not so much for decimals. For instance, these work as expected:

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);

最后一个实际上是蓝色... 这是一个小提琴。

The last one is actually blue... Here is a fiddle. How can I change this to work with all 4 scenarios?

推荐答案

这看起来效果很好：

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("");
}

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

edit: adjusted based on comments below

这篇关于基于动态值生成渐变步骤，包括小数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！