Question

我有一个表，每列的值介于-100到+100之间。我想用零到-100之间的所有元素为它们着色，从白色到深红色。以及从零到+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

在JSFiddle

中查看此示例

Answer 3

您可以考虑使用HeatColor jQuery插件。但是，请注意，您可能无法获得所需的精确颜色序列。

您可以在designchemical.com找到自己的good tutorial。

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});
    });

}

Jquery热图着色

4 个答案: