如何为Vega-Lite柱状图按Category列实现分面展示？

你之前的错误在于把facet放在了data或encoding节点内部，Vega-Lite的facet是顶级配置属性，必须和data、mark、encoding等节点同级。

正确配置步骤 #

• 将facet配置移至顶级层级，与核心配置节点平级
• 配置row的field为"Category"，若需要横向排列可改用column
• 可选：添加resolve配置，让每个分面的Y轴刻度独立（适合不同分类数据范围差异大的场景）

示例代码对比 #

原始无Category列的代码（模拟）

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "your_data.csv"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "Product", "type": "ordinal"},
    "y": {"field": "Sales", "type": "quantitative"}
  }
}

新增Category列后的正确分面代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "your_data_with_category.csv"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "Product", "type": "ordinal"},
    "y": {"field": "Sales", "type": "quantitative"}
  },
  "facet": {
    "row": {"field": "Category", "type": "nominal"}
  },
  "resolve": {"scale": {"y": "independent"}} // 可选配置，根据需求添加
}

关键说明 #

• 给Category字段指定type: "nominal"，确保Vega-Lite正确识别其为分类类型
• 若要调整分面的布局间距、标题样式等，可在facet内添加header配置自定义，比如：

"facet": {
  "row": {"field": "Category", "type": "nominal"},
  "header": {"title": "分类", "labelFontSize": 12}
}

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