javascript - 用颜色表示数字，差异不足以用于基于百分比的 RGB

Question

我有一个数字数组(1200 个值)

[123、145、158、133...]

我希望每个值都有一个 div，背景颜色从红色到绿色，红色是最小的数字，绿色是最大的数字。

基本设置如下所示:(使用 vuejs 进行模板化，但与问题无关)

const values = [123, 145, 158, 133...]; // 1200 values inside
const total = values.length;

<div
  v-for="(val, i) in values"
  :key="i"
  :style="{backgroundColor: `rgb(${(100 - (val*100/total)) * 256}, ${(val*100/total) * 256}, 0)`}">
  {{val}}
</div>

我不是数学专家，但由于我所有的数字都在 100 左右，所以生成的 RGB 是相同的。 (约12%偏黄)

如何更加重视 137 和 147 之间的差异？

编辑:最终公式:

:style="{backgroundColor: `rgb(${(256/(maxValue-minValue) * (boule-maxValue) - 255)}, ${(256/20 * (boule-maxValue) + 255)}, 0)`}"

Answer 1

查看这篇文章:https://stats.stackexchange.com/questions/70801/how-to-normalize-data-to-0-1-range .

基本上，您希望将值线性重新调整到另一个区间。您需要数组中当前的 min 和 max 值。然后定义新的 min' 和 max'，它们是新间隔的限制。在您的情况下，这将是 [0, 255]。

要进行转换，请使用以下公式:newvalue=(max'-min')/(max-min)*(value-max)+max'

举个例子:如果您的 min 值为 127，max 为 147，并且您想要映射 137。那么:256/20 * (137-147) + 255 结果为 127。

如果你想映射130。那么:256/20 * (130-147) + 255 = 37.4。