为交易应用打造的图表引擎。

从蜡烛图到 Renko，95 个指标、69 种画线工具、交易所实时行情，还能直接在图表上下单。基于 Canvas2D 绘制，零依赖。可以直接放入完整的 ChartWidget，也可以在无界面的 Chart 之上构建自己的界面。

开始使用浏览示例

Vanilla TSReactVueSvelte

连接中 · BINANCE · BTCUSDT · 5m 拖动 平移滚轮 缩放拖动坐标轴 拉伸

17: 图表类型
85: 指标
40: 画线工具
0: 运行时依赖
≈100kB: gzip 后的无界面核心
<0.3ms: 10 万根K线时的悬停帧

功能实验室

每项功能，都在实时图表上。

选择一个场景。每个场景都会把完整的 ChartWidget 启动到展示某一方面功能的状态——之后就交给你随意拖动、画线和切换。

斐波那契与江恩工具可自定义级别，另有艾略特波浪、谐波形态、笔记和画笔。双击画线打开设置，右击打开菜单；提醒会跟随趋势线，多/空仓位工具会算出仓位大小。

斐波那契与江恩工具可自定义级别，另有艾略特波浪、谐波形态、笔记和画笔。双击画线打开设置，右击打开菜单；提醒会跟随趋势线，多/空仓位工具会算出仓位大小。

滚动到此处即可启动实时图表

切换品种或周期即可计时

试一试

双击斐波那契回撤，编辑它的级别
右击一条画线：上移一层、分组或添加提醒
选择画笔或路径工具；按 Enter 结束一条路径

chart.addDrawing({
  type: 'riskReward',               // Long/Short Position
  anchors: [entry, stop],           // { time, price } each
  options: { accountSize: 10_000, risk: 1, rewardRatio: 2 },
})
chart.addDrawingAlert(trendLine, { condition: 'crossing' })
chart.groupDrawings([fib, note], 'Swing')

图表类型

所有图表类型，就在页面里实时运行

每个图块都是一个真实的 Chart 实例，而不是图片。拖动平移，滚轮缩放，悬停显示十字光标；每个图块都能独立响应。

蜡烛图 OHLC

平均K线趋势

面积图收盘价

基准线高于 / 低于

美国线经典

阶梯线离散

引擎内部

有实测，有文档，任你扩展

功能实验室背后的引擎。下面每个数字都可以用 pnpm bench 复现。

帧预算

0.001ms: 10 万根K线、4 个指标下的一次实时 tick
27ms: 切换品种后的完整重算，10 万根K线
0.32ms: LTTB 降采样，10 万 → 1,600 个点
<0.3ms: 悬停帧，从 500 到 10 万根K线始终持平

两层叠放的画布：悬停时只重绘较薄的顶层画布。每个渲染器只遍历屏幕上的K线。

手势

拖动: 平移，可越过最后一根K线
滚轮: 以指针为中心缩放
捏合: 在触摸屏上缩放
向右拖动: 边拖动边加载更早的K线
拖动坐标轴: 拉伸该坐标轴
Ctrl + 拖动: 框选画线
Shift + 拖动: 测量
Alt + 点击: 固定提示

组件一次调用，完整交易界面: ChartWidget 自带工具栏、画线侧边栏、自选列表、价格提醒、对象列表、数据窗口、K线回放和命令面板（Ctrl+K），支持 16 种语言，从英语、越南语到中文、日语、韩语和阿拉伯语。
数据接入任意行情源: 内置 Binance、Coinbase、Bybit 和 Kraken 适配器；其他数据源可使用 WebSocketAdapter 和 PollingAdapter。回看历史时自动加载更早的K线；断线后自动重连，并丢弃已被后续切换取代的品种切换。
交易在图表上下单: ExecutionAdapter 搭配模拟经纪商，支持拖动创建订单、括号单、可拖动的止损和止盈线，以及推送到 webhook 和桌面通知的提醒。
框架React、Vue 和 Svelte: @tradecanvas/react、/vue 和 /svelte 以响应式、带类型的 props 封装同一个引擎。完整的 Chart 实例只需一个 ref 即可拿到。
插件每一层都可扩展: 注册支持增量 update() 的自定义指标、画线工具、图表类型和叠加层，可全局注册，也可按图表注册。
分析回测就在图表旁: 逐K线运行的 Backtester，带蒙特卡洛区间带；Web Worker 指标计算管线让主线程保持空闲。

金融图表

不止蜡烛图

迷你走势图、权益曲线、订单簿深度、板块热力图、瀑布图和仪表图，适用于投资组合与 KPI。

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

投资组合表现

订单簿深度

加密市场热力图

盈亏归因

恐惧与贪婪指数

快速开始

同一个图表，五种接入方式

完整组件、框架组件或无界面引擎，它们共用同一个渲染器。

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  adapter: new BinanceAdapter(),
  locale: 'en',            // 14 languages: 'vi', 'ja', 'zh'…
  trading: true,
})

今天就把实时图表放进你的应用。

阅读文档在 GitHub 上 Star