纯HTML无法直接绘制雷达图，必须依赖或；CSS缺乏极坐标系统，硬凑会导致误差累积、响应式错位、填充受限及事件定位不准。

纯 HTML 无法直接绘制雷达图—— 或 是必需的载体，浏览器不支持用

和 CSS transform 拼出准确的极坐标多边形。

为什么不能只用 HTML + CSS 做雷达图

CSS 缺乏原生极坐标系统，所有“CSS 雷达图”本质上是用 transform: rotate() + position: absolute 硬凑角度和半径，导致：
• 数据点位置随角度增加累积误差（尤其 >6 个维度时）
• 无法动态计算多边形顶点坐标，缩放/响应式会错位
• 填充区域只能靠伪元素或遮罩模拟，不支持透明度叠加与交集裁剪
• 没有事件坐标映射，点击某个轴或区域无法准确定位数据维度

用 手动绘制雷达图的关键三步

核心是把极坐标 (r, θ) 转为直角坐标 (x, y)： x = centerX + r * cos(θ)，y = centerY + r * sin(θ)。注意：Math.cos/Math.sin 的参数单位是弧度，不是角度。

• 先算出每个维度对应的角度步长：angleStep = (Math.PI * 2) / data.length
• 对每个数据点，用归一化后的值（如 value / maxValue）乘以最大半径，再套公式转坐标
• 用 ctx.beginPath() → ctx.moveTo() → 多次 ctx.lineTo() → ctx.closePath() 绘制填充多边形；再单独描边轴线和网格圆

示例片段（省略样式设置）：

const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const maxRadius = Math.min(centerX, centerY) * 0.8;
const angleStep = (Math.PI * 2) / data.length;
<p>ctx.beginPath();
for (let i = 0; i  angleStep;
const r = (data[i] / maxValue)  maxRadius;
const x = centerX + r <em> Math.cos(angle);
const y = centerY + r </em> Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();</p>

用

优势在于路径可声明、可动画、可绑定事件，且坐标系天然适合极坐标转换。关键不是用 ，而是用 的 d 属性拼接 M（move）和 L（line）指令。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 每个顶点仍需手动算 x/y，但结果直接注入 d 字符串，无需 canvas 上下文状态管理
• 网格线可用 （同心圆） + （从中心出发的射线）组合，比 canvas 更易复用和修改
• 给 加 data-index="2" 这类自定义属性，配合 addEventListener('click') 即可精准捕获点击的是第几个维度
• 注意 SVG 默认坐标原点在左上角，需用 viewBox 或 transform="translate()" 把中心移到画布中点

别踩这些坑：坐标、归一化与响应式

实际项目中最常卡住的不是绘图逻辑，而是这三点：

• Math.sin/Math.cos 传了角度值（如 60），必须先转弧度：angleInRad = angleInDeg * Math.PI / 180
• 数据归一化没统一基准：若各维度量纲不同（如“响应速度：ms” vs “满意度：1–5 分”），不能直接用原始值除以全局 maxValue，得先做 min-max 或 z-score 标准化
• 响应式重绘时忘记重设 canvas.width/canvas.height（仅改 CSS 尺寸会导致图像模糊）；SVG 则要监听 resize 并更新 viewBox 和 transform

真正麻烦的从来不是画出一个静态图形，而是让角度对齐、半径比例合理、交互反馈明确——这些细节没有通用解，得根据你的数据分布和 UI 容器反复调。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！