На основе этого вопроса, который имеет сказочный ответ для значений от 0..1, я попытался изменить функцию, чтобы включить значения min и max.
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);
Последний на самом деле синий... Вот скрипка. Как я могу изменить это для работы со всеми 4 сценариями?