Question

我有一个时间数组，十六进制颜色（从蓝色变为黄色）和数据数组。我想在收到数据时为每个数据指定颜色。最小值将为黄色，最大为蓝色。所以它的范围。数据数组中的值是动态的。

例如，在上午07:00，收到的数据为47，然后颜色将亮黄色（十六进制）。

你们中的任何人都可以为我提供一个如何在javascript中编码的示例吗？谢谢！

Answer 1

我假设您可以根据最小值和最大值找到当前值百分比。像100 *（当前 - 最小）/（最大 - 最小）这样的东西应该给你一个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>

如何使用动态数据映射颜色

1 个答案: