Jquery 热图着色

Question

我有一个表，每列的值在 -100 到 +100 之间。 我想用低于 0 到 -100 的所有元素对它们进行着色，从白色到深红色。 以及从 0 到 +100 的颜色从白色到深绿色。

关于如何使用 JQuery 调制颜色有什么建议吗？

我在选择器方面遇到了麻烦..所以最好我可以通过 jquery 做一个设置背景 css

谢谢。

Answer 1

通过可以计算两个值之间某个点的颜色分量的函数，您可以使用 CSS 中的 rgb(r,g,b) 颜色语法来设置背景颜色：

function morph(start, stop, point) {
  return Math.round(stop - start) * point / 100 + start);
}

$('td').each(function(){
  var value = parseInt($(this).text());
  var color;
  if (value < 0) {
    color = morph(255,100,-value) + ',' + morph(255,0,-value) + ',' + morph(255,0,-value);
  } else {
    color = morph(255,0,value) + ',' + morph(255,50,value) + ',' + morph(255,0,value);
  }
  $(this).css('background-color', 'rgb(' + color + ')');
});

Answer 2

我可以推荐我自己的 jQuery 插件吗？

jQuery Hottie 可以轻松地采用正常标记并添加背景颜色，如下所示：

<table id="myTable">
    <tr><td>-100</td><td>50</td><td>-30</td></tr>
    <tr><td>100</td><td>0</td><td>-30</td></tr>
    <tr><td>750</td><td>-50</td><td>40</td></tr>
</table>

在 JS 中：

$("#myTable td").hottie({
    colorArray : [ 
        "#F8696B", // highest value
        "#FFFFFF",
        "#63BE7B"  // lowest value
        // add as many colors as you like...
    ]
});

结果：

在 JSFiddle

Answer 3

您可以考虑使用 HeatColor jQuery 插件。但请注意，您想要的精确颜色序列可能不可用。

很好的教程< /a> 可以在 designchemical.com 上找到有关自行开发的信息。

Answer 4

我在任何需要具有不同级别的绿色（最高值）和红色（最低值）的表上使用以下函数。

（在此示例中，td 值是代表百分比的浮点数 - 例如 0.941 代表 94.1%）：

function heatmap()
{
    var heat_max = 0;
    var heat_min = 100;

    //loop through table cells to find min and max values
    $('table#heatmap').find('td').each(function() 
    {
        var cell_val = Math.round(parseFloat($(this).text()) * 1000) / 10;

        if(cell_val > heat_max) { heat_max = cell_val;}
        if(cell_val < heat_min) { heat_min = cell_val;}
    });

    //reloop through table cells and apply background color
    $('table#heatmap').find('td').each(function()
    {
        var cell_val = Math.round(parseFloat($(this).text()) * 1000) / 10;

        var color_pct = (cell_val - heat_min)  / (heat_max - heat_min);
        var color_int = 2 * 255 * color_pct;

        var r = 255, g = 255;
        if(color_int <= 255) { g = color_int;        } 
                       else  { r =  510 - color_int; }

        var bg_color = 'rgba('+r+', '+g+', 50, 0.2)';

        $(this).css({'backgroundColor' : bg_color});
    });

}