名次變化圖

SVG bump chart：X 軸為期別、Y 軸為名次，每個項目以一條平滑曲線串起各期名次，進場時依序描邊生長；hover 或點擊某項目會加粗高亮該線並讓其餘變淡，同時在每期節點浮出名次徽章，適合呈現排行榜隨時間的消長敘事。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

圖表高度height

340

線條粗細strokeWidth

描邊時長（秒）duration

0.9

進場間隔（秒）stagger

0.18

<BumpRankChart />

安裝

npx shadcn@latest add https://webberui.com/r/bump-rank-chart.json

或在 components.json 設定 registries 後，改用 @webberui/bump-rank-chart 安裝。

安裝依賴後，從 registry JSON（/r/bump-rank-chart.json 的 files[0].content）複製 bump-rank-chart.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

import { BumpRankChart } from "@/components/ui/bump-rank-chart";

<BumpRankChart
  periods={["Q1", "Q2", "Q3", "Q4"]}
  entries={[
    { label: "五十嵐", ranks: [1, 2, 2, 1], hue: 152 },
    { label: "可不可", ranks: [3, 1, 1, 2], hue: 25 },
    { label: "迷客夏", ranks: [2, 3, 4, 3], hue: 210 },
  ]}
/>

Props

Prop	型別	預設值	說明
`entries`	`BumpRankEntry[]`	—	項目清單，每項為 `{ label, ranks, hue }`：名稱、各期名次（1 為第一名）、HSL 色相
`periods`	`string[]`	自動產生	X 軸期別標籤，未提供時顯示「第 N 期」
`height`	`number`	`340`	SVG viewBox 高度，控制圖表縱向比例
`strokeWidth`	`number`	`3`	線條粗細（px），高亮時自動加粗
`duration`	`number`	`0.9`	單條線描邊生長的時長（秒）
`stagger`	`number`	`0.18`	每條線依序進場的間隔（秒）
`className`	`string`	—	透傳到外層容器

可及性

每條線覆蓋一條隱形加寬命中區（role="button"、可 Tab 聚焦），聚焦即高亮該項目路徑，Enter 或空白鍵可固定/取消固定
命中區的 aria-label 完整朗讀項目名稱與各期名次，aria-pressed 反映固定狀態
使用者系統開啟「減少動態效果」時，跳過描邊生長與節點浮現動畫，直接顯示完整曲線
SVG 帶 role="group" 與整體描述（項目數與期數），互動命中區保留在可及性樹中；名次數字使用 tabular-nums 對齊

Playground

安裝

使用

Props

可及性

On this page