如何根据数值为HTML网格单元格分配对应蓝色色调？

需求背景 #

有一个包含200+条目的JSON对象，结构示例如下：

{
  "id1": 0,
  "id2": 10,
  "id3": 51,
  "id4": 2
}

每个值均为≥0的随机数，其中minValue固定为0，maxValue为对象中的最大数值。这些数值对应一个HTML网格，每个单元格显示对应数值，需要实现：最大值对应最深蓝色rgb(3, 82, 255)，接近0的数值对应浅蓝或白色的背景色渐变效果。

解决方案步骤 #

1. 搭建基础HTML与CSS结构 #

先创建网格容器和单元格，确保布局正常：

<div class="grid-container">
  <div class="grid-cell" id="id1">0</div>
  <div class="grid-cell" id="id2">10</div>
  <!-- 其余200+单元格按此格式添加 -->
</div>

基础CSS样式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 2px;
  padding: 10px;
}
.grid-cell {
  padding: 8px;
  text-align: center;
  border: 1px solid #eee;
  font-size: 14px;
}

2. 编写JavaScript颜色映射逻辑 #

通过数值归一化计算对应的蓝色调，遍历单元格设置背景色：

// 你的数值对象
const valueObj = {
  "id1": 0,
  "id2": 10,
  "id3": 51,
  "id4": 2
  // 更多条目...
};

// 计算最大值
const values = Object.values(valueObj);
const maxValue = Math.max(...values);

// 数值转蓝色系RGB的核心函数
function getBlueShade(value) {
  // 将数值归一到0-1区间
  const normalized = maxValue === 0 ? 0 : value / maxValue;
  // 从白色(255,255,255)过渡到最深蓝色(3,82,255)
  const r = Math.floor(255 - normalized * (255 - 3));
  const g = Math.floor(255 - normalized * (255 - 82));
  const b = 255; // 保持蓝色通道最大值，可按需调整
  return `rgb(${r}, ${g}, ${b})`;
}

// 遍历设置每个单元格的背景色，同时适配文字颜色
Object.entries(valueObj).forEach(([id, value]) => {
  const cell = document.getElementById(id);
  if (!cell) return;
  
  const bgColor = getBlueShade(value);
  cell.style.backgroundColor = bgColor;
  
  // 计算背景亮度，自动切换文字颜色保证可读性
  const [r, g, b] = bgColor.match(/\d+/g).map(Number);
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  cell.style.color = brightness < 128 ? '#fff' : '#000';
});

可选优化 #

• 非线性过渡：如果需要让深色区域的颜色变化更明显，可将normalized替换为Math.pow(normalized, 1.5)之类的幂函数，调整过渡曲线。
• 批量渲染：若单元格数量极大，可先通过文档片段批量创建单元格再插入DOM，提升性能。

内容的提问来源于stack exchange，提问作者Fy17