jquery - Jquery ヒート マップの色付け

Question

-100 から +100 までの値を持つすべての列を含むテーブルがあります。0 から -100 までのすべての要素で白から濃い赤に色付けしたいと思います。ゼロから +100 までの色で、白から濃い緑までの色があります。

JQuery を使用して色を作成する方法について何か提案はありますか?

セレクターに問題があります..jqueryを介してバックグラウンドCSSを設定できれば最高です

ありがとうございました。

Answer 1

2 つの値の間の点で色成分を計算できる関数を使用すると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 プラグインの使用を検討してください。ただし、必要な正確なカラー シーケンスが利用できない場合があることに注意してください。

独自のロール作成に関する優れたチュートリアルは、designchemical.com で見つけることができます。