柱状图模块
垂直或水平排列的柱形,用于比较各类别之间的数值——回答"这些当中哪个更大"这类问题的主力图表,最多支持 3 个系列。
工作原理
图表渲染为一张服务器端生成的单一 PNG 图片(没有客户端图表库,没有 JavaScript),正下方始终配有一张可见的 HTML 数据表格,重复图片中绘制的每一个数字。这张表格不是为故障客户端强行加装的回退方案——它呈现的正是与图片相同的数字,以纯 HTML 形式给出,也正是它让图表在纯文本客户端、屏蔽图片的收件箱以及屏幕阅读器中都能真正可用。
数据以行的形式手动输入:一个类别列,加上最多三个数值型系列列。系列 1 始终处于启用状态——单系列柱状图不需要自己的系列名称,因为模块自身的标题已经能标识它。
系列 2 和系列 3 只有在你于系列 2 名称/系列 3 名称中填写了名称之后才会启用。一个只填了一半数值、却没有系列名称的列会被直接忽略,而不会显示为一根没有标签的虚影柱子,因此填写不完整的数据永远不会渗透进渲染结果。每个启用的系列都有自己的颜色,可以按系列手动挑选,也可以从项目的分类调色板中解析得到。只有当启用的系列达到 2 个或以上时,图例(色块+标签)才会出现——单一系列已经由图表自身的标题命名,单条目图例反而是多余的。
类别数量不超过约 8 个时,除了数据表格之外,每根柱子还会在图片本身上、柱子上方或柱子上直接标注一个数值标签。超过这个阈值后,图表会放弃逐柱标注,转而使用带网格线的共享数值坐标轴。试图在十几根以上的柱子上都塞进数值标签,早在到达这个数量之前就已经变得难以辨认。因此坐标轴接管了一目了然的读数功能,而数据表格则成为精确数字的来源。图表总共最多支持 24 个类别;超出部分手动输入的内容不会被绘制(数据表格也只会反映实际绘制出的内容)。
水平柱状图会把类别坐标轴从左右方向翻转为从上到下。当类别名称较长或数量较多时可以选择这种方式——水平标签不需要像垂直坐标轴标签那样被旋转或截断。
可配置字段:
- 图表标题——显示在图片上方;当只有系列 1 启用时,也会作为回退的系列名称。
- 水平柱状图开关。
- 数据——行列表(类别 + 系列 1/2/3)。
- 系列 1/2/3 名称和系列 1/2/3 颜色。
- 卡片的背景色、内边距、边框、圆角半径。
- 标题与图例/表格文字各自独立的颜色/字号组合。
柱状图也可以不直接手动输入行,而是把自己的行绑定到一个已连接的数据源。一个分组依据字段会把每个不同的值变成一个类别,并搭配最多 3 个系列字段——每个都有自己的聚合方式(求和、平均值、计数,或最新一行)——与手动输入行时最多 3 个系列的形式相同。一个可选的筛选条件可以引用收件人的合并标签,让同一个模块向每位收件人展示同一数据源中属于他们自己的那部分数据。完整机制参见将图表绑定到真实数据,其中包括营销活动响应结果模式。
示例
Subject
Q3 revenue vs. cost breakdown
仪表盘项目用途会自动预置一个柱状图,就在一行三张 KPI 计分卡下方——为周期性报告提供一个一键起点;参见仪表盘网格预设。一份每周销售摘要可以把营收按地区绘制为三四个类别、单一系列的柱状图,也可以把"本周 vs. 上周"绘制为每个类别两个系列以便直接对比。一份活动后报告在遇到十几个过长、不适合作为垂直坐标轴标签的队名时,可以用水平柱状图展示"各分队 RSVP 人数"。一份教育垂直领域的进度摘要可以按班级绘制平均测验分数,每个班一根柱子,并实时绑定到数据源,这样每次周期性发送时数字都会保持最新。
静态回退效果是什么样子
<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">Revenue by region</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<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">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Revenue</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
</tr>
</table>
</div>
<img> 携带一段描述性的 alt 文本,概括了每个类别/系列的数值,其下方的表格以始终可见的纯 HTML 形式重复了相同的数字。