企业官网建设流程全解析

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

Metabase 的仪表盘与图表可视化支持在同一张图上叠加多条数据系列（series），从而将收入与成本、订单量与注册量、不同产品线的日订单数并列展示，让对比一目了然。本文以docs/dashboards/multiple-series.md为核心，结合 Metabase 前端可视化源码（frontend/src/metabase/visualizations），完整讲解多系列图表的两种实现路径、同一卡片叠加多个问题的操作步骤、数字图表的漏斗/柱状图组合技巧，以及多系列下数据点数值显示与格式化（Auto / Compact / Full）的最佳实践。

为什么要让数据"并排展示"

在数据沟通中，把相关数据放在同一坐标系里并列呈现，往往能带来单张图表无法提供的上下文和洞察。Metabase 官方文档给出的典型场景包括：

• 公司收入 vs. 成本随时间的变化曲线；
• 本月平均订单价格与该月用户注册数；
• 几条不同产品线各自的每日订单数。

Metabase 提供了两条截然不同、但可以互补的路径来实现多系列可视化：

下面分别展开。

方式一：提出一个涉及多个维度的问题

如果你正在创建一个新问题，最直接的多系列方案是：对数据进行汇总（Summarize）后，按两个或更多维度分组，Metabase 会自动把每个维度取值渲染为一条独立系列。

以 Metabase 自带的Sample Database（示例数据库）为例：统计订单行数，然后同时按Product -> Category（产品类别）和Created At（创建时间）分组，即可得到"按月份与产品类别"的销量对比：

分组完成后，Metabase 会自动把结果渲染为一张多系列折线图，图中的每条系列对应一个产品类别：

100 个取值上限与过滤

从docs/dashboards/multiple-series.md的明确说明可知，Metabase 一次最多可视化某个维度的 100 个不同取值。如果你选中的字段包含大量离散值（例如成千上万个用户 ID），多系列图会迅速失去可读性，此时需要先用筛选条件收窄取值集合，例如按类别、按时间范围过滤后再分组。这一限制对线图、柱状图等笛卡尔系图表（Cartesian chart）普遍适用——太多系列会让图例与坐标轴不堪重负。

源码视角：系列与图例是如何渲染的

从源码结构看，Metabase 把折线图、柱状图统一收敛到笛卡尔系图表族：前端目录frontend/src/metabase/visualizations/visualizations/下的LineChart/、BarChart/都基于CartesianChart/的通用定义渲染（见 LineChart.tsx、BarChart.tsx 与 CartesianChart/definition.ts）。多系列结果渲染时，图例由通用组件 ChartWithLegend.tsx 负责：它接收legendTitles、legendColors等 props，根据画布尺寸自动在横向图例（LegendHorizontal）与纵向图例（LegendVertical）之间切换，并在空间不足时隐藏部分图例项（例如HIDE_HORIZONTAL_LEGEND_THRESHOLD = 180宽度阈值）。这意味着系列越多，Metabase 越倾向于压缩图例以保住图表主体，这也是官方建议控制系列数量的底层原因之一。

方式二：在同一仪表盘卡片上叠加多个问题

如果多个问题各自已经成型（例如"收入随时间变化"和"成本随时间变化"），更合适的做法是把多个问题叠加到同一张仪表盘卡片上。这是多系列可视化在仪表盘场景中最常用、也最灵活的能力：

• 可以叠加来自不同数据库的问题；
• 前提是这些问题共享同一个日期时间维度，否则 Metabase 无法把系列对齐到同一 X 轴。

具体操作分六步：

1. 进入仪表盘编辑模式：打开目标仪表盘，点击顶部的Pencil（铅笔）图标进入编辑模式。
2. 添加一个问题：把带时间（或类别）维度的基础问题放到仪表盘上。实践中最适合叠加的通常是折线图或柱状图。
3. 编辑该卡片的可视化设置：仍在编辑模式下，悬停卡片并点击卡片上的Pencil图标，进入该卡片的可视化设置面板。

4. 添加更多数据：在左侧Manage data（管理数据）侧栏中点击Add more data（添加更多数据）。

Metabase 会在侧栏中列出当前集合内可用的问题。可叠加到该卡片上的问题会带有一个加号+，点击即可叠加；你也可以先换掉卡片当前的基础问题，Metabase 会随之刷新"兼容问题"列表（只有维度/单位可对齐的问题才会出现在可添加列表中）。

5. （可选）重命名图表：为了体现合并后的语义，建议给图表卡片起一个能概括多个系列的新标题。
6. 保存你的修改。

叠加完成后，Metabase 会自动做两件事：

• 如果必要，自动更新 X 轴与 Y 轴，使不同问题的数据能落到同一坐标系；
• 用各卡片原有的标题生成图例，帮助你分辨每条系列对应哪个问题。

可以反复执行第 4 步叠加更多问题；如果觉得系列太乱，也可以整体替换掉卡片的基础问题，相当于推倒重来（也便于把某个问题的可视化恢复成原始设置）。

源码视角：卡片渲染与"系列顺序"

从 CardRenderer.tsx 与仪表盘相关实现可以看出，仪表盘上的每张卡片最终都会把"多卡片数据集"作为多系列渲染管线（transformSeries）的输入。系列的具体顺序、显隐由可视化设置中的系列配置控制，对应设置组件为 ChartSettingSeriesOrder.tsx（即图表设置里的"系列顺序/Series order"面板），你可以用它调整叠加顺序、隐藏某条系列或单独设置某条系列的样式。

组合数字图表：把多个"单个数字"变成漏斗或柱状图

有时候你要对比的不是趋势曲线，而是几个孤立的数字（例如本月收入、本月成本、本月利润）。此时 Metabase 可以把多个**数字图表（Number chart / Scalar）**组合成一个漏斗图，再转成柱状图。步骤比较反直觉，官方文档特意强调"先做漏斗，再换柱状"：

1. 先把一个数字图表放到仪表盘上。
2. 以漏斗图方式可视化：在编辑模式下悬停卡片，点击Visualize another way（用其他方式可视化），Metabase 会把该卡片切换为漏斗图（Funnel）。这一步是铺垫，接下来马上会把它换成柱状图。

3. 添加更多数据：再向该卡片添加另一个返回单个数字的问题。
4. 把漏斗类型切换为柱状图：点击Settings（设置），在Funnel type（漏斗类型）中选择Bar chart（柱状图），整张图即变为多系列柱状图。

源码视角：Funnel 的 bar 转换

这段"漏斗转柱状"的操作在前端有对应的实现支撑。查看 Funnel.tsx 可以看到：

• 当可视化设置中的funnel.type取值为"bar"时，Metabase 会为渲染管线挂上transformSeries={funnelToBarTransform}；
• 该变换逻辑实现在同目录的funnel-bar-transform.ts（即 funnel-bar-transform），负责把漏斗语义的系列数据重排为柱状图所需的布局。

也就是说，"Funnel type = Bar chart"并不是一个独立的柱状图渲染器，而是复用 Funnel 的系列数据流并做一次系列变换，最终仍由笛卡尔图表族完成绘制。这一点与官方文档"先漏斗、再转柱状"的操作路径完全吻合，也解释了为什么第 2 步必须先把数字图切成漏斗——柱状形态正是从漏斗设置里"切换"出来的。

多系列下的数值显示与可读性

系列越多，图表越容易被"塞满"。Metabase 官方文档给出了一条重要提醒：

在多系列图表上添加数据点数值要克制，尤其是在数据点很多时——给多条系列、每个数据点都加上数值，反而会让图表更难读。

控制数据点数值

在Visualization > Display（可视化 > 显示）选项中，可以通过开关控制：

• Show values on data points（在数据点上显示数值）：打开后 Metabase 会尽力在图上排布下尽量多的数值；
• Values to show（要显示的数值）：设为All（全部）可强制为所有数据点显示数值。

官方建议：默认开启"尽量排布"的智能模式即可，除非图表数据点很少，否则不要强行全显——这正是多系列场景下可读性管理的第一原则。

数值格式化：Auto / Compact / Full

除显隐之外，还可以配置数值的格式，影响数值标签的呈现密度：

在多系列图上，Compact通常是最佳选择：它能显著压缩数值标签占用的横向空间，给更多系列和数据点留出呼吸余地。相关格式化逻辑可从 plain-cell-formatter.ts 与列设置组件（ColumnSettings.tsx）中看到端倪——Metabase 的数值格式化是前后端共享的通用能力，图表标签、表格单元格与下载导出使用同一套格式化管线。

可读性自查清单与延伸阅读

把多系列图表放进仪表盘之前，建议快速自查：

• 系列数量是否控制在合理范围（参考：单维度取值上限 100，但实际建议远低于此）？
• 叠加的问题是否共享同一时间维度、数据粒度是否一致？
• 图例是否清晰——基础卡片标题是否反映了系列含义？
• 数据点数值是否开启、格式是否选用了 Compact？
• 是否需要调整系列顺序或隐藏干扰系列（使用 ChartSettingSeriesOrder.tsx 对应的系列顺序面板）？

进一步阅读

• 仪表盘图表入门：Charts with multiple series 所在的仪表盘文档目录还包含 仪表盘筛选与联动（其中第 408 行即指向多系列图表）与 交互式仪表盘（其"Add series"功能同样基于本页描述的多系列叠加能力，见 interactive.md）；
• 在仪表盘概览中了解如何"向图表添加更多数据"：introduction.md；
• 若需要更深入的时间序列对比分析，可参考 Metabase 学习中心的 Time series comparisons 主题（外部站点，此处不再展开）。

现在，让你的数据互相认识一下吧——收入去认识成本，订单去认识注册，一切只需一次分组或一次"Add more data"。

【免费下载链接】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