计算热图颜色 [英] Calculating heat map colours

问题描述

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

具有最低值的单元意味着是浅蓝色，可扩展到具有最高值的单元格为深红色。请参阅下面的渐变以获得理想的范围： b
$ b

为了计算每个单元格的十六进制颜色值，我查看了最低的和最高的来自表格和单元格的 total 值，并将它们传递给返回RGB十六进制的方法，以准备与HTML的 background-color 样式一起使用。

以下是目前的方法：

 公共字符串ConvertTotalToRgb（int low，int高，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; 
 
 $ / code> 

使用最低值值0和<这个方法返回下表（单元格值在单元格中）。

i.stack.imgur.com/cFKrv.pngalt =在这里输入图片描述>

示例：如果最低是20 ，最高的是400， cell 是60，我希望该方法沿着渐变方式返回颜色的RGB十六进制大约15.8％。

b
$ b

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

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

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

解决方案

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

按照HSV转换RGB代码：
HSV to 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）; 
 
 
 
 $ b如果你知道你可以定位支持它的浏览器（CSS3），你可以只需直接渲染hsv值即可。
 
I'm working on a heat map made up of an HTML table. This table contains n cells and has a lowest value and a highest value (highest is always higher than lowest). Each cell has a cell value. All these values are ints.

Cells with the lowest value are meant to be a light blue, scaling across to the point where the cells with the highest value are a deep red. See gradient below for an ideal range:



To calculate the hex colour value of each individual cell, I look at the lowest and highest values from the table and the cell's total value, passing them into a method that returns the RGB hex, ready to be used with HTML's background-color style.

Here is the method so far:
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;
}
With a lowest value of 0 and a highest value of 235, this method returns the following table (cell values are in the cells).



Example case: If lowest was 20, highest was 400 and cell was 60, I would want the method returning the RGB hex of the colour about 15.8% of the way along the gradient.
400 - 20 = 380
380 / 60 = 6.33
100 / 6.33 = 15.8
I'm aware that this formula isn't quite accurate but that's partially why I'm asking for help here.

I've made it this far but I'm really not sure how to proceed. Any help is hugely appreciated!
解决方案
What you really want is an HSV color, because the Hue (H value) is cyclical.  if the hue is between 0 and 1, then it indicates how far along your color gradient you want to be.  The saturation and value components are always 1 in this case.

Follow the HSV to RGB conversion code here:
HSV to RGB Stops at yellow 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");
}
If you know you can target browsers that support it (CSS3), you can just render the hsv value directly.

                        
这篇关于计算热图颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！