摘要多線圖｜免費 React 元件

多條折線搭配右側即時摘要欄的 React 圖表元件：線條以描邊動畫畫出，游標移動時摘要欄的數值與變化率逐位滾動到該時點；可點擊摘要列隱藏單條線、Y 軸重算補間。

把幾條同時間軸的指標畫在一起，右側摘要欄同步列出每條線在「目前時間點」的數值與相對前一點的變化率。進場時各線依序以描邊動畫畫出，描完後摘要欄數字從 0 逐位滾動到最後一點的值；游標在圖區移動時，十字線與各線圓點以彈簧跟隨，摘要欄所有數字一起滾到該時點，離開圖區回到預設時間點。摘要列同時是圖例，點一下即可隱藏或顯示該線，Y 軸刻度會依剩下的線重算並補間。純 SVG 自繪，不依賴任何圖表函式庫。

把這個效果裝進你的專案

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

npx webberui@latest add summary-line-chart

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

Playground

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

線條形狀curve

面積淡填showArea

圖區高度（px）height

260

描繪時長（ms）duration

1200

import * as React from "react";

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

編輯中的呼叫預設屬性

<SummaryLineChart/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/summary-line-chart.json

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

使用

import { SummaryLineChart } from "@/components/ui/summary-line-chart";

<SummaryLineChart
  labels={["第 1 週", "第 2 週", "第 3 週", "第 4 週"]}
  series={[
    { key: "signups", label: "註冊數", values: [820, 910, 880, 1040] },
    { key: "paid", label: "付費數", values: [62, 70, 74, 81] },
  ]}
  curve="smooth"
  showArea
  formatValue={(v) => `${v.toLocaleString("zh-TW")} 人`}
/>

Props

Prop	型別	預設值	說明
`labels`	`string[]`	—	X 軸標籤，每個時間點一個
`series`	`SummaryLineSeries[]`	—	要繪製的折線，建議 1–4 條
`curve`	`"linear" \| "smooth"`	`"smooth"`	線條形狀：直線連接，或單調三次曲線（不會過衝出資料範圍）
`showArea`	`boolean`	`false`	在線條下方加一層淡淡的面積填色
`activeIndex`	`number`	—	受控的目前時間點索引；未提供時由元件內部管理
`defaultActiveIndex`	`number`	最後一點	非受控的初始時間點，也是游標離開圖區時回到的位置
`onActiveIndexChange`	`(index: number) => void`	—	目前時間點變動時回呼
`formatValue`	`(value: number, series: SummaryLineSeries) => string`	`Intl.NumberFormat("zh-TW")`	自訂摘要欄與表格的數值格式（幣別、單位）
`height`	`number`	`260`	圖區高度（px）
`ariaLabel`	`string`	自動產生	圖表的無障礙名稱
`className`	`string`	—	透傳到最外層容器

SummaryLineSeries

欄位	型別	預設值	說明
`key`	`string`	—	唯一識別鍵
`label`	`string`	—	顯示名稱
`values`	`number[]`	—	各時間點的數值，長度應與 `labels` 相同；缺值沿用最後一筆
`color`	`string`	`--wb-summary-line-chart-1…4`	線條顏色（任何 CSS 色彩值）

CSS 變數

變數	預設值	說明
`--wb-summary-line-chart-duration`	`1200ms`	每條線的描繪時長（線間固定錯開 150ms）
`--wb-summary-line-chart-accent`	`#0d9488`	強調色：第一條線與正變化率徽章
`--wb-summary-line-chart-accent-dark`	`#2dd4bf`	深色模式的強調色
`--wb-summary-line-chart-1` … `-4`	強調色、`#737373`、`#f59e0b`、`#e11d48`	各線預設色，只有第一條用強調色

細節

平滑曲線用 Fritsch–Carlson 單調三次插值：相鄰兩點持平時不會鼓起或下凹，曲線永遠落在資料範圍內。
數字逐位滾動：每一位數字是一欄 0–9，用彈簧（stiffness 300、damping 30）滾到目標；以「距離右端的位置」對齊，位數增減時個位、十位不會錯位。逗號、正負號與自訂單位直接顯示。
變化率是相對前一個時間點計算；第一點或前值為 0 時顯示「—」。正值用強調色搭配上升圖示，負值用 rose 搭配下降圖示。
隱藏某條線時線條淡出 200ms，Y 軸只依仍顯示的線重算「好看」的刻度（1、2、2.5、5、10 的倍數），格線與所有路徑補間到新位置。
寬度以 ResizeObserver 量測；SSR 與量測前使用 560px 後備寬度。容器寬度足夠時摘要欄在右側，窄時改為上下排列（container query）。
進場在圖表捲入視窗時觸發一次（useInView）。

可及性

SVG 帶 role="img" 與自動產生的摘要 aria-label，另附一份 sr-only 的 <table>（標題列為時間點、每列一條線的所有數值）
圖區可用 Tab 聚焦，←／→ 切換時間點，Home／End 跳到頭尾；聚焦時顯示 focus-visible 外框
摘要欄內的 aria-live="polite" 區域只在鍵盤切換時間點時宣告該點的數值與變化率；游標移動不宣告，避免干擾螢幕閱讀器
摘要列是帶 aria-pressed 的按鈕，aria-label 含名稱、目前值、變化率與隱藏／顯示說明；逐位滾動的數字對輔助科技隱藏
使用者系統開啟「減少動態效果」時，線條與面積直接顯示終態、數字直接切換不滾動、十字線與圓點不再彈簧跟隨；提示與鍵盤操作仍可用

摘要多線圖

把這個效果裝進你的專案

本頁目錄