Vega Lite折叠图表如何添加柱状图与数据标签双层图层？

核心原因 #

折叠（fold）转换会将多列数据转为key（原列名）和value（对应值）的结构，若添加图层时遗漏了对key字段的分组引用，就会导致折叠后的列被合并。

解决步骤 #

1. 保留fold转换的完整结构
   先完成基础折叠配置，明确要转换的字段及输出的新字段名：

   "transform": [
     {"fold": ["字段1", "字段2", "字段3"], "as": ["类别", "数值"]}
   ]
   

2. 让图层共享fold后的编码逻辑
   将柱状图和文本标签放在同一个layer下，两个图层必须都基于fold后的字段编码：

   • 柱状图图层：用x绑定类别字段，y绑定数值字段，标记类型设为bar
   • 文本标签图层：同样用x绑定类别、y绑定数值，标记类型设为text，并将text属性绑定数值，调整位置避免遮挡柱子

3. 完整示例代码

   {
     "data": {"values": [
       {"名称": "项1", "字段1": 20, "字段2": 30, "字段3": 15},
       {"名称": "项2", "字段1": 25, "字段2": 18, "字段3": 22}
     ]},
     "transform": [
       {"fold": ["字段1", "字段2", "字段3"], "as": ["类别", "数值"]}
     ],
     "layer": [
       {
         "mark": "bar",
         "encoding": {
           "x": {"field": "类别", "type": "nominal"},
           "y": {"field": "数值", "type": "quantitative"},
           "color": {"field": "类别", "type": "nominal"}
         }
       },
       {
         "mark": {"type": "text", "dy": -5},
         "encoding": {
           "x": {"field": "类别", "type": "nominal"},
           "y": {"field": "数值", "type": "quantitative"},
           "text": {"field": "数值", "type": "quantitative"},
           "color": {"value": "#222"}
         }
       }
     ]
   }
   

关键注意事项 #

• 两个图层的x编码必须都绑定fold生成的key字段（示例中的类别），否则会丢失分组逻辑
• 文本标签的y值要与柱状图保持一致，确保标签精准对应柱子顶部
• 分面、交互等全局配置需放在layer外层，不要单独加在子图层中

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