最省事直接用Chart.js，因其原生支持radar类型、数据结构清晰、响应式默认开启且IE11可兼容（v2.9.4），避免纯CSS手写角度与裁剪的坑。
雷达图用什么 HTML + JS 库最省事
直接用 Chart.js，不是“最好”，而是“最不踩坑”。它原生支持 radar 类型，数据结构清晰，响应式默认开启，连 IE11 都能 fallback（需配 chart.js@2.9.4）。别碰纯 CSS 实现——角度计算、多边形裁剪、动态缩放全得手写，一个 transform: rotate() 错位就导致标签错行。
常见错误现象：Chart.js 渲染空白？大概率是容器没设固定宽高，或 canvas 被父级 display: none 挡住（比如在 Tab 切换页里）。解决方法：确保容器有 width 和 height，或调用 myChart.resize() 手动重绘。
- 使用场景：后台管理系统的 KPI 多维评分、面试官能力矩阵、产品功能成熟度评估
- 性能影响：5 个维度、10 条数据线时，帧率仍稳定在 60fps；超 20 维建议改用平行坐标系
- 兼容性注意：
Chart.js v3+移除了 IE 支持，若需兼容老系统，锁定^2.9.4版本
Chart.js 雷达图数据格式怎么填才不乱
核心是两个数组对齐：labels（维度名）和 data（每个维度的值），顺序必须严格一致。比如“沟通能力”在 labels[0]，那它的分值就得在 data[0]，错一位整个图形就拧着长。
容易踩的坑：data 里混入 null 或 undefined 会导致该轴塌陷成点；字符串数字如 "85" 不会自动转类型，得用 Number() 显式转换，否则渲染为 0。
const config = {
type: 'radar',
data: {
labels: ['沟通', '技术', '协作', '学习', '抗压'],
datasets: [{
label: '候选人A',
data: [85, 92, 78, 88, 81], // ← 必须是 number[]
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)'
}]
}
};
怎么让雷达图显示真实分数范围而不是 0–100
雷达图默认把最大值当 100%，最小值当 0%，但实际业务中，“学习能力”可能满分是 5 分，“项目经验”却是 100 分。硬塞进同一张图会严重失真。
解决方案：统一归一化。用公式 (value - min) / (max - min) * 100 把各维度映射到 0–100 区间，再传给 data。关键点在于——min 和 max 必须是该维度所有被评对象的全局极值，不能单条数据自算。
- 举例：“代码质量”维度，所有人得分是 [6, 7, 9, 8]，则 min=6，max=9；某人得 7 → 归一化后为
(7-6)/(9-6)*100 ≈ 33 - 千万别用
scale.ticks.max: 100强制拉伸——这只会让图形膨胀，不解决量纲差异 - 如果必须保留原始数值标签，用
scale.pointLabels.callback自定义显示文本，但底层数据仍需归一化
移动端雷达图点击区域太小怎么优化
默认 pointRadius: 3 在手机上几乎点不中。直接调大半径会遮挡线条，正确做法是启用 hitRadius：它只扩大点击检测范围，不影响视觉。
实操建议：hitRadius 设为 12，配合 pointHoverRadius: 8，悬停时点变大，点击更稳。同时关掉 animation.animateRotate，避免 iOS 上触发多次 touchstart。
options: {
elements: {
point: {
hitRadius: 12,
hoverRadius: 8,
radius: 3
}
},
animation: { animateRotate: false }
}
复杂点在于：如果雷达图嵌在滚动容器里，iOS Safari 的 touchmove 会抢事件。这时得加 css touch-action: manipulation 到 canvas 父容器，否则滑动时点不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
