Vega-Lite漏斗图数据排序问题：如何用未排序数据生成标准漏斗图？

完全可以通过Vega-Lite内置的排序功能处理未排序数据，生成标准形态的漏斗图。漏斗图的核心要求是按阶段数值从大到小（或从小到大）有序排列，只要在编码配置中对分类字段指定基于数值的排序规则，就能自动修正数据顺序并渲染出正确的漏斗形态。

具体实现步骤 #

在对应分类字段的编码配置中，添加sort属性，设置为基于数值字段的排序规则：

• 若要按数值从大到小排列（标准漏斗从上到下/从左到右递减），使用{"field": "数值字段名", "order": "descending"}
• 若需从小到大排列，将order改为"ascending"

示例代码（未排序数据+自动排序） #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"stage": "转化", "count": 300},
      {"stage": "浏览", "count": 1000},
      {"stage": "咨询", "count": 500},
      {"stage": "成交", "count": 150}
    ]
  },
  "mark": "area",
  "encoding": {
    "x": {
      "field": "count",
      "type": "quantitative",
      "axis": {"title": "用户数量"}
    },
    "y": {
      "field": "stage",
      "type": "ordinal",
      // 关键：按count字段降序排列阶段
      "sort": {"field": "count", "order": "descending"},
      "axis": {"title": "转化阶段"}
    },
    "color": {"field": "stage", "type": "nominal"}
  }
}

效果说明 #

上述配置中，即使原始数据的stage顺序是混乱的，Vega-Lite会自动按count数值从高到低排列阶段（浏览→咨询→转化→成交），最终渲染出标准的漏斗形态，无需提前手动排序数据源。

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