任何人都可以建議如何生成熱圖的顏色

想法是我想用一些數據生成熱圖。數據的值可以是從0到100 我想通過以下方式指定顏色：任何人都可以建議如何生成熱圖的顏色

0: Red , 50: Yellow, 100: Green

這意味着顏色由綠色red..yellow..to類似的梯度逐漸走3種顏色。以前我使用

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

對於紅色和綠色的梯度。任何人都可以建議我如何包括黃色之間。

來源

2015-10-17 Md Johirul Islam

我不明白爲什麼除以20是在那裏。

我會做以下事情。

將紅色（R）開始放滿。逐步提高綠色（G），以最大至50從那裏保持綠色滿和減少的R紅色逐漸

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;

因此最大強度和G將在中間。並朝着左邊紅燈就會凸顯出來，並朝着正確的綠色就會凸顯出來

來源

2015-10-17 15:18:07 knightrider

對於i = 50，它會給R = 127g的= 128，這不是黃色。但是在i = 50時可以得到R = 255和G = 255嗎？ –

@MdJohirulIslam我的不好。它現在修復了 – knightrider

稍微修正我發現R =（（i - 50）/ 50.0）* 255;應該是R = 255 - （（i - 50）/ 50.0）* 255.不是嗎？ –

假設你想要去的紅 - >黃 - >綠，讓我們這些的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>

來源

2015-10-17 15:42:59 DavidG

任何人都可以建議如何生成熱圖的顏色

回答

相關問題