Chart.js v4 是画动态雷达图最稳方案，需手动注册RadarController等模块，严格校验label与data长度一致，并用hitRadius优化移动端点击体验。
用 Chart.js 画动态雷达图最稳，别碰原生 SVG 手写
纯 HTML 没法直接画雷达图，必须靠 JS 图表库。Chart.js 是当前兼容性最好、API 最直白的选择，尤其对动态更新支持成熟。自己用 <svg> + Math.sin()/Math.cos() 算坐标不仅费时，而且动画卡顿、响应式难适配、IE/旧 Safari 基本不兼容。
常见错误现象：TypeError: chart.update is not a function（用了旧版 Chart.js v2 写法但装了 v4）、radar is not a registered controller（v4 默认不内置 radar 类型，需手动注册）。
- 用 Chart.js v4，必须显式导入并注册
RadarController、RadialLinearScale、PointElement、LineElement - 数据更新不能直接改
chart.data.datasets[0].data后调chart.update()—— 这样动画会断，得用chart.data.datasets[0].data = newArray+chart.update('active') - 若要每秒刷新，避免用
setInterval(() => chart.update(), 1000)，应改用chart.data.datasets[0].data = generateNewData()+chart.update('active')，否则动画队列堆积导致卡死
动态更新时 label 和 data 长度必须严格一致
雷达图的每个顶点对应一个 label 和一个 data 值。如果后端返回的字段数变了（比如从 5 项变成 6 项），而你没同步更新 chart.data.labels，图表会渲染错位或报 Uncaught Error: labels and datasets.length mismatch。
使用场景：监控系统中指标增减（如新增 CPU 温度传感器）、A/B 测试维度动态扩展。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 每次更新前先校验：
if (newLabels.length !== newData.length) throw new Error('label/data length mismatch') - 不要复用旧
labels数组；哪怕内容相同，也要重新赋值：chart.data.labels = [...newLabels]，否则 Chart.js v4 可能跳过重绘 - 若 label 名称固定但部分值暂无数据，用
null占位，别删掉整个项 —— 否则顶点顺序乱，角度偏移
动画卡顿？关掉 gridLines 或降帧率
雷达图默认开启网格线 + 动画，数据点多（>7 个）或频繁更新（>10fps）时，gridLines 绘制开销大，尤其在低端安卓 WebView 或 Electron 中明显掉帧。
性能影响：开启 gridLines.display: true 且 pointLabels.display: true 时，CPU 渲染耗时可能翻倍。
- 轻量动效方案：设
options.animation.duration: 300，并关闭gridLines.color（设为空字符串）或干脆gridLines.display: false - 真需要网格又想流畅？用
options.plugins.tooltip.enabled: false+options.interaction.mode: 'nearest'减少 hover 计算 - 别在
animation.onProgress里做 DOM 操作或发请求 —— 这是常见卡顿源
移动端点击区域小？扩大 pointRadius 和 hitRadius
雷达图默认 pointRadius: 3，手指点中率极低，尤其在 iOS Safari 上常误判为滑动。这不是 bug，是 Canvas 像素级命中检测的天然限制。
解决点很具体：不是调大 canvas 尺寸，而是调高交互半径。
- 把
pointRadius设为0（隐藏点），再设hitRadius: 12—— 点击检测范围变大，视觉不受影响 - 若要用 tooltip，确保
options.plugins.tooltip.callbacks.label()返回字符串，别返回对象，否则 iOS 下 tooltip 不触发 - 在
options.scales.r.ticks.display为false时，hitRadius仍生效，放心关文字提性能
hitRadius 这种不起眼的配置上。 
