Metabase 漏斗图（Funnel Chart）完全指南：数据形态、查询构建与可视化设置

Metabase 漏斗图Funnel Chart完全指南数据形态、查询构建与可视化设置【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase漏斗图Funnel Chart是 Metabase 中用于可视化一组顺序步骤中指标逐级衰减的图表类型常见于电商结账流程、销售漏斗等场景。本文将以 Metabase 官方文档 docs/questions/visualizations/funnel.md 为骨架结合仓库中漏斗图的前端实现源码完整讲解漏斗图的数据要求、查询构建方法、图表读取方式、图表设置项与当前功能边界帮助你快速用 Metabase 搭建出可复用的漏斗分析。什么是漏斗图适用场景与前提漏斗图将某个指标按一系列步骤Step逐级展开并展示每个步骤与第一步之间的百分比变化。它之所以叫漏斗是因为在大多数业务场景中指标会从第一步向最后一步逐级递减形状如同漏斗。漏斗图的核心适用前提有两个步骤必须是顺序发生的例如进入结账页 → 填写地址 → 完成支付指标在步骤之间通常是逐级下降的例如每个阶段的客户数递减。基于这个特性漏斗图常用于电子商务或销售场景用来观察结账流程、销售周期中每个环节留存了多少客户、哪个环节流失最严重。如果数据并不满足顺序 递减的结构则应当考虑使用 条形图或折线图 等其他可视化方式。从源码角度看Metabase 对漏斗图的数据约束非常明确在 frontend/src/metabase/visualizations/visualizations/Funnel/definition.ts 中isSensible判定要求查询结果恰好只有两列cols.length 2即一列步骤、一列指标。同时在checkRenderable中要求至少有一行数据且必须配置funnel.dimension步骤列与funnel.metric指标列否则会抛出ChartSettingsError并提示选择字段。漏斗图的数据形态要创建一个漏斗图你至少需要一张包含两列的查询结果表一列存放漏斗的步骤名称Stage另一列存放该步骤对应的指标值如该步骤的客户数。以下是官方文档中用于生成上文示例漏斗图的数据形态StageOpportunitiesLeads3901Qualification3714Prospecting3231Proposal2972Negotiation1588Closed737这里每一行代表漏斗中的一个步骤指标值即该步骤的人数。如果你的查询结果里还有其他多余列可以在漏斗图的 Data 设置 中手动指定哪一列作为步骤列、哪一列作为指标列。此外需要留意的是默认情况下Metabase 会按照查询结果中步骤出现的顺序来排列漏斗。如果结果顺序不符合业务漏斗顺序你可以在 Data 设置 中通过拖拽重新排序或直接隐藏某些步骤。构建漏斗图查询的两种方式要让查询结果呈现上述步骤 指标的两列形态通常需要对原始明细数据做聚合Summarize。根据数据来源的不同官方文档给出了两种典型做法。方式一单表数据直接按步骤分组如果你的原始数据中已经包含每个数据点属于哪个步骤的字段那么直接在查询编辑器中对该字段做Breakout按步骤分组即可无需其他复杂处理这种做法的典型形态是对步骤字段做Group By对计数指标做Count或求和等聚合最终得到每个步骤 → 一个汇总值的两列结果。方式二多表 / 不同规则时用 SQL UNION 拼接如果漏斗中不同步骤的数据来自不同的表或者每个步骤需要不同的过滤条件与聚合规则那么可以先分别为每个步骤创建独立的 查询编辑器问题例如分别统计Leads、Qualification、Proposal的人数再通过一条 SQL 查询 使用UNION将这些子查询结果合并成漏斗所需的形状。在 SQL 中 引用已保存的问题形如{{#120-leads}}并做 UNION 的示例-- 示例检索多个问题的结果并用 UNION 合并 SELECT Leads as step, * from {{#120-leads}} UNION SELECT Qualified as step, * from {{#121-qualified}} UNION SELECT Prospects as step, * from {{#122-prospects}}通过这种方式三个子查询各自返回一个计数值UNION后得到步骤名 计数值的两列结果再选择漏斗图即可渲染如何读取漏斗图百分比与 Tooltip漏斗图会展示每个步骤的指标值以及该指标与第一个步骤的对比关系。图表左侧单独显示的是第一步的指标值也是整个漏斗的基准值。以上文数据为例某个步骤下显示76.19%, 2,972含义是该步骤的指标值为 2,972占第一步指标值 3,901 的76.19%。可见漏斗图中每个步骤旁的百分比永远是相对第一步的留存率Retained而非相对前一步。如果希望看到与上一步的对比可以将鼠标悬停在该步骤上从 Tooltip 中读取相关信息。从实现上看Tooltip 的逻辑位于 frontend/src/metabase/visualizations/components/FunnelNormal.tsx悬停面板会展示两行关键数据Retained保留率当前步骤值占第一步值的百分比以百分数格式展示Compared to previous与上一步对比基于computeChange计算的环比变化率并以带正负号formatChangeWithSign的方式呈现。同时 FunnelNormal.tsx 中可以看到百分比采用(100 * percent).toFixed(2)保留两位小数后追加空格与%展示。漏斗图中每个梯形polygon的填充色取自 Metabase 主题色core-brand并依据步骤位置通过calculateStepOpacity计算透明度从而形成由深到浅的视觉层次。漏斗图设置点击图表左下角的**齿轮Gear**图标即可打开图表设置面板Data 标签页选择步骤列与指标列如果查询结果包含超过两列可以在Data标签页中指定Column with steps步骤列funnel.dimension决定漏斗每个步骤取自哪一列Measure指标列funnel.metric决定每个步骤展示的数值来自哪一列。在 definition.ts 中这两个字段分别由dimensionSetting与metricSetting定义此外还包含一个funnel.rows的排序配置widget 类型为orderedSimple测试标识为funnel-row-sort用于维护用户自定义的步骤顺序与显隐状态。排序的实现细节可以参见 FunnelNormal.tsx 中的getSortedRows它会过滤掉enabled false的步骤并按用户拖拽后的顺序重排数据行。排序与隐藏步骤在 Data 标签页中你可以**拖拽drag and drop**步骤卡片来调整漏斗顺序点击步骤卡片上的**眼睛Eye**图标来隐藏某个步骤。结合源码可以推断隐藏步骤时该步骤会被从渲染列表中剔除但其他步骤的百分比仍以第一步为基准重新计算。指标格式化点击指标旁边的**三个点Three dots**可以编辑指标数值的格式如千分位分隔、小数位数、货币单位等。但请注意该格式化只作用于指标数值本身不会作用于每个步骤相对第一步的百分比值——目前这些百分比无法单独格式化官方文档明确说明了这一点。Display 标签页漏斗类型除了常规的梯形漏斗definition.ts 还提供了一个funnel.type设置可选择Funnel默认的漏斗形态Bar chart将同样的数据以堆叠条形图形式展示。其中Bar chart模式是历史遗留能力此前仅通过多序列数据可用默认值由getDefault决定当序列多于一个时默认为bar否则默认为funnel。当选择条形图模式时Funnel.tsx 会将数据交给BarChart组件并通过 funnel-bar-transform.ts 把每个步骤转换为独立的堆叠条形序列进行渲染。局限性目前不支持的能力根据官方文档当前版本的漏斗图存在以下功能限制无法修改漏斗的颜色填充色固定使用主题品牌色无法修改漏斗的方向不支持水平等其他朝向无法添加分组维度Breakout即不支持按类别拆分为多条漏斗序列。如果你需要更灵活的展示例如水平条形、多维度对比、自定义配色官方文档建议改用 条形图或行图Bar / Row chart。结合源码的补充说明为便于读者深入理解这里汇总与本主题强相关的仓库文件供进一步查阅可视化定义数据约束、字段配置、校验逻辑frontend/src/metabase/visualizations/visualizations/Funnel/definition.ts漏斗渲染组件排序、百分比、Tooltip、点击交互frontend/src/metabase/visualizations/components/FunnelNormal.tsx漏斗主组件Bar 模式转换、标题渲染frontend/src/metabase/visualizations/visualizations/Funnel/Funnel.tsxBar 模式数据转换逻辑frontend/src/metabase/visualizations/visualizations/Funnel/funnel-bar-transform.ts组件测试验证标题渲染、数据与设置装配方式frontend/src/metabase/visualizations/visualizations/Funnel/Funnel.unit.spec.tsx相关概念文档查询编辑器、SQL 编辑器、引用已保存的问题从测试用例 Funnel.unit.spec.tsx 可以看出漏斗图的最小输入即为两列数据如foo/bar两列、两行记录并通过可视化设置中的funnel.metric与funnel.dimension指定列名——这与上文两列数据形态的要求完全一致。掌握这一数据契约后无论数据来自单表聚合还是多表 UNION你都能在 Metabase 中快速构建出清晰可读的漏斗分析。【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考