Как сопоставить цвет с динамическими данными

Question

У меня есть массив времени, цвет в шестнадцатеричном (который идет от синего до желтого) и массив данных. Я хочу назначить цвет каждой информации в момент ее получения. Минимальное значение будет иметь желтый цвет и максимум синий. Так что это диапазон. Значения в массиве данных являются динамическими.

Например, например, в 07:00, полученные данные равны 47, тогда цвет будет гореть желтым (шестнадцатеричным).

Может ли кто-нибудь из вас предоставить мне пример о том, как закодировать это в javascript? Благодаря!

Answer 1

Я предполагаю, что учитывая ваши минимальные и максимальные значения, вы можете найти процент текущего значения. Что-то вроде 100 * (current-min)/(max-min) должно давать вам число (при округлении) между 0 и 100. Затем это число можно использовать таким же образом, что и цветовая переменная установлена ​​в демо ниже дайте цвет между желтым и синим.

Вместо того, чтобы смешиваться через белый, вы также можете смешиваться через зеленый цвет. Думаю, это был бы вопрос выбора. Если вы хотите сделать это, я могу обновить формулу цвета или вы, вероятно, сможете сами это понять.

Я обновил демо с помощью смеси через зеленый цвет. По моему мнению, слишком много зеленого цвета, но вы можете настроить цвет, как вам нравится, с помощью формулы, которая смещает желтый и синий, а не линейную смесь.

var parent = document.getElementById("gradients"); 
 
for (var i = 0; i<100; i++){ 
 
    var color = (i < 50) ? "hsl(60, 100%, " + (50 + i) + "%)" : "hsl(220, 100%, " + (150 - i) + "%)" 
 
    var el = document.createElement("div"); 
 
    el.style.backgroundColor = color; 
 
    parent.appendChild(el); 
 
} 
 

 
var parent2 = document.getElementById("gradients2"); 
 
for (var i = 0; i<100; i++){ 
 
    var color = "hsl(" + (55 + 1.5*i) + ", 100%, 50%)"; 
 
    var el = document.createElement("div"); 
 
    el.style.backgroundColor = color; 
 
    parent2.appendChild(el); 
 
}

#gradients, #gradients2 { border: solid 1px; margin-bottom: 1em; } 
 
#gradients div { height: 1px; } 
 
#gradients2 div { height: 1px; }

<div id="gradients"></div> 
 
<div id="gradients2"></div>