用颜色表示数字，对于基于百分比的 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

检查此 post：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.

Answer 2

这实际上取决于这些值的实际含义

但是，您可以试试这个：如果您的值总是大于 100 且总是小于 150（当然您可以选择这些数字），您可以 "stretch" 您的值使用最小值和最大值.我们以137和147为例：

(val-min) : (max-min) = x : 255

(137-100):(150-100) = x:255  ->  37:50 = x:255  ->  188

(147-100):(150-100) = x:255  ->  47:50 = x:255  ->  239

那是为了数学。最后是这样的计算：

newValue = (val-min)*255/(max-min)

其中最小值和最大值是您选择的值。

Answer 3

您可以对一系列数据使用放大镜。在此示例中，20 到 30 之间的值映射到比 0 ... 100 区间内的外部值大两倍的范围。

function magnifier(value, start, end, factor) {
    var middle = (start + end) / 2,
        size = (end - start) * factor / 2,
        left = middle - size,
        right = middle + size;

    if (value <= start) return value * left / start;
    if (value <= end) return (value - start) * factor + left;
    return (value - end) * (100 - right) / (100 - end) + right;
}

var i;

for (i = 0; i <= 100; i += 5) {
    console.log(i, magnifier(i, 20, 30, 2));
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

用颜色表示数字，对于基于百分比的 rgb 来说差异不够大

Represent a number with a color, difference not enough for percentage based rgb

javascript

math

rgb