Liveline

適用於 React 的即時動態圖表。支援折線圖、多序列圖與蠟燭圖模式，以 Canvas 渲染，60fps，零 CSS 匯入。

安裝

pnpm add liveline

同儕依賴： react >=18。

快速開始

import { Liveline } from 'liveline'
import type { LivelinePoint } from 'liveline'

function Chart() {
  const [data, setData] = useState<LivelinePoint[]>([])
  const [value, setValue] = useState(0)

  // Feed data from WebSocket, polling, etc.
  // Each point: { time: unixSeconds, value: number }

  return (
    <div style={{ height: 300 }}>
      <Liveline data={data} value={value} color="#3b82f6" theme="dark" />
    </div>
  )
}

此元件會填滿其父容器。請在父容器設定高度。傳入 data 作為不斷增長的點陣列，以及 value 作為最新數值——Liveline 會處理更新之間平滑的差值補間。