如何基于数值动态设置SingleDivUI条形图颜色

SingleDivUI是一款轻量化的前端图表库，核心特点是仅通过单个DOM元素配合CSS实现图表渲染，性能开销低，适合嵌入各类轻量应用。在实际业务场景中，我们常常需要根据条形图对应的数值大小动态调整颜色，比如数值越高颜色越深，或者不同数值区间对应不同颜色，以此更直观地展示数据差异。

核心实现思路

要实现基于数值动态设置条形图颜色，整体流程可以分为三步：

• 定义数值到颜色的映射规则，比如数值区间和对应颜色的对应关系，或者线性渐变的映射公式
• 遍历条形图的数据源，对每个数值按照映射规则计算出对应的颜色值
• 将计算出的颜色值传递给SingleDivUI的条形图渲染配置，完成颜色动态绑定

映射规则设计

区间映射方案

如果业务需要明确划分数值区间，比如将数值分为低、中、高三个档位，可以预先定义区间和颜色的对应关系：

// 数值区间颜色映射配置
const colorMap = [
  { min: 0, max: 30, color: '#409eff' },   // 低数值区间 蓝色
  { min: 30, max: 70, color: '#67c23a' },  // 中数值区间 绿色
  { min: 70, max: 100, color: '#f56c6c' }  // 高数值区间 红色
];

// 根据数值获取对应颜色
function getColorByValue(value) {
  for (const item of colorMap) {
    if (value >= item.min && value < item.max) {
      return item.color;
    }
  }
  // 超出区间默认返回最高档颜色
  return colorMap[colorMap.length - 1].color;
}

线性渐变映射方案

如果需要颜色随数值连续变化，可以采用线性渐变的计算方式，以下是从蓝色到红色的渐变实现：

// 线性渐变颜色计算 数值范围0-100 颜色从#409eff到#f56c6c
function getLinearColor(value) {
  const startColor = { r: 64, g: 158, b: 255 };  // #409eff的RGB值
  const endColor = { r: 245, g: 108, b: 108 };   // #f56c6c的RGB值
  // 计算数值占比 确保不超过1
  const ratio = Math.min(value / 100, 1);
  // 计算对应RGB分量
  const r = Math.round(startColor.r + (endColor.r - startColor.r) * ratio);
  const g = Math.round(startColor.g + (endColor.g - startColor.g) * ratio);
  const b = Math.round(startColor.b + (endColor.b - startColor.b) * ratio);
  // 转成十六进制颜色
  return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
}

SingleDivUI条形图集成实现

假设我们已经引入了SingleDivUI库，以下是完整的动态颜色条形图实现代码：

// 条形图数据
const chartData = [
  { name: '产品A', value: 25 },
  { name: '产品B', value: 45 },
  { name: '产品C', value: 82 },
  { name: '产品D', value: 15 },
  { name: '产品E', value: 90 }
];

// 为每个数据项计算动态颜色
const processedData = chartData.map(item => ({
  ...item,
  color: getColorByValue(item.value)  // 使用前面定义的区间映射函数 也可以换成getLinearColor
}));

// 初始化SingleDivUI条形图
const chartContainer = document.getElementById('chart');
const barChart = new SingleDivUI.BarChart(chartContainer, {
  data: processedData,
  // 绑定颜色配置 使用数据中的color字段
  barStyle: (item) => ({
    backgroundColor: item.color
  }),
  width: 600,
  height: 400
});

// 渲染图表
barChart.render();

对应的HTML容器只需要一个普通的div元素：

<div id="chart"></div>

注意事项

• 数值范围需要和映射规则匹配，避免出现数值超出映射区间导致颜色为空的情况，建议设置默认兜底颜色
• SingleDivUI的颜色配置需要符合其API要求，部分版本可能支持直接传入颜色数组，也可以根据版本调整配置方式
• 如果数值是动态更新的，需要在数据更新后重新调用颜色计算逻辑，再执行图表的更新渲染方法

动态颜色设置的核心是将业务逻辑的数值映射到可视化层的颜色属性，只要理清映射关系，结合SingleDivUI的配置规则就可以快速实现对应效果。

SingleDivUI条形图动态颜色数值映射前端渲染修改时间：2026-06-22 05:39:57