第三色彩層次添加爲Javascript/jQuery文檔表熱圖

Question

我使用的是HTML表格熱圖jQuery腳本由：

http://www.designchemical.com/blog/index.php/jquery/jquery-tutorial-create-a-flexible-data-heat-map/

我已經能夠修改它，並把它清理乾淨，可以正常使用與我們的數據集。但是，當前腳本只允許使用兩種顏色，並且不計算具有標準偏差的介質以包含第三種顏色，例如黃色。

這裏是低於當前的腳本：

<script type="text/JavaScript"> 
    $(document).ready(function() { 
     // Function to get the Max value in Array 
     Array.max = function (array) { 
      return Math.max.apply(Math, array); 
     }; 

     // get all values 
     var counts = $('.heatmap tbody td').not('.first_row').map(function() { 
      return parseInt($(this).text().replace(/,/g, "").replace(/\(|\)/g, "")); 
     }).get(); 

     // return max value 
     var max = Array.max(counts); 

     // red color for lowest data 
     xr = 251; 
     xg = 121; 
     xb = 105; 

     // green color for highest data 
     yr = 138; 
     yg = 251; 
     yb = 107; 
     n = 100; 

     // add classes to cells based on nearest 10 value 
     $('.heatmap tbody td').not('.first_row').each(function() { 
      var val = parseInt($(this).text().replace(/,/g, "").replace(/\(|\)/g, "")); 
      var pos = parseInt((Math.round((val/max) * 100)).toFixed(0)); 
      red = parseInt((xr + ((pos * (yr - xr))/(n - 1))).toFixed(0)); 
      green = parseInt((xg + ((pos * (yg - xg))/(n - 1))).toFixed(0)); 
      blue = parseInt((xb + ((pos * (yb - xb))/(n - 1))).toFixed(0)); 
      clr = 'rgb(' + red + ',' + green + ',' + blue + ')'; 
      $(this).css({ 
       backgroundColor: clr 
      }); 
     }); 
    }); 
</script> 

熱圖目前由紅色變爲綠色，我想補充的計算，對於中程增加了黃色。我在這裏創建了一個jsFiddle：http://jsfiddle.net/7z8D4/與我正在使用的腳本和熱圖表結構。

例如，如果我有下面的數據集，它應該是彩色的，如：

1  red 
2  red 
3  pink 
4  pink 
5  yellow 
6  yellow 
7  lime green 
8  lime green 
9  green 
10  green 

我真的很感激有這方面的見解。 :)

Answer 1

紅色（0％）到黃色（50％），綠色（100％）

var pos = val/(max * 1.0); 

red = Math.round(pos < 0.5 ? 255 : ((1 - pos) * 2) * 255); 
green = Math.round(pos < 0.5 ? (pos * 2) * 255 : 255); 
blue = 0; 

Answer 2

我創建了一個非常簡單的JavaScript函數（見http://jsfiddle.net/4vCfc/），提供了一個RGB顏色在紅色通過黃色，然後是藍色的顏色漸變，我正在使用熱圖來演示表單中字段的使用。

這裏的函數定義：

function getHeatColorAsRbg(percentage) //percent is a number between 0 and 1. 
{ 
//RED - YELLOW (255, 0, 0) to (255, 255, 0) 
//THEN YELLOW TO BLUE (255,255,0) to (0, 0, 255) 
var red = 0; 
var blue = 0; 
var green = 0; 

//Two cases - 1.0 down to 0.5 and 0.5 down to 0. 

if(percentage >= 0.5) 
{ 
    red = 255; 
    green = Math.round(255 * 2 * (1 - percentage)); 
    blue = 0; 
} 
else 
{ 
    blue = 255 - Math.round((percentage/0.5)*255); 
    red = 255 - blue; 
    green = red; 
} 

return "rgb(" + red + "," + green + "," + blue + ")"; 

}

Answer 3

沒有找到在數組中最小的方法只是半方法））