HTML TABLE セルの数値に合わせてセルの背景色を変更グラデーション

2021-03-192021-04-12

テーブルを使ったヒートマップ作成

はじめに

HTMLで、表に数字を羅列した場合、ぱっと見どこが大きくてどこが小さいのか分からなくないですか？？

そこでセルの数値が大きいほどセルの色が濃くなるような、グラデーションを作るJavaScriptを作りました。
これで一目でどのあたりが数字が大きくてどのあたりの数字が小さいのか分かるようになります。

はじめに
コード
表示
おわりに

コード

ヘッダーでjqueryと以下css, jsファイルを呼び出します。
bodyは数字を作る繰り返しなので、JavaScriptで記述しました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./js.js"></script>
    <link rel="stylesheet" href="./css.css">
  </head>
  <body>
    <h1 id="time">数字に合わせてグラデーション</h1>
    <div id="content"></div>
  </body>
</html>

特にこのcssはなくても大丈夫です。

body{
  text-align: center;
}
table.table{
  margin-left : auto ;
  margin-right : auto ;
  border-collapse: collapse;
  min-width: 60%;
}
.table table,.table td,.table th{
  border:1px solid rgb(160, 160, 160);
}

セルの数値が低ければ白、数値が高ければオレンジ、にグラデーションで近づいていくようにしました。

変数のnumに、配列で数値を入力します。
以下プログラムは手入力してますが、サーバーから取得した値やセンサーの値を反映させるといいと思います。


$(document).ready(function() {
    make_table();
});

//表数値の例
var num=[
    [1,2,3,4,5],
    [6,20,7,8,9],
    [10,9,15,16,17],
    [1,2,1,0,19],
    [1,20,1,0,1],
    [0,1,2,1,0],
];

//表作成
function make_table(){
    let t='';

    t+='<table class="table">';
    num.forEach(function( arr ) {
        t+='<tr>';
        arr.forEach(function( v ) {
            let bgcolor=bg_color(v);
            t+='<td bgcolor="'+bgcolor+'">'+v+'</td>'
        });
        t+='</tr>';
    });
    t+='</table>';

    $('#content').html(t);
}

//背景色
function bg_color(t){
    let rgb_1=[255,255,255];//白
    let rgb_2=[255,102,0];//オレンジ
    let t_max=20;//最大の数値

    let x;
    if(t<0){
        x=0;
    }else if(t>t_max){
        x=t_max;
    }else{
        x=t;
    }
    let color_bac="#";
    for(let i=0,l=rgb_1.length;i<l;i++){
        let c1=rgb_1[i];
        let c2=rgb_2[i];

        let bac=Math.round(c1-(c1-c2)/t_max*x);
        color_bac+=("0"+bac.toString(16)).slice(-2);
    }
    return color_bac;
}