如何用SingleDivUI实现根据数值动态设置颜色的条形图

SingleDivUI是一种仅使用单个HTML元素配合CSS实现各类UI效果的设计思路，在制作轻量级数据可视化组件时优势明显。我们可以用这种方式实现条形图，并且让条形颜色根据数值动态变化，无需引入复杂图表库。

核心实现原理

要实现根据数值动态设置颜色的条形图，核心逻辑分为两部分：一是用单个<div>元素通过CSS绘制条形基础样式，二是建立数值到颜色的映射规则，通过CSS变量传递数值并动态计算对应颜色。

数值与颜色的映射规则

我们可以预设数值区间和对应的颜色，比如数值0-30对应红色，31-70对应黄色，71-100对应绿色，这样数值越高颜色越偏向安全色，直观反映数据好坏。

完整实现步骤

1. HTML结构

只需要一个<div>元素，通过自定义属性存储条形对应的数值，后续通过CSS读取该属性值进行样式计算。

<!-- 单个div元素，data-value存储条形数值 -->
<div class="single-div-bar" data-value="85"></div>

2. CSS样式配置

通过CSS变量接收数值，结合<linear-gradient>或者<background-color>的动态计算实现颜色切换，同时设置条形的宽度、高度等基础样式。

/* 定义颜色映射的CSS变量 */
:root {
  --bar-low-color: #ff4d4f;   /* 低数值颜色：红色 */
  --bar-mid-color: #faad14;   /* 中数值颜色：黄色 */
  --bar-high-color: #52c41a;  /* 高数值颜色：绿色 */
}

.single-div-bar {
  /* 从data-value属性读取数值，存储到--bar-value变量 */
  --bar-value: attr(data-value number, 0);
  width: calc(var(--bar-value) * 1%); /* 条形宽度随数值比例变化，最大100% */
  height: 40px;
  border-radius: 4px;
  transition: all 0.3s ease;
  /* 根据数值区间动态设置背景色 */
  background-color: color-mix(
    in srgb,
    var(--bar-high-color) calc(max(0, min(100, var(--bar-value) - 70)) * 1%),
    var(--bar-mid-color) calc(max(0, min(40, var(--bar-value) - 30)) * 1%),
    var(--bar-low-color) calc(max(0, 40 - var(--bar-value)) * 1%)
  );
}

3. 兼容处理方案

如果浏览器不支持<color-mix>函数，可以用JavaScript辅助读取数值并直接设置背景色，逻辑更通用。

// 获取所有条形元素
const barElements = document.querySelectorAll('.single-div-bar');
// 遍历元素设置动态颜色
barElements.forEach(bar => {
  const value = parseInt(bar.dataset.value, 10);
  let color;
  if (value <= 30) {
    color = '#ff4d4f';
  } else if (value <= 70) {
    color = '#faad14';
  } else {
    color = '#52c41a';
  }
  bar.style.backgroundColor = color;
  // 设置宽度
  bar.style.width = `${value}%`;
});

效果验证与调整

我们可以修改<div>的<data-value>属性值，查看条形颜色和宽度的变化是否符合预期：

• 当<data-value>为20时，条形为红色，宽度为20%
• 当<data-value>为55时，条形为黄色，宽度为55%
• 当<data-value>为90时，条形为绿色，宽度为90%

常见问题解答

数值超过100怎么办

可以在CSS计算宽度时增加限制，比如<width: calc(min(var(--bar-value), 100) * 1%)>，避免条形超出容器范围。

能否支持更多颜色区间

可以扩展CSS变量和映射规则，增加更多区间对应的颜色，同时调整颜色计算的逻辑即可实现多区间颜色映射。

SingleDivUI条形图动态颜色css图表修改时间：2026-06-23 22:18:35