如何将Progress Bar图表转换为Unit Chart Progress Bar（理想单位为10）

现有可视化配置代码如下：

{
  "width": 300,
  "height": {"step": 30},
  "data": {
    "values": [
      {"region": "Central", "achieved": 0.218, "remaining": 0.782},
      {"region": "East", "achieved": 0.295, "remaining": 0.705},
      {"region": "West", "achieved": 0.171, "remaining": 0.829},
      {"region": "South", "achieved": 0.316, "remaining": 0.684}
    ]

  },
  "transform": [
    {"fold": ["achieved", "remaining"], "as": ["label", "percentage"]}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "region", "type": "nominal"},
    "x": {
      "field": "percentage",
      "type": "quantitative",
      "axis": null
    },
    "color": {"field": "label", "type": "nominal", 
    "scale": {"range": ["blue", "lightgrey"]}
}
  }
}

转换实现方案 #

要做出单位为10的Unit Chart Progress Bar，核心是把百分比转化为对应数量的独立单位元素，具体修改如下：

1. 调整数据转换逻辑 #

替换原有的fold转换，新增三步数据处理：

• 计算每个区域的已完成单位数（按10为基数取整）
• 计算剩余单位数（10减去已完成数）
• 把单个区域的数值拆分为10个独立的单位条目

2. 修改标记与编码 #

将bar标记改为固定尺寸的rect（小方块），并调整X轴为单位索引，确保每行刚好10个单位。

修改后的完整配置 #

{
  "width": 300,
  "height": {"step": 30},
  "data": {
    "values": [
      {"region": "Central", "achieved": 0.218},
      {"region": "East", "achieved": 0.295},
      {"region": "West", "achieved": 0.171},
      {"region": "South", "achieved": 0.316}
    ]
  },
  "transform": [
    {
      "calculate": "floor(datum.achieved * 10)",
      "as": "achieved_units"
    },
    {
      "calculate": "10 - datum.achieved_units",
      "as": "remaining_units"
    },
    {
      "repeat": [{"value": "achieved_units", "label": "achieved"}, {"value": "remaining_units", "label": "remaining"}],
      "as": ["count", "status"]
    },
    {
      "sequence": {"start": 0, "stop": {"expr": "datum.count"}, "as": "unit_index"}
    }
  ],
  "mark": {"type": "rect", "width": 25, "height": 20},
  "encoding": {
    "y": {"field": "region", "type": "nominal", "axis": {"title": null}},
    "x": {"field": "unit_index", "type": "ordinal", "axis": null},
    "color": {
      "field": "status",
      "type": "nominal",
      "scale": {"range": ["blue", "lightgrey"]},
      "legend": null
    }
  }
}

关键细节说明 #

• 用floor(datum.achieved *10)保证已完成单位数为整数，总单位数固定为10
• sequence转换会根据数量生成对应个数的单位条目，确保每行刚好10个小方块
• 固定rect的宽高，让所有单位元素保持一致大小，符合Unit Chart的视觉效果

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