矩形树图模块

按数值大小成比例的方块拼接成一个矩形,而不是切分成扇形——与饼图相同的"每个类别一个数值"手动输入结构,只是用面积("方块化")而不是角度来呈现布局。它是回答"占整体的份额是多少"这个问题时,与饼图或环形图不同的另一种视觉呈现方式。

工作原理

每一行手动输入的数据对应一个方块;一个方块的面积与它的数值在所有保留方块总和中的占比成正比。矩形树图的方块在数据模型上与饼图的扇形完全相同:每个类别一个数值,占总体的份额,只是几何形状不同。正因如此,该模块直接复用了饼图的录入列、颜色分配逻辑和折叠行为,而不是为第二种图表类型重复实现一遍这套逻辑。

这种共享血缘意味着折叠规则和饼图完全一致:超过 8 个类别后,按数值排序最小的那些方块会被合并成一个合成的"其他"方块,而不是让布局变得碎片化到难以阅读。折叠后幸存下来的方块保持其手动输入时的原始相对顺序,不会按数值重新排序。这能让它们的颜色分配保持稳定且可预测;"其他"方块在出现时总是排在最后。标签为空或数值非正的行会被直接跳过,因为矩形树图的方块无法表示零或负的份额。

图片下方始终可见的数据表沿用的是饼图自己的结构:类别、数值和百分比三列,一个方块一行,包括存在时的"其他"折叠行。它以可选中的文本形式,承载着方块面积所代表的确切百分比。图片上方的图例列出每个方块及其相同的百分比数字,始终渲染,不会因系列数量而被隐藏。矩形树图自身的标题无法像单一柱状图/折线图系列那样借用模块标题来指代某一个具体方块。

可配置字段:

图表标题——图表上方的可选标题文字。
数据——行列表:一个类别标签、一个数字数值,以及可选的每方块颜色覆盖项。
卡片的背景色、内边距、边框和圆角半径。
标题颜色/字号和图例颜色/字号——图片下方标题与图例/表格文字的样式设置。

如果目前还没有手动输入任何行——或每一行的标签都为空、数值都非正——该模块会跳过图片,只渲染标题和卡片外框,并显示一条"请至少添加一行数据以渲染此图表"的简单提示。

示例

按渠道(自然流量、付费、推荐、直接访问、社交)划分的流量占比,以方块形式出现在月度营销回顾邮件中,能让每个来源的相对规模一眼可辨,无需再去读一列百分比数字。一封预算分配邮件可以按部门或项目把支出拼成方块,展示本季度的钱实际花去了哪里。一支支持团队可以按分类(账单、缺陷、新用户引导、功能请求)把工单量拼成方块,让相关方能快速看出支持负荷集中在哪里。

静态回退效果是什么样子

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

替代文字详细列出了每个方块的数值及其占总体的份额;下方的表格以可选中的 HTML 形式重复了同一组数字,包括任何被折叠的"其他"方块。

矩形树图模块

工作原理

示例

静态回退效果是什么样子

相关内容