mailinapp
Documentation menu

饼图/环形图模块

每个类别对应一个数值,以占整体份额的形式呈现——一个饼图,或者在环形模式下是一个圆环,中间留有空间显示一个头条数字。

工作原理

图表渲染为一张服务器端生成的单一 PNG 图片(没有客户端图表库,没有 JavaScript),旁边始终配有一个可见的图例和一张 HTML 数据表格——这是该图表家族中每一种图表都必须遵守的搭配。与柱状图/折线图的图例不同,饼图的图例无论扇区数量多少都会渲染。饼图自己的标题无法像单一系列的柱状图/折线图那样借用模块标题来指代某个扇区,因此即便只有一个扇区,饼图也需要图例来说明这个扇区是什么。

每一条图例都会显示该扇区的标签及其占总数的百分比。数据表格额外增加第三列(在类别和百分比之外的确切数值),因此四舍五入后一目了然的占比和精确数字始终都以文本形式提供。

录入方式与柱状图/折线图固定的系列位不同:每个类别一行,各自只有一个值和一个可选的按扇区颜色替换。没有第二或第三个系列,因为按定义,饼图的每个类别只有一个度量值。类别为空或数值为零/负数的行会被完全跳过,而不会绘制成一个空扇区。

超过 8 个扇区之后,最小的几个扇区会合并为一个单独的合成"其他"扇区,而不是让图表变得细窄到难以辨认。超过大约 8 个扇区后,饼图就无法再以可区分的角度展示每一个扇区,因此这种合并能让每个被绘制出的扇区都保持可辨认。合并会保留按数值排在前 7 位的扇区,并把其余的全部并入"其他"。图例和数据表格都会反映同一次合并的结果,因此你在图表旁读到的内容,始终与图表中实际绘制的内容一致。不会出现某项内容悄悄从图例中消失、却仍计入图片,或者反过来的情况。

环形模式会把饼图变成一个圆环。只有在这时,中心值和中心标签字段才会起作用,让你在圆环中间放置一个 KPI 风格的数字。这是一对手动输入的内容,而不是从扇区数值推导出来的——与 KPI 计分卡自己的 Δ 方向遵循同样的"手动输入,而非自动推断"的先例。实心的饼图没有空洞可以放文字,因此在开启环形之前,这两个字段都是不起作用的。

可配置字段:

  • 图表标题——显示在图片上方。
  • 环形(中空)开关。
  • 数据——行列表(类别 + 值 + 可选颜色)。
  • 中心值 / 中心标签——仅环形模式下可用。
  • 卡片的背景色、内边距、边框、圆角半径。
  • 标题与图例/表格文字各自独立的颜色/字号组合。

饼图也可以不手动输入行,而是把自己的扇区绑定到一个已连接的数据源——一个分组依据字段(每个不同的值成为一个扇区),外加一个值字段和聚合方式(求和、平均值、计数,或最新一行)。一个可选的筛选条件可以引用收件人的合并标签,让同一个数据源为每位收件人展示各自的一部分数据。完整机制参见将图表绑定到真实数据,其中包括营销活动响应结果模式——例如直接绘制一次过往投票或评分自身的投票分布。

示例

Subject

Where your traffic is coming from

一份活动后报告可以通过直接绑定到该营销活动的响应结果,把一次投票的票数分布绘制为饼图——不需要任何数据源,只需从选择器中挑选那个投票——这样报告就会始终反映该投票当前的统计结果。一份订阅情况回顾可以用环形图展示"套餐构成"(Free/Starter/Pro/Business 作为各个扇区),中心显示活跃账户总数,作为圆环内部的一个 KPI 风格数字。一份包含十几个工单类别的支持摘要,依靠自动的"其他"合并来保持图表可读,同时信任下方的数据表格依然按精确数量列出每一个单独的类别。

静态回退效果是什么样子

<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">Plan mix</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="320"
       alt="Donut chart: Free 420 (52%), Starter 210 (26%), Pro 175 (22%)"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <div style="display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px">
    <span style="font-size:12px;color:#6b7280">
      <span aria-hidden="true" style="display:inline-block;width:10px;height:10px;background-color:#4f46e5"></span>
      Free (52%)
    </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">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Percent</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Free</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">420</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">52%</td>
    </tr>
  </table>
</div>

图例和表格对每个扇区都携带完全相同的标签/数值/百分比——这是刻意的重复,因为图例适合快速浏览,而表格才是精确的数据来源。

相关内容