雷达图模块

一种多轴对比图——最多 3 个系列分布在一组共享的轴上,绘制为相互重叠的多边形(或称"蛛网"),而不是柱状或折线。它是那种需要在多个维度上同时比较类别的场景所需要的形态:例如按价格、质量、速度和支持这几项给一款产品打分,或者把一个套餐档位与另一个档位放在同一组标准下对比。

工作原理

每一行手动输入的数据对应一根轴。它在圆周上的位置纯粹由输入顺序决定(角度等于行索引除以行数),从不会按数值重新排序或排序。最多 3 个系列会在每根轴上绘制各自的数值,共享同一条 0 到最大值的比例尺:这与柱状图和折线图已经使用的"共享同一数值轴"模型完全相同,只是把它环形排列而不是沿直线排列。这就是为什么雷达图的行列表复用了与柱状图/折线图完全相同的输入列——雷达图的一根轴在数据模型上与柱状图的一个类别是完全等价的。

一个多边形至少需要 3 个顶点才能构成有意义的形状——2 个点只能画出一条线,1 个点什么也画不出——因此雷达图是这个图表家族中唯一同时设有下限和上限的类型。少于 3 根手动输入的轴(包括零根)会渲染与家族中其他空白图表相同的"添加更多数据"占位提示。而在另一端,雷达图的上限是 8 根轴;超过这个数量,辐条会挤在一起,轴标签也会开始重叠——这与这个图表家族中其他每种图表类型在 8 个类别/切片/系列处强制执行的"标记过多"上限是一致的。

图片下方始终可见的数据表把每根轴列为一行,每个启用的系列各占一列——这与柱状图和折线图表格已经采用的"类别 × 系列"形状相同。只有当启用了 2 个或更多系列时,图例才会出现;单一系列的身份已经由模块自身的标题命名了,这与柱状图/折线图遵循的约定相同。

系列的身份取决于你是否为它命名。系列 1 始终会渲染,如果未命名则回退使用模块自身的标题;而系列 2 和系列 3 只有在你为其标签字段输入名称后才会出现。一个只填了一半数值、却没有系列名称的列,永远不会以未命名的幽灵系列形式出现。

可配置字段:

图表标题——图表上方的可选标题文字。
数据(至少 3 行)——行列表:每行包含一个轴的类别标签,以及最多 3 个数字系列数值。
系列 1/2/3 名称与系列 1/2/3 颜色——系列 1 无条件渲染;系列 2 和系列 3 只有在命名后才会渲染。
卡片的背景色、内边距、边框与圆角半径。
标题颜色/字号与图例颜色/字号——图片下方标题和图例/表格文字的样式设置。

示例

在共享标准(价格、功能深度、支持响应速度、部署难易程度)上对比两个产品档位,把两个系列叠加在一张雷达图上,能让销售或营销邮件用一张图代替一整张功能对比表。内部运营总结可以按同一套评分标准(成本、质量、可靠性、沟通)给多个供应商或承包商打分,一眼看清续约决策的依据。运营客户调研的产品团队,如果调查涉及多个评分维度(易用性、价值、支持、可靠性、设计),可以把每个维度的平均分绘制为一个系列,再把上一季度的分数作为第二个系列,直观展示变化趋势。

静态回退效果是什么样子

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Vendor scorecard</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="360" height="360"
       alt="Radar chart: Speed (Vendor A 8); Reliability (Vendor A 6); Design (Vendor A 9); Price (Vendor A 5); Support (Vendor A 7)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Vendor A</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Speed</td>
      <td style="padding:4px 8px">8</td>
    </tr>
  </table>
</div>

只有一个具名系列时,图例会被省略(标题已经命名了它),但数据表依然会列出每根轴及其数值。

雷达图模块

工作原理

示例

静态回退效果是什么样子

相关内容