折线图/面积图模块
展示一段有序序列(周、月,或随时间变化的漏斗阶段)上的趋势,以描边线条绘制,或者在开启填充开关后以其下方的阴影区域绘制。最多支持 3 个系列。
工作原理
图表渲染为一张服务器端生成的单一 PNG 图片——没有客户端图表库,没有 JavaScript——图片正下方始终配有一张可见的 HTML 数据表,重复图片所绘制的每一个数字。这是这个图表家族中每种图表都必须遵守的搭配,确保趋势在纯文本客户端、图片被屏蔽的收件箱,以及关闭图片显示的情况下依然可读。
它的输入结构与柱状图完全一致:一列类别(这里通常是时间段——"Week 1""Mon""Q1",不过也可以是任意有序标签)加上最多三列数字系列。系列 1 始终启用,如果你没有设置名称,则借用图表自身的标题作为系列名。系列 2 和系列 3 只有在被赋予名称后才会启用,因此一个只填了一半数值、却没有系列标签的列,永远不会以未命名的幽灵线条形式出现。每个启用的系列都以自己的颜色绘制成一条独立的描边线;只有当启用了 2 个或更多系列时,图例才会出现。
填充开关会把折线图变成面积图:每条线下方的区域会以低透明度渐变阴影铺到坐标轴。之所以做成一个开关而不是单独的模块,是因为底层数据模型、坐标轴和类别形状在两种情况下完全相同——变化的只是线条的渲染方式。当多个系列同时开启填充时,重叠区域依然能清晰区分,因为每个系列都保留了自己的低透明度系列色。这个模块依然拒绝双坐标轴,因此多个填充系列始终共享同一条数值轴。
数据点标记(每个手动输入数据值处的小圆点)会绘制在线条之上,最多支持约 20 个类别。超过这个数量后,标记会逐渐变淡并停止逐点绘制,因为在高密度情况下它们会重叠成沿线条的一片实心污渍,而不再是清晰独立的点。描边线条本身、共享的数值轴,以及数据表都会在超过这一阈值后继续承载趋势信息——阅读图表其实并不依赖这些标记点。
可配置字段:
- 图表标题——显示在图片上方;当只有系列 1 启用时,也作为它的回退系列名称。
- 填充(面积图变体)开关。
- 数据——行列表(类别 + 系列 1/2/3),与柱状图使用的是同一套列。
- 系列 1/2/3 名称与系列 1/2/3 颜色。
- 卡片的背景色、内边距、边框、圆角半径。
- 标题与图例/表格文字各自独立的颜色/字号组合。
折线图还可以把行数据绑定到一个已连接的数据源,而不必手动输入。分组依据字段会把每个不同的值转化为类别轴上的一个点,并搭配最多 3 个系列字段,每个字段各自设置聚合方式。一个可选的过滤条件可以引用收件人的合并标签,呈现按收件人区分的同一趋势视图。完整机制(包括营销活动响应结果模式)参见将图表绑定到真实数据。
示例
Subject
Weekly signups are trending up
一封每周运营摘要邮件可以把过去 8 周的待处理工单数量绘制成一条折线,并在这个数量级下依然显示数据点标记,让人一眼看出趋势是否在改善。一份销售总结可以用填充面积图展示一个季度的累计收入,每条产品线各占一个系列(最多 3 个),读者既能看到各自的独立趋势,也能直观看到叠加阴影随周逐渐堆积的效果。一份周期性绩效报告可以通过合并标签过滤条件直接绑定到按收件人筛选的数据源——"你账户本月的使用情况"——这样同一个项目的折线图会向同一次发送的每位收件人展示各不相同的趋势。
静态回退效果是什么样子
<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">Open tickets</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
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">Open tickets</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
</tr>
</table>
</div>
alt 文本总结了每一个类别/系列的数值对,因此即使不加载图片,趋势依然清晰可读;下方的表格以纯 HTML 形式重复了相同的数字。