Liveline

用于React的实时动画图表。支持折线图、多系列图和蜡烛图模式，基于Canvas渲染，60帧/秒，无需导入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)

  // 从 WebSocket、轮询等渠道获取数据
  // 每个数据点：{ time: unixSeconds, value: number }

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

组件会填满其父容器。请为父容器设置高度。传入data作为不断增长的数据点数组，并将value设为最新数值——Liveline会在更新之间自动进行平滑插值。