基于值的 Html 热图答案

【问题标题】：Html Heat Map Based On Value基于值的 Html 热图
【发布时间】：2017-10-01 16:25:24
【问题描述】：

我有一个从数据库动态创建的表。

            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>");

            }

我想根据其值为每个单元格设置颜色，我的表格的输出是；

【问题讨论】：

您可以在表格创建后立即运行脚本，以检查值和更新样式（但可能必须有更好的方法）
你有样品吗？我无法想象@ArmaGeddON
您可以遍历所有要更改的 td 元素，检查它们的值并相应地更改样式
@mstfky 有人解决了您的问题吗？如果是这样，您能否接受最佳答案（单击点下的复选标记）。这将帮助遇到您的问题的其他用户快速发现接受的答案，并且还提供 15 个代表。指向作者（：

标签： javascript jsp colors cell heatmap

【解决方案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;
}

【讨论】：