mailinapp
Documentation menu

直方图模块

自动把原始数值分箱为易读的区间——交给它的是一个个原始数字,而不是已经统计好的分组,由它自己算出分布情况。

工作原理

与这个家族中其他所有图表不同,直方图完全没有按类别或系列组织的手动输入结构。行列表只有一列数值,一行一个原始数字——比如每个学生的一次测验分数、每笔交易的订单总额,或每次请求的响应时间。分箱发生在渲染时,而不是录入时:你从来不需要自己输入区间或计数。分箱完成后,直方图的绘制和渲染方式与单系列柱状图完全一致——它内部直接复用柱状图自身的光栅渲染管线。因此它继承了这个家族中每张图表都遵循的同一份约定:渲染出的 PNG 图片加上始终可见的数据表——分箱计数从不只存在于图片当中。

你通过分箱数量(2–20)大致控制希望得到多少个箱。该模块把你数据的最小值到最大值这段区间划分为这么多个等宽的箱,并统计有多少个手动输入的数值落在每一个箱里。如果你输入的每个数值都相同,区间长度就是零,也就无从划分。此时直方图不会把你要求的箱数画成一根真实的柱子外加其余全是空柱,而是会折叠为单独一个包含全部数值的箱。一个只有唯一取值的分布,天然就是一根柱子,而不是围绕着它的 N-1 个空箱。

图片下方的数据表列出了每个箱的精确区间(格式为"起点–终点")及其计数。这是唯一能把精确的分箱边界和计数一并读到的地方——图片能让人一眼看出分布的形状,但当分箱数量趋近区间上限时,并不会给每根柱子都标上数字。

数值列中的空白或非数字单元格会在分箱前被剔除(空单元格不等于真实的零值);最多读取 500 个手动输入的数值,对手动录入而言绰绰有余。

该模块只支持手动输入的行——没有数据源绑定模式,也没有营销活动响应绑定模式。参见将图表绑定到真实数据,了解具体是哪四种图表类型支持绑定。

可配置字段:

  • 图表标题——显示在图片上方。
  • 数值——行列表,单列"数值",一行一个原始数字。
  • 分箱数量——2 到 20,目标等宽箱的数量。
  • 柱状颜色——覆盖每个箱的默认调色板颜色。
  • 卡片的背景色、内边距、边框、圆角半径。
  • 标题与图例/表格文字各自独立的颜色/字号组合。

示例

Subject

This week's order value spread

一封测验结果摘要邮件可以把每位学生的原始分数(满分 100)绘制成直方图,立刻看出全班是集中在及格线附近,还是分裂成了两个群体。一份支持运营报告可以把当周工单的响应时间(以分钟计)绘制成直方图,一眼就能看出大多数工单是快速关闭并伴随一条长尾异常值,还是集中在某个 SLA 边界附近。一份电商回顾邮件可以把订单金额绘制成直方图,看出客户实际购买所落在的自然价格区间,而无需事先决定这些区间应该怎么划分——该模块会自己从原始总额中计算出来。

静态回退效果是什么样子

<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">Quiz scores</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Histogram: 60–68: 3, 68–76: 5, 76–84: 9, 84–92: 7, 92–100: 4"
       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">Count</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">76–84</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">9</td>
    </tr>
  </table>
</div>

每个箱的精确区间和计数都是一行普通的表格数据——与替代文字所概括、柱状图所可视化的是同一组数字。

相关内容