DATA VISUALIZATION
雷达图Radar Chart
多边形能力网：五个轴五条边，形状越饱满越全面。适合"多维对比一个主体"。
效果预览
Pro 版能力评估
五维评分（0-10）
易用性 9.2 · 性能 8.8
集成 7.5 · 价格 8.4
支持 7.8
适合用在哪
产品能力对比、技能评估、竞品五维分析、游戏角色面板。
容易踩的坑
- 两个主体叠加时半透明填充超过 30%，重叠区颜色混浊，看不清各自轮廓。
- 轴标签在移动端 300px 宽内互相挤压溢出容器，需缩小图表或改为条形图。
- 只画图形不给数值表，读屏和打印场景下无法读出任何具体分数。
设计提示词 · Prompt
雷达图（Radar Chart / Spider Chart）：SVG 画 5-6 条从圆心放射的轴 + 2-3 层同心参考多边形（浅灰描边），数据多边形用品牌色 15% 填充 + 2px 描边 + 顶点小圆点。轴标签放在各顶点外侧 10-11px。两个主体对比时第二层用对比色半透明叠加。维度 5-7 个，太多会乱；各维度必须同一量纲（都是 0-10 分）。形状面积不是重点——凹陷的那条轴才是重点（短板可视化）。旁配图例与关键维度解读文字。
Radar Chart / Spider Chart: draw in SVG 5-6 axes radiating from the center + 2-3 concentric reference polygons (light gray stroke), with the data polygon in a 15% brand-color fill + 2px stroke + small dots at the vertices. Axis labels sit outside each vertex at 10-11px. When comparing two subjects, overlay the second layer in a semi-transparent contrasting color. Use 5-7 dimensions — more gets messy; all dimensions must share the same scale (all scored 0-10). The shape's area isn't the point — the indented axis is the point (visualizing weaknesses). Add a legend and text interpreting the key dimensions alongside.
常见搭配
同一页面里经常和「雷达图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-radarwrap">
<svg viewBox="0 0 100 100">
<polygon points="50,8 88,32 74,80 26,80 12,32" fill="none" stroke="#e9eaef" stroke-width="1"/>
<polygon points="50,22 76,38 66,70 34,70 24,38" fill="none" stroke="#e9eaef" stroke-width="1"/>
<polygon points="50,12 84,33 70,74 30,68 16,34" fill="rgba(79,70,229,.16)" stroke="#4f46e5" stroke-width="2" stroke-linejoin="round"/>
<circle cx="50" cy="12" r="2.6" fill="#4f46e5"/><circle cx="84" cy="33" r="2.6" fill="#4f46e5"/><circle cx="70" cy="74" r="2.6" fill="#4f46e5"/><circle cx="30" cy="68" r="2.6" fill="#4f46e5"/><circle cx="16" cy="34" r="2.6" fill="#4f46e5"/>
</svg>
<div class="d-radar__legend">
<b>Pro 版能力评估</b>
<span><i style="background:#4f46e5"></i>五维评分（0-10）</span>
<span>易用性 9.2 · 性能 8.8</span>
<span>集成 7.5 · 价格 8.4</span>
<span>支持 7.8</span>
</div>
</div>