本文介绍一种基于 CSS 变量与极坐标转换的高效方案，通过 transform: rotate() 和径向偏移计算，将动态数据项按指定层级（距离中心点）和角度（等分圆周）精确、响应式地分布在同心圆上，避免 Chart.js 等库因数据增删导致布局重排的问题。
本文介绍一种基于 css 变量与极坐标转换的高效方案，通过 `transform: rotate()` 和径向偏移计算，将动态数据项按指定层级（距离中心点）和角度（等分圆周）精确、响应式地分布在同心圆上，避免 chart.js 等库因数据增删导致布局重排的问题。
在构建自定义雷达图（如技能雷达、能力评估图）时，核心挑战在于：如何脱离图表库约束，对任意数量的数据项进行多层、等角、等距的绝对定位？ 传统方案（如 Chart.js 的 Radar 图）虽开箱即用，但其数据驱动的坐标系会导致新增/删除条目时所有节点角度重算，破坏视觉稳定性；而纯 CSS 嵌套圆容器又难以动态绑定 JSON 数据到具体位置。
✅ 推荐方案：“旋转臂 + 径向偏移”模型
该方法不依赖嵌套 DOM 层级，而是为每个数据项创建一个“旋转臂”（.datum 元素），其高度等于最大半径（--r），通过 transform: rotate() 控制方位角，再利用 background-position 或 top/left 沿臂方向精确定位元素在该层的径向距离。关键优势：
- 角度计算完全解耦：
--n（索引）与--num（总数）决定旋转角度：rotate(calc(360deg * var(--n) / var(--num))) - 层级距离可编程：例如
tier A = 20px,tier B = 120px，直接映射为background-position: center calc(var(--r) - var(--distance)) - 标签自动水平：子元素
.blob反向旋转rotate(calc(-360deg * var(--n) / var(--num)))，确保文字始终正向显示
以下是 React 中的实现示例（兼容服务端渲染）：
'use client';
import React, { useEffect } from 'react';
import styles from './RadarComponent.module.css';
interface RadarItem {
label: string;
value: number; // 0–100 范围，用于计算径向位置
tier: number; // 层级索引（0=最内层，3=最外层）
}
const RADII = [20, 120, 220, 320]; // 各层级距中心距离（px）
export default function RadarComponent({ items }: { items: RadarItem[] }) {
useEffect(() => {
const chart = document.querySelector(`.${styles.chart}`);
if (!chart || items.length === 0) return;
// 清空旧节点
chart.innerHTML = '';
items.forEach((item, index) => {
const datum = document.createElement('div');
datum.className = styles.datum;
datum.style.setProperty('--n', String(index));
datum.style.setProperty('--num', String(items.length));
datum.style.setProperty('--distance', String(RADII[item.tier]));
datum.style.setProperty('--value', String(item.value));
const blob = document.createElement('div');
blob.className = styles.blob;
blob.textContent = item.label;
datum.appendChild(blob);
chart.appendChild(datum);
});
}, [items]);
return (
<div className={styles.chart} />
);
}配套 CSS（RadarComponent.module.css）：
.chart {
--r: 40vmin;
width: calc(2 * var(--r));
aspect-ratio: 1;
border-radius: 50%;
background-image: radial-gradient(
#ff9900 0 17.5%,
#f2ff00 17.5% 35%,
#80ff00 35% 52.5%,
#00ff00 52.5% 70%,
transparent 70% 100%
);
position: relative;
}
.datum {
position: absolute;
bottom: 50%;
left: 50%;
width: 12px;
height: var(--r);
transform: translateX(-50%) rotate(calc(360deg * var(--n) / var(--num)));
transform-origin: center bottom;
}
/* 使用 background-position 实现径向定位（更轻量） */
.datum::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #415364;
/* 计算：从底部向上偏移 (r - distance) */
top: calc(var(--r) - var(--distance));
}
.blob {
transform: rotate(calc(-360deg * var(--n) / var(--num)));
display: inline-block;
position: absolute;
top: -2em;
left: 50%;
transform: translateX(-50%) rotate(calc(-360deg * var(--n) / var(--num)));
font-size: 0.8rem;
font-weight: 600;
color: #333;
white-space: nowrap;
}⚠️ 注意事项：
-
响应式安全：使用
vmin单位保证在不同屏幕下比例一致；避免固定px宽高导致缩放失真。 -
层级控制：
tier字段需由业务逻辑预计算（如value > 80 ? 3 : value > 60 ? 2 : 1），确保同一层级元素共享--distance。 -
性能优化：大量节点时，改用
CSS @property定义动画变量，或使用requestAnimationFrame批量更新。 -
无障碍补充：为
.blob添加aria-label，描述“{label}，层级 {tier}，数值 {value}”。
此方案将数学逻辑（极坐标 → 直角坐标）下沉至 CSS，React 仅负责数据映射与 DOM 注入，兼具高性能、强可控性与设计自由度——真正实现“数据即位置，结构即表达”。
