如何在Vega-Lite中制作区分实际与目标值配色的简易华夫饼图

以下是满足需求的实现方案：通过生成网格数据、条件标记格子类型，实现实际值与目标值的配色区分，且当实际值超过目标值时自动隐藏目标部分。

完整代码示例 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "华夫饼图：区分实际值与目标值，实际超目标时隐藏目标部分",
  "data": {
    "values": [{"actual": 75, "target": 100}] // 替换为你的实际数据
  },
  "transform": [
    // 生成10x10网格（总单位数100，可调整stop值改变网格大小）
    {"sequence": {"start": 0, "stop": 10, "as": "row"}},
    {"sequence": {"start": 0, "stop": 10, "as": "col"}},
    {"cross": {"with": "data"}},
    // 计算每个格子的索引（从0开始计数）
    {"calculate": "datum.row * 10 + datum.col", "as": "index"},
    // 标记格子所属类型：实际值、目标值（仅当实际<目标时）、空白
    {
      "calculate": "datum.index < datum.actual ? '实际值' : (datum.index < datum.target && datum.actual < datum.target ? '目标值' : '空白')",
      "as": "type"
    },
    // 过滤掉空白格子，只显示有效部分
    {"filter": "datum.type != '空白'"}
  ],
  "mark": "square",
  "encoding": {
    "x": {"field": "col", "type": "ordinal", "axis": null},
    "y": {"field": "row", "type": "ordinal", "axis": null},
    "color": {
      "field": "type",
      "type": "nominal",
      "scale": {
        "domain": ["实际值", "目标值"],
        "range": ["#2ECC71", "#E74C3C"] // 自定义配色，可按需修改
      },
      "legend": {"title": ""}
    },
    "size": {"value": 300} // 调整格子大小，适配你的显示需求
  },
  "config": {
    "view": {"stroke": null} // 隐藏图表边框
  }
}

关键逻辑说明 #

• 网格生成：通过sequence生成行和列数据，cross将网格与实际/目标数据合并，构建华夫饼的基础网格。这里用10x10网格代表100个单位，若需要不同总单位数，修改sequence的stop值即可（比如设为8则是8x8=64单位）。
• 类型标记：通过条件判断为每个格子标记类型：
  • 索引小于实际值的格子标记为「实际值」
  • 仅当实际值小于目标值时，索引在实际值到目标值之间的格子标记为「目标值」
  • 其余格子标记为「空白」并被过滤
• 配色控制：在color编码的scale中自定义实际值和目标值的颜色，直接修改range数组即可更换配色。
• 超目标处理：当实际值≥目标值时，「目标值」的标记条件不成立，不会生成对应格子，自然隐藏目标部分。

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