组合图Combo 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/metabaseMetabase 组合图Combo Chart完全指南折线、柱状与面积图的自由混排与逐系列定制组合图Combo Chart是 Metabase 中将折线、柱状、面积三种图形混排在同一张图表上的可视化类型非常适合在同一坐标系中对比量级差异巨大的两个指标如「订单数」与「总销售额」。本文以官方文档为核心骨架结合 Metabase 开源仓库中组合图的源码实现frontend/src/metabase/visualizations/visualizations/ComboChart/与端到端测试e2e/test/scenarios/visualizations-charts/combo.cy.spec.js完整讲解组合图的数据前提、创建方式、逐系列显示类型设置、堆叠/分面板等高级配置以及坐标轴、图例等配套设置帮助你从「能用」进阶到「用得专业」。一、什么是组合图为什么在同一张图上混排多种图形组合图Combo Chart允许你在同一张图表上同时绘制柱状图bar与折线图line或面积图 area。它的核心价值在于当两个指标的数值范围差异非常大时——例如「订单数量」只有几千而「总销售额」高达数百万——如果都画成柱状图量级小的指标会被「压扁」得几乎看不见而将其中一个指标切换为折线并挂载到另一条 Y 轴就能让两组数据在同一坐标系中各自清晰可读。Metabase 的官方文档折线、柱状与面积图对此给出了精炼的判断标准折线图适合展示数值随时间的变化趋势尤其当 X 轴取值很多时线的可读性远优于拥挤的柱子。柱状图适合跨类别比较数值或比较少量时间点上的数值单个数值更容易读取与对比。面积图适合展示每个系列对总量的贡献堆叠后可以同时看到总趋势与各系列占比。而组合图正是这三种形态的「混排容器」——在同一张图表上不同系列可以各自独立选择折线、柱状或面积形态。Metabase 默认会将一个系列渲染为折线、另一个渲染为柱状你可以通过系列设置见下文自由改写每个系列的显示类型。二、组合图的数据前提满足这两种结构之一即可组合图并非对任何查询结果都适用你的问题Question必须满足以下两种数据形态之一官方文档明确列出两个及以上指标Metrics 一个或两个分组Groupings例如在「汇总Summarize」区放入计数与总和两个指标再按时间分组。一个指标 两个分组例如只汇总一个指标但同时在汇总区进行两层分组如先按类别、再按时间。如果使用 SQL 原生查询则对应地要求SELECT语句中包含至少两个聚合函数或GROUP BY子句中包含至少两个分组字段。数据满足上述结构后在可视化类型选择器中即可选用「组合图Combo」。从源码看组合图的可视化定义注册于 frontend/src/metabase/visualizations/visualizations/ComboChart/definition.ts其identifier为combo在界面中的名称为「Combo」名词为「line and bar chart」图标为lineandbar。这意味着在问题编辑器左下角的图表类型选择器中组合图对应的内部标识就是combo。三、组合图的默认形态与创建步骤官方文档指出Metabase 默认将组合图中的一个系列显示为折线、另一个系列显示为柱状。以下是一个符合数据前提的典型查询示例源自仓库 e2e 测试 combo.cy.spec.js 中的实际用例;; 查询产品表中按「创建时间月」分组同时聚合「计数」与「价格总和」 { database: SAMPLE_DB_ID, query: { source-table: PRODUCTS_ID, aggregation: [[count], [sum, [field, PRODUCTS.PRICE, null]]], breakout: [ [field, PRODUCTS.CREATED_AT, {temporal-unit: month}] ] }, type: query }上述查询包含两个指标count与sum和一个分组按月满足组合图的数据前提在测试中以display: combo并锁定显示类型displayIsLocked: true渲染。图表的最终形态如下所示创建组合图的完整路径是新建问题 → 选择数据表或模型 → 在「汇总」区添加指标、在「分组」区添加分组满足前述数据前提→ 点击左下角的图表类型图标在可视化类型中选择Combo。若希望后续修改查询时不自动切换图表类型可以在图表设置中锁定显示类型。四、逐系列设置显示类型混排的核心操作组合图的灵魂在于每个系列可以独立设置显示类型而不必受整张图表类型的约束。官方文档给出了操作入口在「数据Data」选项卡中点击系列名称旁边的三点菜单...然后选择「显示类型Display type」。例如整张图表是柱状图但你可以把其中一个系列单独切换为折线同理在组合图中也可以把某条线切换为面积。这一能力甚至不限于组合图——任意多系列的折线/柱状/面积图都支持对单个系列独立覆盖显示类型。在仓库的 e2e 测试中可以看到通过series_settings为单个系列指定显示类型的实际写法测试将min与min_2两个系列都设为areavisualization_settings: { graph.show_values: true, series_settings: { // 将两个系列切换为面积图 min_2: { display: area }, min: { display: area }, }, }这说明逐系列显示类型在底层是通过series_settings中每个系列的display字段取值如line、bar、area驱动的前端渲染时据此决定该系列使用何种图形。五、数据Data选项卡系列级别的精细控制打开图表设置点击图表左下角的齿轮图标进入「数据」选项卡你可以显示/隐藏某个系列重新排序系列在图例中的顺序通过三点菜单设置单个系列的独立选项。单个系列的选项官方文档完整列举包括选项说明颜色Color设置该系列在图中的颜色显示类型Display type切换为折线 / 柱状 / 面积Y 轴位置Y-axis position自动、左或右为该系列显示趋势线单独开启/关闭趋势线为该系列显示数值单独开启/关闭数据点数值标签对于折线和面积系列还可以额外设置线形Line shape线条的形状线型Line style实线、虚线等样式线宽Line size小、中、大三档是否显示数据点Show dots on lines开启后在线条上显示实际数据点标记缺失值处理Replace missing values零Zero、无Nothing即线条断开、线性插值Linear interpolated三种策略。这些设置项的底层来源可以在 CartesianChart/definition.ts 中看到——组合图的设置定义COMBO_CHARTS_SETTINGS_DEFINITIONS由若干设置模块合并而成其中就包括LINE_SETTINGS线条相关、GRAPH_COLORS_SETTINGS颜色、GRAPH_TREND_SETTINGS趋势线、GRAPH_DISPLAY_VALUES_SETTINGS数值显示等这正是「系列独立可配」的代码基础。六、显示Display选项卡堆叠、分面板与趋势线「显示」选项卡集中了图表级别的展示控制官方文档将其归纳为以下几项6.1 堆叠Stacking柱状图与面积图支持将多个系列堆叠在同一个图表上。「堆叠」下拉框有三个选项不堆叠Dont stack每个系列独立显示堆叠Stack系列层层叠加可同时看到各系列与总量堆叠 100%Stack - 100%将总量归一化为 100%展示每个系列的占比。e2e 测试 combo.cy.spec.js 中完整验证了这三种模式测试先将 6 个聚合指标渲染为组合图含柱状堆叠与面积堆叠切换「堆叠」后断言 tooltip 中每个系列出现secondaryValue百分比与Total总量行再切换「Stack - 100%」断言 Y 轴出现100%刻度。这从测试层面印证了堆叠与归一化堆叠的实际行为。6.2 堆叠系列 / 分面板Stack series开启「堆叠系列Stack series」后每个系列会绘制在**独立的面板panel**中面板垂直排列各自拥有独立的 Y 轴。官方文档强调使用分面板需要满足多个分组Multiple breakouts查询构建器中至少两个分组条目或 SQL 中至少两个GROUP BY字段或多个指标Multiple metrics汇总区至少两个指标或SELECT中至少两个聚合函数。分面板支持跨面板混排柱状、折线与面积通过逐系列显示类型实现。开启「堆叠系列」后「堆叠」选项会被隐藏二者互斥。仓库静态渲染测试数据frontend/src/metabase/static-viz/components/ComboChart/stories-data/中的combo-split-panels-mixed-series-display-settings.json正是「分面板 混合系列显示类型」这一场景的渲染用例。6.3 目标线Goal lines目标线用于在图表上标记一个期望达到的数值可配合告警Alerts使用当指标跨越目标线时触发邮件或 Slack 消息通知。6.4 趋势线Trend lines趋势线展示系列随时间变化的大致方向由 Metabase 自动拟合最优线。使用前提是按时间字段分组趋势线支持多个指标但当问题多于一个分组时不可用。除了在「显示」选项卡全局开启外也可以在「数据」选项卡中对单个系列用「Show trend line for this series」开关独立控制。静态渲染用例中的trend-combo.json、trend-combo-log.json、trend-combo-power.json分别对应普通、对数与幂次刻度下的组合图趋势线场景。6.5 数据点数值Values on data points开启「在数据点上显示数值」后可为图表上的点添加数值标签「要显示的数值」可设为全部All或部分Some选择Some时由 Metabase 自动挑选合适的数值以保证图表可读性。开启后仍可在「数据」选项卡中针对单个系列关闭数值显示。e2e 测试第一个用例即验证了graph.show_values: true时数据点数值如408.66能正确渲染。6.6 自动格式化AutoformattingMetabase 会对图表上的数字做自动截断以提升可读性例如将42,000显示为42K。七、坐标轴Axes设置让双指标各得其所组合图常用双 Y 轴左右各一坐标轴设置位于图表设置中的「坐标轴」选项卡官方文档列出的可选项如下X 轴横轴是否显示标签、重命名坐标轴名称线条与刻度显示方式隐藏、显示、紧凑、旋转 45°、旋转 90°比例尺Scale时间序列Timeseries、线性Linear、直方图Histogram、序数Ordinal取决于分组字段类型。Ordinal会在 X 轴上列出每个取值适合展示流程步骤这类非时间序列。Y 轴纵轴是否显示标签、重命名坐标轴名称必要时拆分 Y 轴Split y-axis自动 Y 轴范围关闭后可手动指定Min与Max比例尺线性Linear、幂Power、对数Log——对数刻度适合数据呈指数级增长/衰减的场景用于观察变化率线条与刻度显示隐藏或显示刻度数量Number of tick marks。在组合图的上下文中最常用的组合是将量级较小的指标挂到左 Y 轴、量级较大的指标挂到右 Y 轴让两条曲线/两组柱子的波动都清晰可见。这一能力在逐系列选项中通过「Y 轴位置自动 / 左 / 右」实现。八、图例Legend快速高亮、隐藏与下钻对于多系列或多分组的图表图例展示了每个系列的颜色与名称。官方文档给出图例的三种交互方式悬停系列名称高亮该系列点击系列前的颜色圆圈临时隐藏该系列点击系列名称对聚合系列下钻drill through到明细记录。注意图例无法隐藏也无法改变位置若要永久移除某系列请在「数据」选项卡中操作。此外还可以在图表上框选一段范围按时间区间过滤结果后再下钻查看明细。九、源码级实现组合图在 Metabase 中是如何工作的组合图的代码实现位于 frontend/src/metabase/visualizations/visualizations/ComboChart/ComboChart.tsx组件本体直接复用CartesianChart渲染CartesianChart {...props} /并通过Object.assign挂载可视化定义。这说明组合图在渲染层与折线/柱状/面积图共享同一套笛卡尔坐标图表引擎区别仅在于配置定义与系列元数据。definition.ts注册可视化元数据名称Combo、标识combo、图标lineandbar、最小/默认尺寸并将COMBO_CHARTS_SETTINGS_DEFINITIONS合并为图表设置。CartesianChart/definition.ts组合图的设置定义由STACKABLE_SETTINGS堆叠、SPLIT_PANELS_SETTINGS分面板、LINE_SETTINGS线形、GRAPH_GOAL_SETTINGS目标线、GRAPH_TREND_SETTINGS趋势线、GRAPH_COLORS_SETTINGS颜色、GRAPH_AXIS_SETTINGS坐标轴、GRAPH_DISPLAY_VALUES_SETTINGS数值标签、GRAPH_DATA_SETTINGS数据、TOOLTIP_SETTINGS提示框、LEGEND_SETTINGS图例、TIMELINE_EVENTS_SETTINGS时间线事件等模块合并而成——这也是前文「数据 / 显示 / 坐标轴」三选项卡各项设置的代码来源。从静态渲染static-viz测试数据frontend/src/metabase/static-viz/components/ComboChart/stories-data/还可以看到组合图支持的高级场景清单堆叠柱状面积combo-stacked-bars-areas.json、归一化堆叠combo-stacked-bars-areas-normalized.json、分面板混合显示类型combo-split-panels-mixed-series-display-settings.json、直方图形态combo-histogram.json、数据标签自动紧凑combo-data-labels-auto-compactness-propagates-from-line.json以及趋势线组合trend-combo*.json。端到端测试 combo.cy.spec.js 则从用户行为层面验证了组合图数据点数值渲染、通过series_settings混排面积/折线/柱状、堆叠与 100% 堆叠的 tooltip 百分比与总量、以及设置面板中「堆叠」选项的切换。这些测试用例可作为你验证自己组合图配置是否正确的参考范本。十、实战建议与进一步阅读何时选组合图两个指标量级差异大如数量 vs 金额、且希望直观对比其变化趋势时组合图 双 Y 轴是最佳选择。何时避免系列过多时组合图会显得杂乱可优先考虑趋势图Trend或分面板Stack series来分离信息。组合图与汇总分组若需要调整直方图分箱数量等聚合细节参见汇总与分组文档。更多相关阅读折线、柱状与面积图完整文档组合图章节即源于此且该文档的 front matter 保留了旧版combo-chart路径的跳转记录趋势图Trend charts告警Alerts配合目标线实现阈值通知组合图源码ComboChart 定义 与 笛卡尔图表设置定义【免费下载链接】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），仅供参考 组合图（Combo Chart）完全指南
组合图Combo 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/metabaseMetabase 组合图Combo Chart完全指南折线、柱状与面积图的自由混排与逐系列定制组合图Combo Chart是 Metabase 中将折线、柱状、面积三种图形混排在同一张图表上的可视化类型非常适合在同一坐标系中对比量级差异巨大的两个指标如「订单数」与「总销售额」。本文以官方文档为核心骨架结合 Metabase 开源仓库中组合图的源码实现frontend/src/metabase/visualizations/visualizations/ComboChart/与端到端测试e2e/test/scenarios/visualizations-charts/combo.cy.spec.js完整讲解组合图的数据前提、创建方式、逐系列显示类型设置、堆叠/分面板等高级配置以及坐标轴、图例等配套设置帮助你从「能用」进阶到「用得专业」。一、什么是组合图为什么在同一张图上混排多种图形组合图Combo Chart允许你在同一张图表上同时绘制柱状图bar与折线图line或面积图 area。它的核心价值在于当两个指标的数值范围差异非常大时——例如「订单数量」只有几千而「总销售额」高达数百万——如果都画成柱状图量级小的指标会被「压扁」得几乎看不见而将其中一个指标切换为折线并挂载到另一条 Y 轴就能让两组数据在同一坐标系中各自清晰可读。Metabase 的官方文档折线、柱状与面积图对此给出了精炼的判断标准折线图适合展示数值随时间的变化趋势尤其当 X 轴取值很多时线的可读性远优于拥挤的柱子。柱状图适合跨类别比较数值或比较少量时间点上的数值单个数值更容易读取与对比。面积图适合展示每个系列对总量的贡献堆叠后可以同时看到总趋势与各系列占比。而组合图正是这三种形态的「混排容器」——在同一张图表上不同系列可以各自独立选择折线、柱状或面积形态。Metabase 默认会将一个系列渲染为折线、另一个渲染为柱状你可以通过系列设置见下文自由改写每个系列的显示类型。二、组合图的数据前提满足这两种结构之一即可组合图并非对任何查询结果都适用你的问题Question必须满足以下两种数据形态之一官方文档明确列出两个及以上指标Metrics 一个或两个分组Groupings例如在「汇总Summarize」区放入计数与总和两个指标再按时间分组。一个指标 两个分组例如只汇总一个指标但同时在汇总区进行两层分组如先按类别、再按时间。如果使用 SQL 原生查询则对应地要求SELECT语句中包含至少两个聚合函数或GROUP BY子句中包含至少两个分组字段。数据满足上述结构后在可视化类型选择器中即可选用「组合图Combo」。从源码看组合图的可视化定义注册于 frontend/src/metabase/visualizations/visualizations/ComboChart/definition.ts其identifier为combo在界面中的名称为「Combo」名词为「line and bar chart」图标为lineandbar。这意味着在问题编辑器左下角的图表类型选择器中组合图对应的内部标识就是combo。三、组合图的默认形态与创建步骤官方文档指出Metabase 默认将组合图中的一个系列显示为折线、另一个系列显示为柱状。以下是一个符合数据前提的典型查询示例源自仓库 e2e 测试 combo.cy.spec.js 中的实际用例;; 查询产品表中按「创建时间月」分组同时聚合「计数」与「价格总和」 { database: SAMPLE_DB_ID, query: { source-table: PRODUCTS_ID, aggregation: [[count], [sum, [field, PRODUCTS.PRICE, null]]], breakout: [ [field, PRODUCTS.CREATED_AT, {temporal-unit: month}] ] }, type: query }上述查询包含两个指标count与sum和一个分组按月满足组合图的数据前提在测试中以display: combo并锁定显示类型displayIsLocked: true渲染。图表的最终形态如下所示创建组合图的完整路径是新建问题 → 选择数据表或模型 → 在「汇总」区添加指标、在「分组」区添加分组满足前述数据前提→ 点击左下角的图表类型图标在可视化类型中选择Combo。若希望后续修改查询时不自动切换图表类型可以在图表设置中锁定显示类型。四、逐系列设置显示类型混排的核心操作组合图的灵魂在于每个系列可以独立设置显示类型而不必受整张图表类型的约束。官方文档给出了操作入口在「数据Data」选项卡中点击系列名称旁边的三点菜单...然后选择「显示类型Display type」。例如整张图表是柱状图但你可以把其中一个系列单独切换为折线同理在组合图中也可以把某条线切换为面积。这一能力甚至不限于组合图——任意多系列的折线/柱状/面积图都支持对单个系列独立覆盖显示类型。在仓库的 e2e 测试中可以看到通过series_settings为单个系列指定显示类型的实际写法测试将min与min_2两个系列都设为areavisualization_settings: { graph.show_values: true, series_settings: { // 将两个系列切换为面积图 min_2: { display: area }, min: { display: area }, }, }这说明逐系列显示类型在底层是通过series_settings中每个系列的display字段取值如line、bar、area驱动的前端渲染时据此决定该系列使用何种图形。五、数据Data选项卡系列级别的精细控制打开图表设置点击图表左下角的齿轮图标进入「数据」选项卡你可以显示/隐藏某个系列重新排序系列在图例中的顺序通过三点菜单设置单个系列的独立选项。单个系列的选项官方文档完整列举包括选项说明颜色Color设置该系列在图中的颜色显示类型Display type切换为折线 / 柱状 / 面积Y 轴位置Y-axis position自动、左或右为该系列显示趋势线单独开启/关闭趋势线为该系列显示数值单独开启/关闭数据点数值标签对于折线和面积系列还可以额外设置线形Line shape线条的形状线型Line style实线、虚线等样式线宽Line size小、中、大三档是否显示数据点Show dots on lines开启后在线条上显示实际数据点标记缺失值处理Replace missing values零Zero、无Nothing即线条断开、线性插值Linear interpolated三种策略。这些设置项的底层来源可以在 CartesianChart/definition.ts 中看到——组合图的设置定义COMBO_CHARTS_SETTINGS_DEFINITIONS由若干设置模块合并而成其中就包括LINE_SETTINGS线条相关、GRAPH_COLORS_SETTINGS颜色、GRAPH_TREND_SETTINGS趋势线、GRAPH_DISPLAY_VALUES_SETTINGS数值显示等这正是「系列独立可配」的代码基础。六、显示Display选项卡堆叠、分面板与趋势线「显示」选项卡集中了图表级别的展示控制官方文档将其归纳为以下几项6.1 堆叠Stacking柱状图与面积图支持将多个系列堆叠在同一个图表上。「堆叠」下拉框有三个选项不堆叠Dont stack每个系列独立显示堆叠Stack系列层层叠加可同时看到各系列与总量堆叠 100%Stack - 100%将总量归一化为 100%展示每个系列的占比。e2e 测试 combo.cy.spec.js 中完整验证了这三种模式测试先将 6 个聚合指标渲染为组合图含柱状堆叠与面积堆叠切换「堆叠」后断言 tooltip 中每个系列出现secondaryValue百分比与Total总量行再切换「Stack - 100%」断言 Y 轴出现100%刻度。这从测试层面印证了堆叠与归一化堆叠的实际行为。6.2 堆叠系列 / 分面板Stack series开启「堆叠系列Stack series」后每个系列会绘制在**独立的面板panel**中面板垂直排列各自拥有独立的 Y 轴。官方文档强调使用分面板需要满足多个分组Multiple breakouts查询构建器中至少两个分组条目或 SQL 中至少两个GROUP BY字段或多个指标Multiple metrics汇总区至少两个指标或SELECT中至少两个聚合函数。分面板支持跨面板混排柱状、折线与面积通过逐系列显示类型实现。开启「堆叠系列」后「堆叠」选项会被隐藏二者互斥。仓库静态渲染测试数据frontend/src/metabase/static-viz/components/ComboChart/stories-data/中的combo-split-panels-mixed-series-display-settings.json正是「分面板 混合系列显示类型」这一场景的渲染用例。6.3 目标线Goal lines目标线用于在图表上标记一个期望达到的数值可配合告警Alerts使用当指标跨越目标线时触发邮件或 Slack 消息通知。6.4 趋势线Trend lines趋势线展示系列随时间变化的大致方向由 Metabase 自动拟合最优线。使用前提是按时间字段分组趋势线支持多个指标但当问题多于一个分组时不可用。除了在「显示」选项卡全局开启外也可以在「数据」选项卡中对单个系列用「Show trend line for this series」开关独立控制。静态渲染用例中的trend-combo.json、trend-combo-log.json、trend-combo-power.json分别对应普通、对数与幂次刻度下的组合图趋势线场景。6.5 数据点数值Values on data points开启「在数据点上显示数值」后可为图表上的点添加数值标签「要显示的数值」可设为全部All或部分Some选择Some时由 Metabase 自动挑选合适的数值以保证图表可读性。开启后仍可在「数据」选项卡中针对单个系列关闭数值显示。e2e 测试第一个用例即验证了graph.show_values: true时数据点数值如408.66能正确渲染。6.6 自动格式化AutoformattingMetabase 会对图表上的数字做自动截断以提升可读性例如将42,000显示为42K。七、坐标轴Axes设置让双指标各得其所组合图常用双 Y 轴左右各一坐标轴设置位于图表设置中的「坐标轴」选项卡官方文档列出的可选项如下X 轴横轴是否显示标签、重命名坐标轴名称线条与刻度显示方式隐藏、显示、紧凑、旋转 45°、旋转 90°比例尺Scale时间序列Timeseries、线性Linear、直方图Histogram、序数Ordinal取决于分组字段类型。Ordinal会在 X 轴上列出每个取值适合展示流程步骤这类非时间序列。Y 轴纵轴是否显示标签、重命名坐标轴名称必要时拆分 Y 轴Split y-axis自动 Y 轴范围关闭后可手动指定Min与Max比例尺线性Linear、幂Power、对数Log——对数刻度适合数据呈指数级增长/衰减的场景用于观察变化率线条与刻度显示隐藏或显示刻度数量Number of tick marks。在组合图的上下文中最常用的组合是将量级较小的指标挂到左 Y 轴、量级较大的指标挂到右 Y 轴让两条曲线/两组柱子的波动都清晰可见。这一能力在逐系列选项中通过「Y 轴位置自动 / 左 / 右」实现。八、图例Legend快速高亮、隐藏与下钻对于多系列或多分组的图表图例展示了每个系列的颜色与名称。官方文档给出图例的三种交互方式悬停系列名称高亮该系列点击系列前的颜色圆圈临时隐藏该系列点击系列名称对聚合系列下钻drill through到明细记录。注意图例无法隐藏也无法改变位置若要永久移除某系列请在「数据」选项卡中操作。此外还可以在图表上框选一段范围按时间区间过滤结果后再下钻查看明细。九、源码级实现组合图在 Metabase 中是如何工作的组合图的代码实现位于 frontend/src/metabase/visualizations/visualizations/ComboChart/ComboChart.tsx组件本体直接复用CartesianChart渲染CartesianChart {...props} /并通过Object.assign挂载可视化定义。这说明组合图在渲染层与折线/柱状/面积图共享同一套笛卡尔坐标图表引擎区别仅在于配置定义与系列元数据。definition.ts注册可视化元数据名称Combo、标识combo、图标lineandbar、最小/默认尺寸并将COMBO_CHARTS_SETTINGS_DEFINITIONS合并为图表设置。CartesianChart/definition.ts组合图的设置定义由STACKABLE_SETTINGS堆叠、SPLIT_PANELS_SETTINGS分面板、LINE_SETTINGS线形、GRAPH_GOAL_SETTINGS目标线、GRAPH_TREND_SETTINGS趋势线、GRAPH_COLORS_SETTINGS颜色、GRAPH_AXIS_SETTINGS坐标轴、GRAPH_DISPLAY_VALUES_SETTINGS数值标签、GRAPH_DATA_SETTINGS数据、TOOLTIP_SETTINGS提示框、LEGEND_SETTINGS图例、TIMELINE_EVENTS_SETTINGS时间线事件等模块合并而成——这也是前文「数据 / 显示 / 坐标轴」三选项卡各项设置的代码来源。从静态渲染static-viz测试数据frontend/src/metabase/static-viz/components/ComboChart/stories-data/还可以看到组合图支持的高级场景清单堆叠柱状面积combo-stacked-bars-areas.json、归一化堆叠combo-stacked-bars-areas-normalized.json、分面板混合显示类型combo-split-panels-mixed-series-display-settings.json、直方图形态combo-histogram.json、数据标签自动紧凑combo-data-labels-auto-compactness-propagates-from-line.json以及趋势线组合trend-combo*.json。端到端测试 combo.cy.spec.js 则从用户行为层面验证了组合图数据点数值渲染、通过series_settings混排面积/折线/柱状、堆叠与 100% 堆叠的 tooltip 百分比与总量、以及设置面板中「堆叠」选项的切换。这些测试用例可作为你验证自己组合图配置是否正确的参考范本。十、实战建议与进一步阅读何时选组合图两个指标量级差异大如数量 vs 金额、且希望直观对比其变化趋势时组合图 双 Y 轴是最佳选择。何时避免系列过多时组合图会显得杂乱可优先考虑趋势图Trend或分面板Stack series来分离信息。组合图与汇总分组若需要调整直方图分箱数量等聚合细节参见汇总与分组文档。更多相关阅读折线、柱状与面积图完整文档组合图章节即源于此且该文档的 front matter 保留了旧版combo-chart路径的跳转记录趋势图Trend charts告警Alerts配合目标线实现阈值通知组合图源码ComboChart 定义 与 笛卡尔图表设置定义【免费下载链接】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），仅供参考