将数字标准化到 0-100% 的范围

Question

我的最终目标是创建一个简单的水平条形图，根据它们的相对差异将一组值从绿色到红色着色。

当存在较大的值差距时它工作正常，例如它可以看起来像这样（在这种情况下最高值是 37，底部是 10).

但是，如果我尝试使用一组都在同一范围内的数字进行此操作，它将不再显示我要查找的内容，因为它们都是 "green" 因为它们非常接近彼此。

这是范围从 66 到 62:

时的样子

我试过用0-1归一化函数，比如：

x = a + (X - A) * (b - a) / (B - A)

在我的 C# 中，它看起来像这样：

    private static int Normalize(List<int> list, int currentValue) {

        int endOfScale = 1;
        int topOfScale = 100;
        int min = list.Min();
        int max = list.Max();

        var normalized = endOfScale + (currentValue - min) * (topOfScale - endOfScale) / (max - min);

        return normalized;

    }

最后，这些值在客户端上运行到 JavaScript 通过以下方式生成 RGB 颜色值：

function getGreenToRed(percent){
    r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
    g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
    return 'rgb('+r+','+g+',0)';
}

这也可能是问题所在，我正在尝试确定攻击哪一方。

Answer 1

将 62 标准化为 0 正是您想要的。只需根据归一化值对条形图进行着色，但使用原始值绘制长度。您的归一化值表示您的原始值在值顺序中的位置，但它不是用于绘制的值。

public Color ColorFromNormalized(int normalized)
{
    if(normalized == 100)
        return Color.Green;
    if(normalized > 70)
        return Color.Yellow;
    if(normalized > 30)
        return Color.Orange;
    return Color.Red
}

Answer 2

在这里回答我自己的问题，但接受@Sebastian 因为这是让我走上正确道路的原因。

他们的关键是这个声明：

Just color the bar in accordance to the normalized value, but draw the length with the original value.

这就是诀窍。我不喜欢 fixed-color 方法，所以我让它比那个更高级一点。但它有效。

原始范围 62 到 66 没有标准化颜色：

之后，相同范围：

如果有帮助，原始问题中显示了 Normalize 函数。

客户端 JavaScript 相同，只是我现在将 标准化 值传递给 JavaScript RGB 函数。

这里，参数percent，是0-100归一化百分比。

function getGreenToRed(percent){
    r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
    g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
    return 'rgb('+r+','+g+',0)';
}

将数字标准化到 0-100% 的范围

Normalizing Numbers to a 0-100% Range

c#

charts

data-visualization

normalization