如何用纯JavaScript实现无第三方依赖的动态颜色条数据可视化

步骤1：规范数据结构 #

先将占比数据调整为合法JS对象格式，值存储为不带百分号的数值方便计算：

// 可动态更新的源数据
let colorData = {
  green: 20,
  yellow: 30,
  red: 50
}

步骤2：重写绘制函数 #

修改drawColors函数支持接收动态数据，自动计算每个色块的宽度和位置：

const drawColors = (data) => {
  const colorBar = document.getElementById("color-bar");
  const context = colorBar.getContext('2d');
  // 读取canvas实际宽高，后续修改canvas尺寸也不需要调整逻辑
  const totalWidth = colorBar.width;
  const totalHeight = colorBar.height;

  // 清空画布，避免旧绘制内容残留
  context.clearRect(0, 0, totalWidth, totalHeight);

  let currentX = 0; // 记录当前色块的起始X坐标
  // 遍历数据依次绘制色块
  Object.entries(data).forEach(([color, percent]) => {
    const blockWidth = totalWidth * (percent / 100);
    context.fillStyle = color;
    context.fillRect(currentX, 0, blockWidth, totalHeight);
    currentX += blockWidth; // 偏移量累加，下一个色块从当前结束位置开始
  })
}

// 初始化渲染
drawColors(colorData);

步骤3：数据更新同步刷新 #

当你需要更新占比数据时，修改数据源后重新调用drawColors传入新数据即可自动同步视图：

// 示例：2秒后更新占比数据
setTimeout(() => {
  colorData = {
    green: 10,
    yellow: 20,
    red: 70
  };
  drawColors(colorData);
}, 2000);

保留原有HTML代码即可 #

<canvas id="color-bar" width="300" height="100"></canvas>

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