8

我正在制作由 HTML 表格组成的热图。该表包含n 个单元格，并具有最低值和最高值（最高值始终高于最低值）。每个单元格都有一个单元格值。所有这些值都是整数。

具有最低值的单元格应为浅蓝色，缩放到具有最高值的单元格为深红色的点。请参阅下面的渐变以获得理想范围：

在此处输入图像描述

为了计算每个单独单元格的十六进制颜色值，我查看表格中的最低值和最高值以及单元格的总值，将它们传递给返回 RGB 十六进制的方法，以便与 HTML 的背景颜色样式一起使用。

到目前为止的方法如下：

public string ConvertTotalToRgb(int low, int high, int cell)
{
    int range = high - low;

    int main = 255 * cell/ range;
    string hexR = main.ToString("X2");
    int flip = 255 * (1 - (cell/ range));
    string hexB = flip.ToString("X2");

    return hexR + "00" + hexB;
}

最小值为0，最大值为 235，此方法返回下表（单元格值在单元格中）。

在此处输入图像描述

示例案例：如果最低为 20，最高为 400，单元格为 60，我希望该方法返回颜色的 RGB 十六进制，大约是渐变的 15.8%。

400 - 20 = 380
380 / 60 = 6.33
100 / 6.33 = 15.8

我知道这个公式不是很准确，但这也是我在这里寻求帮助的部分原因。

我已经做到了这一点，但我真的不知道如何继续。非常感谢任何帮助！

4

2 回答 2

9

今天我用谷歌搜索了一些关于他的问题的帮助，但没有答案我找到答案正是这个问题。

“热图”不是原始的 Value% 到 Hue 的转换，它可以用 7、5 或更少的颜色构建（例如：红色到黄色），可以是线性或对数等。

在此处输入图像描述

我编写并分享了一个 C# .Net 4.6.1 代码，它可以作为构建您的 ValueToColorOnHeatMap 转换器的坚实基础：（注意：这是经过调试和测试的）

using System.Windows.Media;// for WPF
// for WindowsForms using System.Drawing
using System;
using System.Collections.Generic;
public class ColorHeatMap
{
    public ColorHeatMap()
    {
        initColorsBlocks();
    }
    public ColorHeatMap(byte alpha)
    {
        this.Alpha = alpha;
        initColorsBlocks();
    }
    private void initColorsBlocks()
    {
        ColorsOfMap.AddRange(new Color[]{
            Color.FromArgb(Alpha, 0, 0, 0) ,//Black
            Color.FromArgb(Alpha, 0, 0, 0xFF) ,//Blue
            Color.FromArgb(Alpha, 0, 0xFF, 0xFF) ,//Cyan
            Color.FromArgb(Alpha, 0, 0xFF, 0) ,//Green
            Color.FromArgb(Alpha, 0xFF, 0xFF, 0) ,//Yellow
            Color.FromArgb(Alpha, 0xFF, 0, 0) ,//Red
            Color.FromArgb(Alpha, 0xFF, 0xFF, 0xFF) // White
        });
    }
    public Color GetColorForValue(double val, double maxVal)
    {
        double valPerc = val / maxVal;// value%
        double colorPerc = 1d / (ColorsOfMap.Count-1);// % of each block of color. the last is the "100% Color"
        double blockOfColor = valPerc / colorPerc;// the integer part repersents how many block to skip
        int blockIdx = (int)Math.Truncate(blockOfColor);// Idx of 
        double valPercResidual = valPerc - (blockIdx*colorPerc);//remove the part represented of block 
        double percOfColor = valPercResidual / colorPerc;// % of color of this block that will be filled

        Color cTarget = ColorsOfMap[blockIdx];
        Color cNext = cNext = ColorsOfMap[blockIdx + 1]; 

        var deltaR =cNext.R - cTarget.R;
        var deltaG =cNext.G - cTarget.G;
        var deltaB =cNext.B - cTarget.B;

        var R = cTarget.R + (deltaR * percOfColor);
        var G = cTarget.G + (deltaG * percOfColor);
        var B = cTarget.B + (deltaB * percOfColor);

        Color c = ColorsOfMap[0];
        try
        {
            c = Color.FromArgb(Alpha, (byte)R, (byte)G, (byte)B);
        }
        catch (Exception ex)
        {
        }
        return c;
    }
    public byte Alpha = 0xff;
    public List<Color> ColorsOfMap = new List<Color>();
}

要使用更少或个性化的颜色，请使用ColorsOfMapList。该类使用比例、线性、reperesentation，致力于blocOfColor改变线性度。

我希望这会帮助一些人节省时间:)

感谢所有与社区分享他们的答案/解决方案的人。

要使用更少或个性化的颜色，请使用ColorsOfMapList。该类使用比例、线性、reperesentation，致力于blocOfColor改变线性度。

我希望这会帮助一些人节省时间:)

感谢所有与社区分享他们的答案/解决方案的人。

于 2016-06-19T20:46:26.297 回答
4

您真正想要的是 HSV 颜色，因为色调（H 值）是周期性的。如果色相介于 0 和 1 之间，则它表示您想要在颜色渐变中走多远。在这种情况下，饱和度和值分量始终为 1。

按照此处的 HSV 到 RGB 转换代码： HSV 到 RGB 在黄色 C# 处停止

public string ConvertTotalToRgb(int low, int high, int cell)
{
    int range = high - low;
    float h= cell/ (float)range;
    rgb = HSVtoRGB(h,1.0f,1.0f);
    return "#" + rgb.R.ToString("X2") + rgb.G.ToString("X2") + rgb.B.ToString("X2");
}

如果你知道你可以定位支持它的浏览器（CSS3），你可以直接渲染 hsv 值。

于 2013-07-24T00:12:57.503 回答