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

假设你想变红 - ＆gt;黄色 - ＆gt;绿色，让我们采取那些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，如下所示：

＆＃13;

$('#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();

＆＃13;

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

＆＃13;

任何人都可以建议如何为热图

2 个答案: