Question

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

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

然而，如果我尝试使用一组全部在同一范围内的数字，它就不再显示我正在寻找的东西，因为它们都是“绿色”，因为它们彼此相对接近。

以下是范围从 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，因为这是让我走上正确道路的原因。

关键是这句话：

只需按照标准化值对条形图颜色，但绘制长度与原始值。

这就是诀窍。我不喜欢固定颜色的方法，所以我把它做得更先进了。但它确实有效。

原始范围 62 至 66 ，未对颜色进行标准化：

之后，相同范围：

如果有帮助，Normalize功能会显示在原始问题中。

客户端JavaScript是相同的，除了我现在将规范化值传递到JavaScript RGB函数中。

此处，参数百分比是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％范围

2 个答案: