如何用動態數據映射顏色

Question

我有一個時間數組，顏色以十六進制（從藍色到黃色）和一個數據數組。我希望在接收時爲每個數據分配顏色。最小值將具有黃色和最大藍色。所以它的範圍。數據數組中的值是動態的。

例如，在上午7: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>