基于数值的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>");

            }

我希望每个单元格的颜色都基于它的值，我的表格输出如下图所示:

- mstfky

---

你可以在表格创建后立即运行脚本，检查值并更新样式（虽然可能有更好的方法）。 - ArmaGeddON

你有任何样例吗？我无法想象@ArmaGeddON。 - mstfky

你可以迭代所有你想要改变的 td 元素，检查它们的值，并相应地改变样式。 - ArmaGeddON

@mstfky，有人解决了你的问题吗？如果是这样，请接受最佳答案（在积分下方点击复选标记）。这将帮助其他用户快速找到被接受的答案，并为作者提供15个声望积分(: - Danziger

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;
}

- Danziger