计算热图颜色

Question

我正在制作由 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

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

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

Answer 1

今天我在谷歌上搜索了一些关于他的问题的帮助，但没有答案我找到了准确的问题。

“热图”不是原始值％到色调的转换，它可以用 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。该类使用比例、线性、再现，致力于blocOfColor改变线性。

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

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

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

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

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

Answer 2

你真正想要的是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 值。