系统审计

它能做什么，做得有多快。

本页的所有内容都包含在 @tradecanvas/chart 1.30.0 中。帧耗时是在一台集成显卡（Intel UHD）笔记本上的 Chrome 中测得的；在仓库中运行 node scripts/bench-render.mjs，即可在你的机器上运行相同的场景。

架构: 如何在一台普通笔记本上保持流畅。 →

18
图表类型: 134
内置指标: 69
画线工具: 30
组件语言: 101
样式键: 114
组件功能开关: 0
第三方运行时依赖: 3,000+
单元测试

在你的机器上测一测

上面的数字来自我们的笔记本。下面这些会在你的浏览器中、用你将要发布的同一个库运行相同的场景。没有任何预先录制的内容。

1,000,000 根K线：先 Canvas 2D，再 WebGL

一百万根一分钟蜡烛，带布林带、EMA、RSI 和 MACD，完全缩小后平移 150 帧，先用 Canvas 2D 绘制，再用 WebGL 2 绘制。

100,000 根K线上的实时行情

在一张含 100,000 根K线和四个指标的图表上，每一帧到达二十笔行情。每个指标都从最后一根K线更新，而不是重算整个序列。

1,000 个品种的行情报价板

bo-grid 承载 1,000 个品种，每秒更新 50 次。每个变化的单元格都会闪烁，并且只重绘这些单元格。

WebGL 2，以 Canvas 2D 兜底

renderer: 'webgl' 在 GPU 上绘制图表区：蜡烛、成交量、指标线和填充、深度热力图。文本保留在其上方的 Canvas 2D 图层。'auto' 会在支持 WebGL 2 的地方选用 WebGL。
在缺少 WebGL 2 或其上下文丢失的地方，同一张图表会改用 Canvas 2D 继续运行。你的代码无需任何改动。
一个页面上同时最多 8 张图表用 WebGL 绘制（setMaxWebGLCharts）；其余用 Canvas 2D 绘制，并在有上下文空出时切回 WebGL。
两种渲染器下蜡烛都落在相同的设备像素上，因此无论由哪种渲染器绘制，图表看起来都一样。

帧耗时

平移时绘制一帧所需的时间。16.7 ms 即每秒 60 帧。

图表	像素比	Canvas 2D	WebGL
1600×900，500 根蜡烛 + 4 个指标	2×	27.4 ms	19.6 ms
1600×900，缩小显示 200,000 根K线 + 4 个指标	2×	34.5 ms	20.2 ms
1600×900，缩小显示 1,000,000 根K线 + 4 个指标	2×	34.5 ms	16.7 ms
1600×900，深度热力图，240 个快照 × 80 个档位	2×	25.5 ms	16.8 ms
六张图表，每张 500 根蜡烛和 2 个指标	2×	23.5 ms	17.2 ms
2560×1400，2,000 根蜡烛 + 4 个指标	1×	41.6 ms	17.7 ms
2560×1400，2,000 根蜡烛 + 4 个指标	1.5×	70.8 ms	17.6 ms
2560×1400，2,000 根蜡烛 + 4 个指标	2×	114.5 ms	29.1 ms

默认使用 Canvas 2D。renderer: 'webgl'（或 'auto'）用 WebGL 2 绘制图表区，在缺少 WebGL 2 或其上下文丢失时回退到 Canvas 2D。

数据路径

在 100,000 根K线上，带布林带、EMA、RSI 和 MACD 处理一笔实时行情: ~0.001 ms
在 100,000 根K线上完整重算同样的四个指标: ~27 ms
一条含 1,000,000 个可见点的折线，降采样后绘制一帧: ~2.6 ms
一次悬停重绘（十字光标、图例）: ~0.2 ms
切换品种或周期时，加载遮罩出现前的等待时间: 200 ms

下载体积

压缩并 gzip 后的大小，包含其导入的全部内容。

Chart，无界面 API: 176 KB
ChartWidget，完整界面: 315 KB
WebGL 渲染器，首次使用时加载: 18 KB

如何验证

七个包共有 3,000 多个单元测试，每个 pull request 都会在 CI 中运行。
WebGL 渲染器绘制的蜡烛与 Canvas 2D 落在相同的设备像素上；线条和填充只在少数抗锯齿的边缘像素上有差异。
WebGL 渲染器已在 Chromium、Firefox 和 WebKit 中验证。没有 WebGL 2 或其上下文丢失时，图表会改用 Canvas 2D 继续运行。
文档和智能体技能中的代码示例都针对真实 API 做过类型检查。
图表可被屏幕阅读器朗读，也能完全用键盘操作；组件在阿拉伯语、希伯来语和波斯语下从右到左显示。

功能

按领域筛选，或按名称或 API 搜索。

80 / 80

功能	领域	详情与 API
蜡烛图、美国线、折线、面积图、基线图、平均K线（Heikin-Ashi）、空心蜡烛	图表类型	candlestick, bar, line, area, baseline, heikinAshi, hollowCandle
砖形图、新价线、卡吉图、点数图、区间K线	图表类型	砖块大小或 ATR、突破所需的线数、按百分比或价格的反转、每根K线的区间
成交量蜡烛图、等量图、HLC 面积图、阶梯线、带标记的折线、高低线	图表类型	共 18 种图表类型
隐藏主序列	图表类型	只保留指标和画线
用于仪表盘的图表	图表类型	柱状图（分组、堆叠、横向）、环形图和饼图、散点图和气泡图、直方图、日历图、相关矩阵、板块地图、逆时针图、迷你走势图、仪表图、热力图和矩形树图、瀑布图、深度图、权益曲线
Canvas 2D 或 WebGL 2	渲染	renderer: 'canvas' \| 'webgl' \| 'auto'、setRenderer、rendererChange 事件
缩小时每个像素列绘制一段	渲染	每根K线不足一个像素时的指标线、通道和柱状图
流畅平移百万根K线	渲染	带四个指标，像素比为 2
基于 GPU 的深度热力图、成交量分布和市场轮廓	渲染	pushDepthSnapshot(book, time)
同一页面上的多张 WebGL 图表	渲染	最多 8 张（setMaxWebGLCharts）；其余用 Canvas 2D 绘制；上下文恢复后回到 WebGL
任何屏幕缩放下都清晰	渲染	在 100%、125% 和 200% 下，蜡烛、成交量和画线都对齐到设备像素
零第三方运行时依赖	渲染	无需额外安装或审计任何东西
134 个内置指标	指标	六种枢轴点、均线交叉（MA Cross）、与其他品种的相关性
价格来源	指标	open, high, low, hl2, hlc3, ohlc4, hlcc4
指标叠加指标	指标	例如 RSI 的移动平均，每笔行情都会更新
一个窗格中放多个指标，并可在窗格间移动	指标	moveIndicatorToPane
同一指标添加多次	指标	EMA 20 与 EMA 50 并列
水平线与阈值	指标	RSI 30/70、CCI ±100，随布局一起保存
坐标轴上的最新值	指标	显示在价格轴和每个窗格的坐标轴上，使用该线的颜色
窗格可折叠、最大化和重新排序	指标	随布局一起保存
指标模板	指标	参数、样式、水平线和窗格一并保存和应用
每条线的样式和可见性	指标	隐藏的线不会拉伸坐标；setIndicatorDefaults
成交量差（Volume Delta）与 CVD	指标	根据K线估算
导出指标数值	指标	CSV 或 JSON，每条线一列
实时行情下的增量更新	指标	update() 只重算正在形成的K线
69 种画线工具	画线工具	线条、通道、斐波那契、江恩、叉形线、艾略特波浪、形态、周期、投影
每种工具各自的设置	画线工具	样式、属性，以及基于市场价格网格的坐标
多头与空头持仓	画线工具	盈亏比，按百分比或金额风险计算数量
画线上的警报	画线工具	价格穿越所画的趋势线或通道时触发，包括对数坐标
层级、分组与模板	画线工具	上移、下移、分组、锁定、隐藏
注释、标注、箭头、旗标、画笔、路径、曲线	画线工具	手绘与多点绘制
锚定 VWAP 与固定范围成交量分布	画线工具	读取图表上的K线
橡皮擦、缩放框、强磁吸、键盘快捷键	画线工具	Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F
跳转到日期；1D 到全部的时间范围	坐标与时间	缩小没有限制
支持夏令时的 IANA 时区	坐标与时间	或交易所自己的时区
任意周期，以及 Tick K线	坐标与时间	7m、90m、2d 由数据源提供的数据生成；100T 由其成交生成
左右坐标；每个窗格可设对数、反转和百分比	坐标与时间	左侧坐标可用于叠加序列或价格坐标的副本
品种对比、价差与比值	坐标与时间	使用独立的坐标或窗格，按时间对齐
盘前盘后时段	坐标与时间	根据品种的交易时段
价格与时间格式	坐标与时间	priceFormat 可为函数，或 1/32 这样的分数；timeFormatter
按品种的小数位和最小价位显示坐标	坐标与时间	pricePrecision、minTick：以 10 为跳动单位的股票永远不会显示 21,705
最高价与最低价线、买价与卖价	坐标与时间	买价和卖价来自数据源的行情
图表上的事件标记	坐标与时间	signalMarkerHover, signalMarkerClick
现成的数据源，也可以用你自己的	数据与实时	Binance、Bybit、Coinbase、Kraken、mock；WebSocketAdapter、PollingAdapter
向左滚动时加载更早的历史	数据与实时	fetchHistoryBefore
带详情的品种搜索	数据与实时	searchSymbols、resolveSymbol：小数位、最小价位、交易时段、时区
连接后才得知的品种详情	数据与实时	适配器的 symbolInfo 事件
盘口深度价格阶梯	数据与实时	按价格显示买卖挂单量；点击即可交易
自选列表的实时报价	数据与实时	subscribeQuotes, setQuotes, getQuote
新闻与市场状态	数据与实时	fetchNews；距开盘或收盘的倒计时
交易所规则	数据与实时	setMarket：按价格区间的最小价位、每日涨跌停价、手数、交易时段；HOSE、HNX、UPCoM 以及 VN30 期货
图表上的订单和持仓	交易	拖动即可修改；可直接在线上撤单、平仓和反手
成交标记	交易	executionFill 中包含原因和盈亏
下单面板	交易	数量、类型、止损和止盈、有效期，输入时即时校验；遵循交易所的最小价位、涨跌停价和手数
账户面板	交易	带实时盈亏的持仓、挂单、成交
信号与交易区域	交易	markers.、tradeZones. 样式键
回测与风险指标	交易	@tradecanvas/analytics：手续费、滑点、Sharpe、Sortino、Calmar、回撤
不止于价格水平的警报	警报与回放	线与线交叉、N 根K线内变动 N%、K线收盘时触发、可设到期
更细粒度的K线回放	警报与回放	用更小周期的K线回放更大的周期
回放中的模拟交易	警报与回放	订单按回放的价格成交
图表网格中的同步回放	警报与回放	保持同步
面向应用的回放	警报与回放	startTime、hideHistory、duration、随播放显示的标记、replayComplete
同步的组件网格	工作区	最多 6 个，共享品种、周期、十字光标、时间和画线
保存在你自己存储中的命名布局	工作区	保存、打开、重命名、自动保存；LayoutStorage 可对接服务器
所有操作都可撤销和重做	工作区	画线、指标、设置和图表类型；recordUndo
按区域区分的右键菜单	工作区	画线、图表区、窗格、价格轴、时间轴
自选列表	工作区	多个列表，可拖动排序
供宿主使用的事件	工作区	symbolChange、timeframeChange、ordersChange、executionFill、styleChange 等
组件的三种外观	定制	Studio、Terminal、Capsule；ui 与 setUI；--tcw-* CSS 变量
按键名设置图表外观	定制	对 101 个有类型的键使用 applyOverrides，分为宿主层和用户层
覆盖每个键的设置界面	定制	当前图表类型的样式标签页、交易标签页
112 个功能开关	定制	features、setFeatures、isFeatureOn；可在运行时切换
在组件中加入你自己的部件	定制	工具栏按钮和下拉菜单、侧边栏按钮、状态栏项、插槽、菜单项
你自己的快捷键	定制	addHotkey，按键盘布局识别
组件支持 30 种语言	语言与无障碍	阿拉伯语、希伯来语和波斯语从右到左显示
屏幕阅读器与键盘	语言与无障碍	图表摘要、逐根朗读K线、用键盘操作对话框
本站提供 14 种语言，文档提供六种	语言与无障碍	English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย
React、Vue 和 Svelte 组件	开发者	响应式 props：overrides、indicators、features
插件	开发者	指标、画线工具、图表类型和叠加层；用 overlayScale 和 getPriceStep 在价格网格上绘制
面向编程智能体的文档	开发者	llms.txt、llms-full.txt 以及一个智能体技能

已知局限

在 WebGL 于更多设备上验证之前，Canvas 2D 仍是默认渲染器；它在 Safari 和 5K 屏幕上的帧率尚未测量。
在像素比为 2 的 2560×1400 图表上，集成显卡仅浏览器的合成就需要约 23 ms，因此那里的 WebGL 帧平均为 29 ms。
Tick 周期由数据源返回的近期成交构建；无法加载更早的 Tick 历史。
成交量差和 CVD 是根据K线估算的，而不是根据每笔成交的方向。
一个页面上同时最多 8 张图表用 WebGL 绘制；其余用 Canvas 2D 绘制。

正在用 TradeCanvas 构建交易界面？

我们很想听听。

[email protected]联系我们