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