Раскраска Jquery Heat Map

Question

У меня есть таблица с каждым столбцом, имеющим значения от -100 до +100. Я хочу закрасить их всеми элементами от нуля до -100 от белого до темно-красного. и от нуля до +100 с цветами от белого до темно-зеленого.

Любое предложение о том, как я могу варить цвета, используя JQuery?

У меня проблемы с селекторами ... так что лучше всего, если я смогу просто установить фоновый CSS через jquery

Спасибо.

Answer 1

С помощью функции, которая может вычислять компонент цвета в точке между двумя значениями, вы можете использовать синтаксис цвета rgb(r,g,b) в CSS, чтобы установить цвет фона:

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.