Metabase 瀑布图Waterfall 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瀑布图Waterfall Chart是 Metabase 中用于可视化增量变化的柱状图变体适合展示一个起始值如何经过一系列增减最终到达总计值。本文基于官方文档 waterfall-chart.md 并结合仓库前端源码完整讲解瀑布图的数据形态要求、基于Offset自定义表达式的查询构建方法、图表设置面板中的每个配置项以及其实现原理与适用边界。读完本文你将能够把月度销售额变化分类净收入等业务数据快速转换为可交付的瀑布图并理解为什么 Metabase 要求它单一指标 单一维度。什么是瀑布图瀑布图是柱状图的一种特殊形态专门用于可视化同时包含正负值的数据。图中每一根柱子表示一次增加或减少最右侧的一根深色柱子表示累计总计running total。在 Metabase 中瀑布图并非独立实现的渲染引擎而是基于通用笛卡尔Cartesian图表体系扩展而来组件文件 WaterfallChart.tsx 直接复用CartesianChart组件仅通过 definition.ts 中identifier: waterfall的配置定义差异化行为。前端在 register.ts 中通过/* webpackChunkName: viz-waterfall */对该模块做按需懒加载。什么时候使用瀑布图瀑布图用于回答这类问题一个起始值是如何通过一系列有增有减的变化最终变成另一个值的典型的适用场景包括财务拆分financial breakdowns从总收入出发逐项减去成本、税费得到净利润库存变化inventory changes期初库存 入库 − 出库 − 损耗 期末库存任何需要分步展示数值如何变化的分析场景。瀑布图的数据形态要求创建瀑布图的问题必须满足返回一个指标metric并按一个维度dimension分组例如按时间或按类别分组。每个数据行代表某个值的变化量而不是原始值本身。例如要绘制销售额变化应使用本月相对上月的销售额变化而非各月销售额的绝对值。官方文档给出的示例数据形态如下按月MonthChange in salesJanuary12,500February-3,200March5,800April-1,600May7,100June4,200绿色柱子表示销售额增加的月份红色柱子表示销售额减少的月份末尾的深色柱子表示六个月的净变化总量。按类别分组的另一个示例CategoryNet revenueGizmo18,400Doohickey-2,100Widget9,700Gadget-4,500上述形态约束在源码中有明确对应。查看 definition.ts 中的isSensible判断逻辑要求行数大于 1rows.length 1、至少两列cols.length 2、恰好一个维度列dimensionCount 1且至少一个指标列metricCount 0同时通过maxMetricsSupported: 1与maxDimensionsSupported: 1明确限制最多支持 1 个指标、1 个维度。这就是文档中不能添加分组breakout或显示多个序列限制的底层来源。为瀑布图构建查询如果你的原始数据已经包含要绘制的正负变化值例如带正负金额的逐笔交易可以直接使用该数据创建图表跳过本节。但更常见的情况是原始数据只有原始值如各月销售额并没有相邻两行的变化量MonthSalesJanuary50,000February46,800March52,600此时需要用Offset自定义表达式来计算相邻行的差值。Offset可以返回结果集中另一行更早或更晚中某个表达式的值。要计算相对上月的销售额变化在查询构建器中点击Summarize汇总按Created At: Month创建时间月分组添加一个Custom Expression自定义表达式公式为Sum([Sales]) - Offset(Sum([Sales]), -1)并将列命名为 Change in sales。结果查询就返回了瀑布图所需的数据形态。关于Offset的细节可参见 offset.md亦被 expressions.md 索引使用时需注意以下几点语法Offset(expression, rowOffset)。expression是要从其他行取值的表达式rowOffset是相对当前行的偏移量-1表示上一行1表示下一行。示例Offset(Sum([Total]), -1)取上一行的Sum([Total])值。使用范围Offset只能在查询构建器的 Summarize 步骤中使用不能用于创建自定义列。数据库兼容性Offset目前不适用于 MySQL/MariaDB、MongoDB 和 Druid。分组顺序很重要由于Offset引用其他行分组breakout顺序会影响结果。Metabase 会先按第一个分组排序再按额外的分组分区。例如想按产品类别查看各时段订单数、并计算各类别上一期的订单数应先按Created At分组再按产品类别分组。不处理缺失数据Offset只能引用结果集中已存在的行因此在数据有缺口时可能产生正确但意外的结果。例如按天对比前一日数据时若 10 月 3 日没有数据则 10 月 4 日Offset(Count, -1)取到的是 10 月 2 日的值。如果希望按前一个自然日/周对比需要保证数据中每个对比点都有对应行如关联一张日历表补全缺失日期。返回类型Offset返回偏移行中对应表达式的值数据类型取决于该表达式。瀑布图图表设置打开图表设置点击可视化区域左下角的齿轮Gear图标进入图表设置面板。瀑布图的设置项定义于 definition.ts它组合了GRAPH_AXIS_SETTINGS坐标轴、GRAPH_GOAL_SETTINGS目标线、GRAPH_DISPLAY_VALUES_SETTINGS数值显示、GRAPH_DATA_SETTINGS、TOOLTIP_SETTINGS提示框与TIMELINE_EVENTS_SETTINGS时间线事件等通用配置并在此基础上追加瀑布图专属设置。Display显示在图表设置中点击Display选项卡可以编辑图表外观。目标线Goal line开启Goal line开关即可为目标线添加一条目标线使用Goal value目标值与Goal label目标标签字段设置目标线的取值与标签注意瀑布图的目标线上无法设置告警alerts详见 alerts.md。各类型柱子的颜色Increase color增加颜色正数值柱子的颜色默认绿色。源码中默认值为color(accent1)即 Metabase 主题色板中的 accent1通常为绿色Decrease color减少颜色负数值柱子的颜色默认红色。源码中默认值为color(accent3)Total color总计颜色末尾总计柱的颜色默认黑色。源码中默认值为Color(color(text-primary, staticVizOverrides)).hex()即正文文字主色深色该设置项还声明了readDependencies: [waterfall.show_total]当Show total关闭时总计颜色选项会自动隐藏。数值显示开启Show total显示总计开关在末尾总计柱上显示其数值默认开启源码中getDefault: () true开启Show values on data points在数据点上显示数值开关在所有柱子上显示数值。Axes坐标轴在图表设置中点击Axes选项卡可以编辑图表坐标轴。X 轴Show label显示标签开关控制是否显示 x 轴标签Label标签设置 x 轴标签文本Show lines and tick marks显示轴线和刻度线控制是否显示 x 轴轴线与刻度。Y 轴Show label显示标签开关控制是否显示 y 轴标签Label标签设置 y 轴标签文本Auto y-axis range自动 y 轴范围开启时 Metabase 根据数据自动设置 y 轴范围关闭后可使用Min最小值与Max最大值字段设置自定义范围Scale刻度类型选择 y 轴上数值的间距方式可选Linear线性、Power幂与Log对数Show lines and tick marks显示轴线和刻度线控制是否显示 y 轴轴线与刻度Number of tick marks刻度数量设置 y 轴上出现的刻度个数默认auto自动。源码实现速览瀑布图在前端是如何渲染的对于希望深入理解实现细节的读者仓库中瀑布图的完整实现链路如下组件层WaterfallChart.tsx 将属性直接透传给CartesianChart即瀑布图复用通用笛卡尔图表组件树数据模型层在 use-models-and-option.ts 中当card.display waterfall时图表数据模型由getWaterfallChartModel构建ECharts 配置项由getWaterfallChartOption生成见该文件case waterfall分支提示框配色在 events.ts 的getSeriesOnlyTooltipRowColor函数中瀑布图各柱的颜色判定逻辑为若数据点属于总计柱IS_WATERFALL_TOTAL_DATA_KEY使用waterfall.total_color否则按数值正负分别取waterfall.increase_color与waterfall.decrease_color——与文档中绿涨红跌的语义完全一致。限制与替代方案瀑布图是一把专用工具有明确的适用边界仅正数或不需要总计如果数据只有正值或不需要追踪累计总计建议改用柱状图Bar chart展示向单一目标的进度如果目标是展示距离某个单一目标值的进度建议使用进度条Progress bar或仪表图Gauge结构限制瀑布图只支持单一指标按单一维度分组不能添加分组breakout或显示多个序列multiple series——这与 definition.ts 中maxMetricsSupported: 1、maxDimensionsSupported: 1的限制一一对应告警限制瀑布图的目标线上不能设置告警。综合来看瀑布图在 Metabase 中的定位非常聚焦当你的问题恰好是某个值如何一步步增减最终到达总计时它是最直观的呈现方式而构建它最关键的一步是借助Offset自定义表达式把原始值转换为增量值。更多可视化类型的选择思路可参考可视化结果总览。【免费下载链接】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），仅供参考