散点图/气泡图模块
用 X/Y 坐标点展示两个数值指标之间的关系——还可以通过一个可选的第三维度(标记大小)呈现气泡图变体。
工作原理
该图表渲染为一张服务器端生成的单一 PNG 图片(不依赖客户端图表库,不涉及 JavaScript),下方始终配有一张可见的 HTML 数据表格,列出图片所绘制的每一个点。与柱状图/折线图共用的分类表格,或饼图的占比表格不同,散点图的回退形式是它自己独有的。类别轴和占总数比例这两种概念都不适用于一组相互独立的点,因此这张表格就是简单的一点一行:系列、X、Y,以及(仅气泡模式下)大小。表格上方有一个按系列分组的图例,展示每个系列的色块和点数,因为"有多少个点"正是一个系列天然具备的唯一汇总数字。
每一行手动输入一个可选的系列名称、一个 X 值、一个 Y 值,以及一个可选的大小值(仅在气泡模式下才有意义)。系列的身份完全来自你在"系列"列中输入的内容——共用同一个系列名称的行会按首次出现的顺序被归为一组并使用相同颜色。如果每一行的系列都留空,那么所有点就会共用一个隐式系列,以模块自己的标题命名(如果模块没有标题,则命名为"Series 1")。如果改为输入不同的系列名称,同样的行数据就会生成一张真正的多色散点图,而不需要在任何地方单独设置"系列数量"——行数据本身就是判断系列数量的唯一依据。缺少 X 或 Y 的行会被跳过,而不会被绘制在 (0, 0) 处,因为一个空白单元格与手动输入的零并不是一回事。
气泡图开关会启用"大小"列:每个点的标记半径会随其大小值缩放,而不再是固定大小的圆点。关闭气泡模式并不会删除已经输入到"大小"列中的任何内容——只是在开关重新打开之前会被忽略。数据表格的"大小"列只有在气泡模式开启时才会出现,因此一张普通散点图的表格永远不会显示一列空空如也的内容。
该图表所有系列合计上限为 120 个点,系列数上限为 8 个,与分类调色板自身的长度一致。超出点数上限的手动输入行会按输入顺序被丢弃——散点图不像饼图那样天然存在一个可以把溢出数据折叠进去的"其他"分类。
该模块仅支持手动输入行数据——不支持数据源绑定或营销活动响应绑定模式。参见将图表绑定到真实数据了解具体是哪四种图表类型支持绑定。
可配置字段:
- 图表标题——显示在图片上方。
- 气泡图开关(由"大小"列决定标记大小)。
- 数据——行列表(系列 + X + Y + 大小)。
- 卡片的背景色、内边距、边框、圆角半径。
- 标题与图例/表格文字各自独立的颜色/字号组合。
示例
Subject
Signups vs. activation, by plan
一份每周运营摘要可以按客服坐席绘制响应时间(X)与工单量(Y)的关系,每位坐席一个点,不做系列分组——直观地看出谁在处理更大工单量的同时没有出现响应变慢。一份产品使用情况报告可以按套餐等级(Free/Pro/Business)把点分为 2-3 个系列,每个系列一种颜色,绘制互动分数与账户年龄的关系,以观察不同等级之间这种关系是否存在差异。一份销售报告可以使用气泡变体绘制交易金额(X)与成交天数(Y)的关系,并把"大小"列设为涉及的干系人数量。这样一张图表就能同时呈现三个数值维度,而无需第四条轴——这也是这个图表家族从不添加的东西。
静态回退效果是什么样子
<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">Response time vs. ticket volume</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
alt="Scatter chart: Agent A (1 point), Agent B (1 point), Agent C (1 point)"
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">Series</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">X</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Y</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Agent A</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">4.2</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">38</td>
</tr>
</table>
</div>
一张普通(非气泡)散点图的表格根本没有"大小"列;只有当"气泡图"开关打开后,这一列才会出现。