QLChart

QuantLife 多功能图表库 — 基于 lightweight-charts + lightweight-charts-drawing 的 React 图表组件库。

特性

• 📊 10种K线类型 — 蜡烛图、空心蜡烛图、美国线、折线图、面积图、基准线、平均K线、成交量蜡烛图、砖形图、线形反转
• 🎨 23种绘图工具 — 趋势线、矩形、斐波那契回撤/扩展/圆形/时区、平行通道、画笔、测量器、旋转矩形等
• 📐 图表形态工具 — ABCD、XABCD、头肩顶、三角形、赛福形态
• 🔗 多面板布局 — 支持 1/2/4 分屏，面板间光标联动
• 📏 时间轴延伸 — 未来区域可绘制、可拖拽
• 🎯 磁铁吸附 — 绘图锚点自动对齐K线
• 💾 绘图持久化 — 绘图数据自动保存/恢复
• 📱 响应式设计 — 适配各种屏幕

安装

pnpm add @quantlife/qlchart

快速开始

import { QLChartProvider, QLChartPanel } from '@quantlife/qlchart';
import '@quantlife/qlchart/dist/style.css';

function App() {
  return (
    <QLChartProvider fetchFn={async (params) => {
      const res = await fetch(`/api/kline?pair=${params.pairId}&period=${params.period}`);
      return res.json();
    }}>
      <QLChartPanel pairId="BTCUSDT" product="BTC" period="1h" />
    </QLChartProvider>
  );
}

多面板布局

import { QLChartLayout } from '@quantlife/qlchart';

<QLChartLayout mode="4" crosshairSync />

Standalone 引入

<script src="https://cdn.example.com/qlchart.standalone.js"></script>
<link rel="stylesheet" href="https://cdn.example.com/style.css">
<div id="chart"></div>
<script>
  const { QLChartProvider, QLChartPanel } = QLChart;
  // ...
</script>

API 文档

详细 API 文档请参阅 docs/api.md。

技术栈

• React 18+
• TypeScript 5+
• lightweight-charts 5+
• lightweight-charts-drawing
• Zustand（状态管理）
• Vite（构建工具）

License

Private © QuantLife