Metabase Treemap 可视化完全指南从数据形态、查询构建到图表设置的源码级解析【免费下载链接】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/metabaseTreemap矩形树图是 Metabase 中用于展示层级数据的可视化类型它把一棵树呈现为嵌套矩形用矩形的面积表示某个指标的数值大小。本文以官方文档 docs/questions/visualizations/treemap.md 为主体结合前端源码与示例图片系统讲解 Treemap 的适用场景、数据形态、查询构建步骤、钻取交互与图表设置项并深入剖析其底层实现原理帮助你准确判断何时用、怎么配、如何排查在提问Question与仪表盘Dashboard中快速产出可读性强的占比类分析图。什么是 TreemapTreemap 可视化把层级数据树形结构显示为嵌套矩形。层级最底层的矩形称为叶子leaf叶子矩形的大小由所选指标metric的数值决定数值越大占据的面积越大反之越小。当查询按两个维度分组时第一个维度决定父级类别表现为较大的外圈矩形第二个维度嵌套在父级类别内部表现为叶子矩形。下图是一个典型的双维度 Treemap指标为订单数Count of orders按两个维度分组——第一维度是产品类别大矩形第二维度是供应商每个类别内部的嵌套叶子。何时使用 TreemapTreemap 适合用来比较一个总量如何按某个分类维度拆分或在第一个分类维度之下再嵌套第二个分类维度进行细分。它的优势在于展示部分与整体part-to-whole的关系并且特别擅长处理类别数量很多的场景当类别很多时饼图会被切成细得难以辨认的薄片条形图则会变得很长Treemap 能在紧凑的空间里容纳大量类别还能在第一个维度内部再嵌套第二层维度。例如先按产品类别统计订单数再在每个类别下按供应商细分。Treemap 的劣势在于不擅长类别之间的精确对比因为人眼判断面积大小比判断条形长度更困难。因此如果只有一个维度且类别数量很少推荐改用饼图或条形图如果核心诉求是逐项对比各个类别的数值条形图或饼图通常是更好的选择。从实现层面看Metabase 在 TreemapChart 的 definition.ts 中通过isSensible定义了 Treemap 的合理数据前提至少 1 行数据、至少 1 个维度列、至少 1 个指标列。只有满足该条件可视化选择器中才会把 Treemap 判定为合适的图表。Treemap 需要的数据形态要创建 Treemap你需要构建一个返回单一指标、并按一个或两个维度分组的查询。按一个维度分组扁平叶子当指标只按一个维度分组时Treemap 显示为一组扁平的叶子没有父级类别。以下是按类别统计订单数的数据形态CategoryCountWidget612Gadget562Gizmo491Doohickey462按两个维度分组嵌套结构当指标按两个维度分组时Treemap 会把第二个维度嵌套进第一个维度内部第一个维度决定外圈矩形及其颜色第二个维度决定外圈矩形内部嵌套的叶子指标数值决定每个叶子的大小。以下是按类别父级和供应商叶子统计订单数的数据形态CategoryVendorCountWidgetJerrell Gulgowski Inc26WidgetBrittany Mueller Inc25GadgetJerrod McLaughlin LLC24GadgetMiles Ryan Group22GizmoMr. Tanya Stracke and Sons30DoohickeyKuhn-OReilly27对应的图形即上文第一张图每个产品类别是一个带颜色的父矩形内部按供应商拆分成多个叶子叶子面积正比于订单数。在底层实现中viz-core 的 treemap/model/data.ts 通过getTreemapChartColumns从treemap.grouping、treemap.sub_grouping、treemap.value三个设置项解析出图表所需的列描述column descriptors只有当分组列与指标列都存在时才会返回有效结果否则返回null图表无法渲染。随后的getTreemapData会把查询返回的原始行数据逐行归并成TreemapTree树结构父节点数值恒等于其存活叶子数值之和从而保证矩形面积能够正确嵌套包含源码注释特别指出这与饼图丢弃整个负值组但仍在聚合中求和的处理方式不同Treemap 是按行过滤负值后再求和。构建 Treemap 查询在查询构建器Query Builder中构建一个嵌套 Treemap 的步骤如下在查询构建器中点击Summarize汇总选择一个指标例如Count of rows行数计数按第一个维度分组例如Category类别添加第二个分组维度例如Vendor供应商在可视化选择器中选择Treemap。分组顺序至关重要第一个分组决定外圈矩形第二个分组决定嵌套在每个外圈矩形内部的叶子。查询构建完成后点击任意父级类别即可放大zoom进入该类别查看其内部的叶子分布。源码中对该交互的实现位于 TreemapChart/events.ts 的dispatchTreemapViewRoot它通过 ECharts 的treemapRootToNode动作把视口根节点切换到目标父节点对应的点击处理逻辑getTreemapClickHandler会先判断当前是否处于有子节点且未下钻的概览状态若是则触发下钻drill to group否则生成钻取数据交给onVisualizationClick回调。导航状态本身由 use-treemap-navigation.ts 管理。钻取Drill-throughTreemap 支持两类点击钻取行为父级类别Parent category点击父级类别可放大进入该类别要返回完整 Treemap点击页面左上角出现的返回箭头面包屑导航即可。面包屑由 TreemapBreadcrumb.tsx 渲染其中会显示当前分组标签与对应指标值。叶子Leaf点击叶子可以查看底层记录、按另一个维度拆分breakout、查看自动洞察automatic insights或按该叶子数值进行过滤。需要特别注意的是钻取文档中指出用 SQL 编写的原生查询native query可用的钻取选项十分有限这一点同样适用于 Treemap。从源码看events.ts 中getTreemapClickData仅对非原生non-native查询附加dimensions钻取维度信息正是这一限制的具体体现。Treemap 图表设置在提问页面中点击图表左下角的齿轮图标即可打开图表设置chart settings其中包含Data数据与Display显示两个标签页。Data 数据页在图表设置的Data标签页中可以配置图表的三个核心要素Grouping分组决定父级类别的维度。可以对每个父级类别进行两类自定义自定义颜色点击类别名称旁的颜色色块color swatch即可为该父类别设置独立颜色重命名点击类别名称旁的...菜单可修改父类别在图中显示的名称。Sub-grouping子分组嵌套在每个父类别内部、作为叶子的维度。该选项要求查询至少包含两个维度。Value数值决定每个叶子大小的指标。点击...打开格式化菜单可设置数字样式number style、分隔符样式separator style、小数位数number of decimal places、乘数multiplier以及前缀/后缀prefix/suffix。这些设置项在源码中有非常明确的对应关系。viz-core/shared/settings/treemap.ts 定义了全部设置键treemap.grouping的默认值取数据中第一个是维度且非指标的列definition.ts并在变更分组时擦除treemap.rows中持久化的行设置treemap.sub_grouping默认取第一个与分组和数值列都不同的维度列并且仅当查询中存在这样的维度列时才显示该选项getHidden逻辑treemap.value默认取第一个与分组列不同的指标列treemap.rows存储每个父类别行key、名称、颜色、是否启用的持久化设置由getTreemapRows基于原始数据聚合生成——shared/settings/treemap.ts 中可以看到它按分组键key对行进行聚合、按数值降序排列、为每个键分配颜色并保留用户此前保存的启用/禁用与自定义名称状态。Display 显示页在图表设置的Display标签页中可以控制标签与数值的显示与隐藏共有四个开关Show parent labels显示父级标签默认开启仅当存在子分组sub-grouping时可用Show parent values显示父级数值默认开启依赖父级标签开关——当父级标签被关闭时该开关会被禁用disabledShow leaf labels显示叶子标签默认开启Show leaf values显示叶子数值默认开启依赖叶子标签开关——当叶子标签被关闭时该开关会被禁用。上述依赖关系与默认值均可在 definition.ts 的 SETTINGS_DEFINITIONS 中逐一核对。值得注意的是父级标签的实际显示还会受图表尺寸影响在 TreemapChart.tsx 中调用shouldShowParentLabels(gridSize, settings)判断即在仪表盘或文档等紧凑布局compact下父级标签可能被自动隐藏以保持可读性。局限与替代方案使用 Treemap 时需要注意以下限制只能展示一个指标Treemap 展示的是按一个或两个维度分组的单一指标。如果查询返回多个指标Treemap 只使用你在Value槽位中选择的那个指标。源码层面definition.ts 的checkRenderable会要求至少存在一个非分组列的指标列否则抛出ChartSettingsError提示请至少添加一个指标列作为数值Add at least one metric column to use as the value。不支持超过两层嵌套当查询返回的维度超过两个时Treemap 只使用Grouping与Sub-grouping槽位中的两个维度其余未使用的维度会被合并进每个叶子中不会产生第三层嵌套。小叶子可能难以观察当一个叶子远大于其他叶子时较小的叶子会变得太小以至于难以看清或无法点击选中。适合部分-整体对比Treemap 擅长展示各组成部分对总量的贡献。如果需要类别之间的精确数值对比请改用条形图类别数量很少时可改用饼图。另外从源码可以确认两个细节行为其一若某行指标的数值为负数该行会在求和前被过滤model/data.ts 注释说明以保证父节点面积恒等于叶子面积之和其二若用户曾手动关闭过某个父类别在treemap.rows中标记enabled: false该类别会从图中隐藏但相关行数据仍会保留在设置中待重新启用后恢复显示。小结Treemap 是 Metabase 中处理多类别占比 双维度嵌套场景的首选图表一个指标、一个或两个分组维度即可在紧凑空间内呈现清晰的部分-整体结构并支持父级放大下钻与叶子级钻取。掌握分组顺序决定嵌套层级Value 槽位决定叶子大小Display 开关控制标签与数值这三个要点配合 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考