谁能建议如何为热图生成颜色

Question

我的想法是我想使用一些数据生成热图。数据的值可能是从 0 到 100。我想按以下方式分配颜色：

0: Red , 50: Yellow, 100: Green

这意味着颜色将逐渐从红色..黄色..变为绿色，就像 3 种颜色的渐变一样。以前我用的是

R = (255 * (20 - i)) / 20;
    G = (255 * i) / 20; 
    B = 0;

用于红色和绿色的渐变。谁能建议我如何在两者之间加入黄色。

Answer 1

我不明白为什么要除以 20。

我会做以下事情。

一开始就把红色 (R) 调到最大。逐渐将绿色 (G) 增加到 Max 直到 50。从那里保持绿色完全并逐渐减少红色

if( i <= 50)
{
    R = 255;              //at full strength
    G = (i / 50.0) * 255; //increase G gradually 
}
else
{
    R = 255 - ((i - 50) / 50.0) * 255;   //decrease gradually
    G = 255;                       //at full strength
}

B = 0;

因此R和G的最大强度将在中间。向左红色突出，向右绿色突出

Answer 2

假设您想要红色 -> 黄色 -> 绿色，让我们采用这些颜色的 RGB 颜色：

         R  G  B
================
Red:    FF 00 00
Yellow: FF FF 00
Green:  00 FF 00

所以你可以看到，对于前半部分（即 0 到 50），你只需要慢慢增加绿色的数量。然后50到100，慢慢减少红色的量。

所以一个简单的算法是：

if n <= 50:
    R = 255
    G = n * (255/50)
    B = 0
else
    R = 255 - ((n-50) * (255/50))
    G = 255
    B = 0

我们可以像这样将其转换为 Javascript：

$('#percentage').on('change', function() {
  showColour();
});

function showColour() {
  var percentage = parseInt($('#percentage').val());
  var r, g, b;

  if (percentage <= 50) {
    r = 255;
    g = parseInt(percentage * (255 / 50));
    b = 0
  } else {
    percentage = percentage - 50;
    r = 255 - parseInt((percentage * (255 / 50)));
    g = 255;
    b = 0;
  }

  var newColour = 'rgb(' + r + ',' + g + ',' + b + ')';
  $('#colour-test').css('background-color', newColour);
}
showColour();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="number" id="percentage" value="0">
<div id="colour-test">This will change</div>

谁能建议如何为热图生成颜色

Can anyone suggest how to generate colors for heatmap

rgb

gradient