用颜色表示数字，差异不足以显示基于百分比的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

查看此帖子：offset。

基本上，您想线性地将值缩放到另一个间隔。您需要数组中的当前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（当然，您可以选择这些数目），则可以使用最小值和最大值来“拉伸”您的值。让我们以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)

其中min和max是您选择的值。

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; }