在日常的数据可视化工作中，我们常常需要将枯燥的数字以更直观、更美观的方式展示出来。今天，就让我们一起探索如何用纯 JavaScript 为表格数据添加渐变色填充，让数据“活”起来！
场景背景
假设我们有一组数据，比如某个产品的评分、销量或用户反馈等，我们希望在表格中以颜色的深浅来直观地表示数值的大小。数值越大，颜色越深；数值越小，颜色越浅。这种可视化方式不仅美观，还能快速帮助我们识别数据的高低差异。
实现思路
为了实现这个效果，我们需要完成以下几步：
- 准备数据：将数据以数组的形式存储，每个对象代表一行数据。
- 计算最大值：对于每个字段，找出最大值，用于后续的颜色比例计算。
- 生成渐变色：根据数值与最大值的比例，生成从浅到深的渐变色。
- 创建表格并填充数据：动态生成表格，并将计算好的颜色应用到表格单元格中。
具体实现
以下是完整的代码实现，你可以直接复制到本地运行：
表格渐变色填充
<script>
const data = [
{ field1: 100, field2: 0, field3: 0 },
{ field1: 99, field2: 0, field3: 0 },
{ field1: 3.3, field2: 0, field3: 0 },
{ field1: 3.2, field2: 3, field3: 0 },
{ field1: 2.2, field2: 2, field3: 0 },
{ field1: 0, field2: 1, field3: 0 },
{ field1: 0, field2: 0, field3: 3 },
{ field1: 0, field2: 0, field3: 2 },
{ field1: 0, field2: 0, field3: 1 }
];
// 辅助函数，用于生成渐变色
function generateGradientColor(value, maxVal, startColor, endColor) {
const startRGB = parseInt(startColor.slice(1), 16);
const endRGB = parseInt(endColor.slice(1), 16);
const r1 = (startRGB >> 16) & 0xff;
const g1 = (startRGB >> 8) & 0xff;
const b1 = startRGB & 0xff;
const r2 = (endRGB >> 16) & 0xff;
const g2 = (endRGB >> 8) & 0xff;
const b2 = endRGB & 0xff;
const r = Math.round((r2 - r1) * (value / maxVal) + r1);
const g = Math.round((g2 - g1) * (value / maxVal) + g1);
const b = Math.round((b2 - b1) * (value / maxVal) + b1);
return `rgb(${r}, ${g}, ${b})`;
}
// 动态处理任意字段，并为每个对象添加渐变色
function addGradientColorsToData(data, fields, startColor, endColor) {
fields.forEach(field => {
const maxVal = Math.max(...data.map(item => item[field] || 0));
data.forEach(item => {
if (item[field] > 0) {
item[`${field}_bgcolor`] = generateGradientColor(item[field], maxVal, startColor, endColor);
}
});
});
}
// 调用函数，传入数据、字段名数组、起始色值和结束色值
addGradientColorsToData(data, ['field1', 'field2', 'field3'], '#FFFF00', '#FF0000');
// 创建表格并填充数据
function createDataTable(data) {
const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');
const headerRow = document.createElement('tr');
// 创建表头
['Field1', 'Field2', 'Field3'].forEach((field, index) => {
const th = document.createElement('th');
th.textContent = field;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建表体
data.forEach(item => {
const row = document.createElement('tr');
['field1', 'field2', 'field3'].forEach(field => {
const cell = document.createElement('td');
cell.style.backgroundColor = item[`${field}_bgcolor`] || '#ffffff';
cell.textContent = item[field] || '0';
row.appendChild(cell);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
return table;
}
// 将表格添加到页面中
document.getElementById('data-table').appendChild(createDataTable(data));
</script>
效果展示
运行上述代码后，你会看到一个表格，其中的单元格颜色会根据数值的大小从浅黄色（#FFFF00）渐变到深红色（#FF0000）。数值越大，颜色越深，直观地展示了数据的变化。
总结
通过简单的 JavaScript 和 HTML，我们就可以实现这种有趣且实用的数据可视化效果。你可以根据自己的需求调整颜色、字段或数据源，让表格更加符合你的业务场景。
如果你觉得这个方法很酷，不妨在你的项目中尝试一下！数据可视化不仅能提升用户体验，还能让你的报表更加专业和美观。