jQueryを使ってテーブルのセルに入力された数字に応じて背景カラーを変える

jQueryを使ってテーブルのセルに入力
された数字のデータをカラーでグルー
ピングできるようにする方法です。
プラグインは不要で簡単なコードで実現
できます。大量のデータがあるときは
使ってみては。

個人的にはあまり使う機会ありませんけど。大量の数字が入力されたテーブルほど見にくいものはありませんのでイザという時のためにメモ。

jQueryを使ってテーブルのセルに入力された数字に応じて背景カラーを変える方法。数字のみが入力されたテーブルの可視性を、色の濃度でグルーピングして可視性を高めます。

Sample

こんな感じでグルーピング出来ました。濃い色ほど数字が大きいです。普通にマークアップすれば勝手に色が変るので管理が楽じゃないかなと。

コード

$(document).ready(function() {

    // 配列内の最大値を取得する関数
    Array.max = function(array) {
        return Math.max.apply(Math, array);
    };

    // すべての値を取得
    var counts = $('#heat-map-3 tbody td').not('.stats-title').map(function() {
        return parseInt($(this).text());
    }).get();

    // 最大値を返す
    var max = Array.max(counts);

    // 色を指定する
    xr = 255;
    xg = 255;
    xb = 255;

    yr = 78;
    yg = 204;
    yb = 243;

    n = 100;

    // 各データポイントをループして、その％の値を計算する
    $('#heat-map-3 tbody td').not('.stats-title').each(function() {
        var val = parseInt($(this).text());
        var pos = parseInt((Math.round((val / max) * 100)).toFixed(0));

        red = parseInt((xr + ((pos * (yr - xr)) / (n - 1))).toFixed(0));
        green = parseInt((xg + ((pos * (yg - xg)) / (n - 1))).toFixed(0));
        blue = parseInt((xb + ((pos * (yb - xb)) / (n - 1))).toFixed(0));
        clr = 'rgb(' + red + ',' + green + ',' + blue + ')';
        $(this).css({
            backgroundColor: clr
        });

    });

});

jQuery本体と上記コードで動作します。色はRGBで指定します。

マークアップは普通のテーブルと変りません。

<table cellpadding="0" cellspacing="0" border="0" class="heat-map" id="heat-map-3">
    <thead>
        <tr>
            <th class="first">Title</th>
            <th>data 1</th>
            <th>data 2</th>
            <th>data 3</th>
            <th>data 4</th>
            <th>data 5</th>
            <th class="last">data 6</th>
        </tr>
    </thead>
    <tbody>
        <tr class="stats-row">
            <td class="stats-title">Wanda</td>
            <td>25</td>
            <td>55</td>
            <td>26</td>
            <td>19</td>
            <td>39</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

応用していろいろ勉強してみたいです。以下を参考にしました。
via:Design Chemical