如何使用Vega或Vega-Lite绘制如图所示的图网络？

你要绘制的是带误差线的分组条形图，以下是用Vega-Lite实现的具体方案：

1. 准备匹配的数据结构 #

数据需要包含分组、子类别、中心值（条形高度）、误差上下限这几个核心字段，示例结构如下：

{
  "values": [
    {"分组": "Group 1", "子类别": "A", "均值": 20, "下限": 17, "上限": 23},
    {"分组": "Group 1", "子类别": "B", "均值": 35, "下限": 32, "上限": 38},
    {"分组": "Group 1", "子类别": "C", "均值": 28, "下限": 25, "上限": 31},
    {"分组": "Group 2", "子类别": "A", "均值": 25, "下限": 22, "上限": 28},
    {"分组": "Group 2", "子类别": "B", "均值": 30, "下限": 27, "上限": 33},
    {"分组": "Group 2", "子类别": "C", "均值": 32, "下限": 29, "上限": 35},
    {"分组": "Group 3", "子类别": "A", "均值": 18, "下限": 15, "上限": 21},
    {"分组": "Group 3", "子类别": "B", "均值": 22, "下限": 19, "上限": 25},
    {"分组": "Group 3", "子类别": "C", "均值": 26, "下限": 23, "上限": 29}
  ]
}

2. 完整Vega-Lite配置代码 #

通过分面布局实现横向分组，层叠标记组合条形和误差线：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"分组": "Group 1", "子类别": "A", "均值": 20, "下限": 17, "上限": 23},
      {"分组": "Group 1", "子类别": "B", "均值": 35, "下限": 32, "上限": 38},
      {"分组": "Group 1", "子类别": "C", "均值": 28, "下限": 25, "上限": 31},
      {"分组": "Group 2", "子类别": "A", "均值": 25, "下限": 22, "上限": 28},
      {"分组": "Group 2", "子类别": "B", "均值": 30, "下限": 27, "上限": 33},
      {"分组": "Group 2", "子类别": "C", "均值": 32, "下限": 29, "上限": 35},
      {"分组": "Group 3", "子类别": "A", "均值": 18, "下限": 15, "上限": 21},
      {"分组": "Group 3", "子类别": "B", "均值": 22, "下限": 19, "上限": 25},
      {"分组": "Group 3", "子类别": "C", "均值": 26, "下限": 23, "上限": 29}
    ]
  },
  "facet": {"column": {"field": "分组", "header": {"title": null}}},
  "spec": {
    "layer": [
      {
        "mark": "bar",
        "encoding": {
          "x": {"field": "子类别", "title": null},
          "y": {"field": "均值", "title": "数值"},
          "color": {"field": "子类别", "legend": null}
        }
      },
      {
        "mark": {"type": "errorbar", "color": "black"},
        "encoding": {
          "x": {"field": "子类别"},
          "y": {"field": "下限", "type": "quantitative"},
          "y2": {"field": "上限"}
        }
      }
    ]
  },
  "resolve": {"scale": {"x": "independent"}}
}

3. 关键配置说明 #

• 分面布局：用column字段将不同分组拆分到横向列，和目标图结构对齐。
• 层叠标记：第一层bar绘制主数据条形，第二层errorbar绑定上下限字段生成误差线。
• 样式优化：关闭子类别图例、设置独立X轴，避免多分组间的视觉干扰。

4. 细节匹配调整 #

如果需要完全贴合目标图样式，可补充以下配置：

• 自定义配色：在color编码中添加scale: {"range": ["#6baed6", "#fc8d59", "#74c476"]}匹配目标图颜色。
• 误差线样式：修改errorbar的mark配置，比如"ticks": {"width": 5}加粗误差线端点。
• 全局样式：通过config字段统一设置坐标轴字体、条形圆角等细节。

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