雷達技能圖
多維度雷達圖：進場繪製動畫、hover 頂點數值、雙資料疊比。
以純 SVG 繪製的多維度雷達圖：進場時資料多邊形自中心展開、外框沿邊描繪生長，滑鼠移到頂點會浮出該維度的數值 tooltip，並支援第二組資料半透明疊加對比，適合技能評估、產品比較等敘事場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
300
100
4
<RadarSkillChart />
安裝
npx shadcn@latest add https://webberui.com/r/radar-skill-chart.json或在 components.json 設定 registries 後，改用 @webberui/radar-skill-chart 安裝。
安裝依賴後，從 registry JSON（/r/radar-skill-chart.json 的 files[0].content）複製 radar-skill-chart.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { RadarSkillChart } from "@/components/ui/radar-skill-chart";
<RadarSkillChart
axes={[
{ label: "React", value: 92 },
{ label: "TypeScript", value: 85 },
{ label: "測試", value: 62 },
{ label: "溝通協作", value: 88 },
]}
series2={[60, 48, 30, 72]}
seriesLabel="今年"
series2Label="去年"
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
axes | RadarAxisDatum[] | — | 各軸資料 { label, value }，至少 3 軸，主系列數值內嵌其中 |
series2 | number[] | — | 第二組數值（半透明疊加對比），順序需與 axes 對齊 |
seriesLabel | string | "系列 A" | 主系列名稱，雙系列時用於圖例與 tooltip |
series2Label | string | "系列 B" | 第二系列名稱 |
max | number | 100 | 數值上限，對應最外圈 |
size | number | 320 | 渲染尺寸（px，寬 = 高） |
rings | number | 4 | 同心網格圈數 |
color | string | "#6366f1" | 主系列顏色（任何合法 CSS 色值） |
color2 | string | "#f59e0b" | 第二系列顏色 |
className | string | — | 透傳到最外層容器 |
可及性
- SVG 具描述性
aria-label，完整朗讀每個維度的標籤與各系列數值 - 每個頂點熱區可鍵盤聚焦（Tab 依序移動），聚焦時同樣顯示 tooltip，並各自帶有朗讀數值的
aria-label - 使用者系統開啟「減少動態效果」時，跳過展開與描邊動畫，直接呈現完成圖形
- hover 對應的軸線與標籤會同步加深，提供額外的視覺對位線索