動畫圖表 Animated Charts｜免費 React 元件

資料驅動的生長進場圖表（SVG）：長條由基線向上生長、折線與面積以描邊繪製動畫，進入視口時觸發。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add animated-charts

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

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

圖表款式variant

描邊時長（秒）duration

1.2

線條寬度（px）strokeWidth

顯示數值showValues

顯示格線showGrid

圖表顏色color

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<AnimatedChart/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/animated-charts.json

或在 components.json 設定 registries 後，改用 @webberui/animated-charts 安裝。

使用

import { AnimatedChart } from "@/components/ui/animated-charts";

const data = [
  { label: "一月", value: 320 },
  { label: "二月", value: 480 },
  { label: "三月", value: 410 },
  { label: "四月", value: 640 },
];

<AnimatedChart data={data} variant="line" />

同一份資料切換 variant 即可得到折線、長條或面積三款：

<AnimatedChart data={data} variant="bar" />
<AnimatedChart data={data} variant="area" />

自訂顏色（任意 CSS color；預設隨文字色，深淺色自動適應）：

<AnimatedChart data={data} variant="area" color="#6366f1" showValues />

比較類款式

除了趨勢圖，variant 也提供三種比較類款式，改為水平排列、適合呈現佔比與達成率：

composition-strip：100% 堆疊帶，各段寬度＝該筆佔總和的比例，下方圖例列出百分比
ratio-bars：每筆一條軌道，填色＝數值 ÷ 目標（未給目標時以最大值為分母，上限 100%）
target-overrun：數值到目標的部分用 color，超出目標的那一截以 overrunColor 延伸，並畫出目標刻度

const channels = [
  { label: "官網", value: 128, target: 120 },
  { label: "門市", value: 86, target: 100 },
  { label: "團購", value: 32, target: 25 },
];

<AnimatedChart data={channels} variant="composition-strip" height={112} />
<AnimatedChart data={channels} variant="ratio-bars" />
<AnimatedChart data={channels} variant="target-overrun" overrunColor="#f43f5e" />

目標值可以逐筆寫在資料點的 target，或用 target prop 給全部共用（資料點自帶的優先）。composition-strip 預設以 color 搭配遞減不透明度區分各段，需要分色時傳 colors 陣列。

圖表寬度自動填滿容器（內部以 ResizeObserver 量測），高度由 height 控制。

Props

AnimatedChart

Prop	型別	預設值	說明
`data`	`ChartDataPoint[]`	—	圖表資料，依序沿 X 軸排列
`variant`	`"line" \| "bar" \| "area" \| "composition-strip" \| "ratio-bars" \| "target-overrun"`	`"line"`	圖表款式（後三者為比較類）
`height`	`number`	`240`	SVG 高度（px，含底部標籤區）
`color`	`string`	`currentColor`	線條／長條顏色（任意 CSS color）
`duration`	`number`	`1.2`	折線／面積描邊生長時長（秒）
`stagger`	`number`	`0.08`	長條與資料點的 stagger 間隔（秒）
`delay`	`number`	`0`	進場前延遲（秒）
`showGrid`	`boolean`	`true`	是否顯示水平格線
`showLabels`	`boolean`	`true`	是否顯示 X 軸標籤
`showDots`	`boolean`	`true`	折線／面積是否顯示資料點圓點
`showValues`	`boolean`	`false`	是否在資料點／長條上顯示數值
`strokeWidth`	`number`	`2`	線條描邊寬度（px）
`once`	`boolean`	`true`	只在第一次進入視口時播放
`target`	`number`	—	共用目標值：`ratio-bars` 的分母與 `target-overrun` 的目標線（資料點自帶 `target` 時以資料點為準）
`overrunColor`	`string`	`"#f43f5e"`	`target-overrun` 超出目標部分的強調色
`colors`	`string[]`	—	`composition-strip` 各段顏色（依序套用；未給時以 `color` 搭配遞減不透明度）
`className`	`string`	—	附加到最外層容器的 class

ChartDataPoint

欄位	型別	說明
`label`	`string`	X 軸標籤（例如月份、類別名稱）
`value`	`number`	數值，長條由基線生長、折線／面積依此定位
`target`	`number`	選填，此筆的目標值（`ratio-bars`／`target-overrun` 使用）

細節

生長進場：長條以 scaleY 由基線（值 0 的位置）向上生長，transform-box: fill-box 搭配 transform-origin 讓正值由底部、負值由頂部展開；折線與面積以 Motion 的 pathLength 由 0 描繪到 1，面積填色同步淡入
視口觸發：以 useInView 偵測進入視口才播放，once 控制是否只播一次
響應式：內部以 ResizeObserver 量測容器寬度，SVG 以像素座標繪製（非縮放 viewBox），描邊與圓點在任何寬度下都不變形；解除掛載時 disconnect 清理 Observer
值域：值域一律包含 0 作為長條基線，支援負值；全部同值時自動退回安全比例避免除以零
顏色：預設用 currentColor，跟隨容器文字色，因此中性色與深淺色模式自動適應；可用 color 傳入任意 CSS color 作為強調色。格線與標籤固定為低調中性色，不隨系列色改變
stagger：長條與資料點以容器層級的 staggerChildren 逐一進場
比較類款式：以 scaleX 由左側展開，各段依 stagger 錯開；target-overrun 的超出段在基礎段長完後才延伸，讓「超過目標」的那一截最後出現。比較類不畫 X 軸標籤與水平格線（target-overrun 改畫垂直格線），負值一律視為 0

可及性

SVG 標記 role="img" 並帶 aria-label（各資料點「標籤: 數值」摘要；比較類另附佔比或「數值 / 目標（百分比）」），另提供 sr-only 文字摘要供輔助科技朗讀
格線、長條、路徑、圓點、數值標籤、比較類色段與圖例皆為裝飾性元素，標記 aria-hidden
使用者系統開啟「減少動態效果」時，圖表直接顯示終態（長條滿高、路徑完整、圓點就位、比較類色段完整展開），不播生長動畫，DOM 結構與 SSR 一致

Animated Charts

把這個效果裝進你的專案

本頁目錄