用 canvas 手动画极坐标图最可控：需手动计算极坐标点、平移原点、绘制网格线；chart.js 雷达图易配错选项；d3.js 推荐用 d3-polar；css transform 伪极坐标不可靠。
用 canvas 手动画极坐标图最可控
浏览器原生 HTML 不支持极坐标图，<svg></svg> 本身没有内置雷达图或极坐标坐标系，必须自己算点、连线、填充。用 canvas 是最轻量、兼容性最好、也最容易调试的方式——尤其当你只需要一个静态或简单交互的雷达图时。
核心思路是：把每个维度映射到一个角度，用极坐标公式 x = r * cos(θ)、y = r * sin(θ) 算出顶点，再用 ctx.moveTo() 和 ctx.lineTo() 连成多边形。
- 角度步长 =
2 * Math.PI / data.length（假设数据等分） - 注意 canvas 坐标原点在左上角，需手动平移中心点，比如
ctx.translate(centerX, centerY) - cos/sin 的 θ 在 JS 中是弧度，别用角度直接传参
- 雷达图通常要画网格线（同心圆）和角度线（放射线），这些都得循环手绘
用 Chart.js + 插件快速出雷达图但要注意配置陷阱
Chart.js 的 radar 类型本质就是极坐标图，但它默认的“极坐标”仅限于角度均匀分布的多边形，不支持自定义半径函数或非线性尺度。很多用户卡在数据没显示，其实是配置项写错位置了。
-
type: 'radar'必须写在options.plugins.datalabels外层，不是插件里 - 刻度标签错位？检查
options.scales.r.angleLines.display和pointLabels.display是否冲突 - 想让最大值不总是 100？改
options.scales.r.max，但注意它只影响显示范围，不缩放原始数据 - 多数据集重叠看不清？给
backgroundColor加透明度，如'rgba(54, 162, 235, 0.2)'
D3.js 画真正灵活的极坐标图但别从零写坐标变换
D3.js 本身不带极坐标比例尺，但可以用 d3.scaleLinear() 分别处理半径和角度，再组合成路径。网上很多教程教你怎么手写 radialLine 生成器，其实没必要——d3 社区已有成熟方案。
- 推荐直接用
d3-polar（轻量独立库），它提供polarLine()和polarArea()，输入 [r, θ] 数组即可 - 如果坚持纯
d3，别自己写三角函数转换，用d3.geoIdentity().reflectY(true)配合scale模拟极坐标投影更稳 - 注意 SVG 的
transform="rotate()"是绕左上角转的，要配合transform="translate(cx,cy)"移动中心 - 动态更新时，
enter()/update()的 key 要基于角度索引，别用原始数据值当 key，否则重排会错乱
别碰 CSS + transform 伪极坐标图
有人试图用 position: absolute + transform: rotate() translate() 把每个标签“摆”到极坐标位置。这方法在数据少、静态、无动画时看似能跑，但实际问题密集：
- 文字旋转后无法自动对齐径向，
text-anchor和dominant-baseline组合极其难调 - 响应式缩放时，
translate距离不会随容器同比例变，图形立刻变形 - 点击区域和 tooltip 定位完全失准，因为 DOM 元素物理位置和视觉位置不一致
- IE 和旧版 Safari 对嵌套
transform支持差，will-change优化也救不了
这种写法看着像极坐标，实则是视觉欺骗，真要上线请直接放弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
