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

时间:2016-06-29 06:06:33

标签: c# charts data-visualization normalization

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

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

Ranked with Variation

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

以下是范围从 66 62 时的样子:

Ranked with almost no variation

我已尝试将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;

    }

Normalization of Scale

最后,这些值通过客户端上的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)';
}

这也可能是问题所在,我正试图确定哪一方在这里进行攻击。

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

关键是这句话:

  

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

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

原始范围 62 66 ,未对颜色进行标准化:

Before Normalizing for Color

之后,相同范围:

After normalizing for Color

如果有帮助,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)';
}