mailinapp
Documentation menu

热力图模块

一个行 × 列的数值网格,按照从浅到深的顺序色阶着色——用于一次性发现活动在两个维度上的集中位置,例如星期几 × 小时。

工作原理

该图表以单张服务器端生成的 PNG 形式渲染(没有客户端图表库,没有 JavaScript),下方配有一张始终可见的 HTML 数据表——这与该系列中每一种图表都坚持的不可妥协的搭配方式相同。热力图不像它的同系列图表那样具有系列或类别占比的形状:大小完全通过沿着一条顺序色阶的颜色深浅来表达,而不会用第二种身份颜色来表示。表格上方的"图例"是一条渐变条(真正的 CSS,而不是色块列表),一端标注 0,另一端标注网格中的实际最大值,用于展示每种色调对应的量级。

数据行以"长格式"手动输入:每一行手动输入一个行、一个列和一个值——对应网格中的一个单元格,而不是一整行或一整列。这在这里是很自然的做法,因为项目数据无法在数组中再嵌套数组。该模块会在渲染时把每一个手动输入的单元格归并进一个行 × 列的矩阵中。不同的行标签和列标签会按照首次出现的输入顺序保留,而不会被排序——一个列出星期几的热力图会把星期一排在最前面,是因为你最先输入了它,而不是出于任何字母顺序或时间顺序的推断。

一个真正缺失的组合(某个你从未为其输入过任何值的(行, 列)组合)会在图片中渲染为一个明显的纯灰色"无数据"单元格。只要网格中存在至少一个这样的缺口,图例中就会出现一个"无数据"色块。这与零值的渲染方式是刻意区分开的。

零是色阶上一个真实的、处于深色一端的有效数值——是低值,但依然是被测量过的——而缺口则意味着从未有人为该单元格记录过任何内容。把两者混为一谈,会让"这里没有数据"看起来和"这里的活动恰好为零"完全一样,而这是两种实质上不同的表述。数据表中只会列出你确实手动输入过数值的单元格;真正的缺口同样不会为表格贡献任何一行,因为根本没有值可以展示。

只有在网格保持较小的情况下,单元格才会在网格图片内部直接以文字形式显示其精确数值:总单元格数(行数 × 列数)不超过 40 个。超过这个数量后,图片中就只靠色阶深浅来传达量级,而那张始终可见的数据表则成为读取精确数字的地方。把可读的文字塞进数量不断减少、体积却不断缩小的单元格里,在网格真正变大之前就已经不再奏效。网格上限为 12 个不同的行和 24 个不同的列。超出这些上限后新增的行或列身份会被丢弃,而不是并入已有的行或列,因为把两个本质上不同的行或列合并在一起,会歪曲各自原本测量的内容。

色阶默认使用从项目品牌色派生出的一种色调;色阶颜色可以用你自己的颜色覆盖它。

该模块仅支持手动输入的行数据——它没有数据源绑定或营销活动响应绑定模式。关于哪四种图表类型支持绑定,参见将图表绑定到真实数据。

可配置字段:

  • 图表标题 — 显示在图片上方。
  • 单元格(行、列、值) — 数据行列表;每一行手动输入对应网格中的一个单元格。
  • 色阶颜色 — 覆盖默认的品牌色派生色阶色调。
  • 卡片的背景色、内边距、边框、圆角半径。
  • 标题与图例/表格文字各自独立的颜色/字号组合。

示例

Subject

When your RSVPs are opening

活动摘要邮件可以按星期几 × 一天中的小时,对 RSVP 活动做成热力图(一个经典的 7×24 形状,完全在行/列上限之内),向组织者展示邀请究竟是在什么时间被打开和响应的。运营支持类报告可以按星期几 × 类别把工单量绘制成网格,一眼看出哪个类别在哪一天出现高峰,而不需要一堆分开的条形图。体育团队的赛季报告可以按分组 × 月份对出勤情况做热力图。真正的"无数据"缺口——比如某个分组在较早的月份还不存在——会明显以灰色渲染,而不会看起来像出勤率为零的一个月,从而歪曲球队的实际到场情况。

静态回退效果是什么样子

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Activity by day and time</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Heatmap: 3 rows × 4 columns, values from 0 to 15"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px">
    <span style="font-size:12px;color:#6b7280">0</span>
    <span aria-hidden="true" style="display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(to right,#eef2ff,#3730a3)"></span>
    <span style="font-size:12px;color:#6b7280">15</span>
  </div>
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Row</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Column</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Tue</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Afternoon</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">15</td>
    </tr>
  </table>
</div>

渐变图例标注了色阶 0 和最大值两端的数字;表格为每一个真正有数据的单元格列出行/列/值——真正的缺口在这里不会贡献任何一行。

相关内容