• かちびと.net

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

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services