Htmlヒートマップ値に基づいて

Question

私はデータベースから動的に作成されたテーブルを持っています。

  for (int m = 0; m < table.size(); m++) { 

       out.print("<tr>"); 

       for (int k = 0; k < table.get(0).length; k++) 

       { out.print("<td width='10'>"); 
        out.print(table.get(m)[k]); 
        out.println("</td>"); 
       } 
       out.println("</tr>"); 

      } 

私は各セルをその値に基づいて色づけしたいと思います。

Answer 1

利用HSLの代わりに、あなたの色を表現するRGB。

あなたはこのようなものが必要になります。理想的には

let table = '<table>'; 
 

 
for (let i = 0; i < 4; ++i) { 
 

 
    table += '<tr>'; 
 

 
    for(let k = 0; k < 10; ++k) { 
 
    const value = Math.random(); 
 
    const h = 240 - value * 240; 
 
    
 
    table += '<td style="background: hsl(' + h + ', 100%, 50%)">' + value.toFixed(2) + '</td>'; 
 
    } 
 

 
    table += '</tr>'; 
 
} 
 

 
document.write(table);

table { 
 
    border: 1px solid #000; 
 
    border-collapse: collapse; 
 
    font-family: Sans-Serif; 
 
    color: #000; 
 
} 
 

 
td { 
 
    border: 2px solid #000; 
 
    padding: .5rem; 
 
}

、あなたがクライアントに送信ページがすでに色を持つようにあなたのバックエンドでstyle属性を追加します。何らかの理由でそれができない場合は、クライアントのセルに行き、その値を読み取り、適切な背景色を追加します。

HSLの他のコンポーネントを使用すると、異なる色のスキーマを生成することができます。たとえば、この場合は青、黒とその両端に白い付きシングル色相スケール、および途中でお好みの色は、：

let table = '<table>'; 
 

 
for (let i = 0; i < 4; ++i) { 
 

 
    table += '<tr>'; 
 

 
    for(let k = 0; k < 10; ++k) { 
 
    const value = Math.random(); 
 
    const l = value * 100; 
 
    const textColor = l < 35 ? '#FFF' : '#000'; 
 
    
 
    table += '<td style="background: hsl(200, 100%, ' + l + '%); color: ' + textColor + '">' + value.toFixed(2) + '</td>'; 
 
    } 
 

 
    table += '</tr>'; 
 
} 
 

 
document.write(table);

table { 
 
    border: 1px solid #000; 
 
    border-collapse: collapse; 
 
    font-family: Sans-Serif; 
 
    color: #000; 
 
} 
 

 
td { 
 
    border: 2px solid #000; 
 
    padding: .5rem; 
 
}