TradingChest:基于 KLineChart 的专业交易图表库
TradingChest 是一个目标对标 TradingView 的专业交易图表库,构建于 KLineChart 9.x(Canvas 渲染)之上,由 KLineChart Pro 分叉并大幅扩展。它内置 73+ 技术指标、42+ 绘图工具、8 种图表类型,并提供价格提醒、品种对比、K 线回放、交易可视化、主题预设、快捷键、数据导出与布局持久化等能力,技术栈为 Solid.js + Vite + TypeScript,采用 Apache License 2.0 许可。
社区作者 · zZz
它解决什么问题
TradingChest 是一个面向专业交易场景的金融图表库,目标是达到 TradingView 级别的能力,构建在 KLineChart 之上(Forked from KLineChart Pro,并做了显著扩展)。配图 1 为其界面截图。
主要能力:
- 技术指标 73+:趋势类 21(MA、EMA、BOLL、Ichimoku、SuperTrend、Alligator、KAMA、HMA 等)、波动率类 9(Keltner Channels、Donchian Channels、ATR、Bollinger Band Width 等)、成交量类 12(VOL、VWAP、MFI、CMF、Klinger Oscillator、Elder Ray 等)、动量类 26(MACD、RSI、KDJ、StochRSI、ADX、Aroon、Fisher Transform、PPO 等)、其他 2(Pivot Points、ZigZag)。指标面板支持分类标签快速筛选(Trend / Volatility / Volume / Momentum / Other)、实时搜索过滤、参数自定义,以及懒加载的指标注册以加快启动速度。
- 绘图工具 42+:直线类(水平线、垂直线、趋势线、射线、线段、箭头、价格线、平行线、价格通道)、斐波那契类(回撤、分段、圆、螺旋、速度阻力扇、趋势扩展)、波浪类(3 浪、5 浪、8 浪、任意浪、ABCD、XABCD)、几何图形(圆、矩形、三角形、平行四边形)、形态类(Andrew's Pitchfork、Schiff Pitchfork、线性回归、回归通道、Gann Box)、测量类(价格区间、时间区间、组合测量)、标注类(文字标签、标注气泡、便签、手绘)、交易类(多空持仓,含入场/止损/止盈可视化与风险回报比)。所有工具带悬停提示;文字工具支持行内编辑与右键编辑;选中绘图后出现 TradingView 风格的浮动属性工具栏,包含 9×8 共 72 色调色板、1–4px 线宽选择(带视觉预览)、实线/虚线/点线线型选择,以及锁定/删除快捷按钮。
- 图表类型 8 种:Candle Solid、Candle Hollow、Up Hollow、Down Hollow、OHLC、Area、Heikin Ashi、Baseline。
- 价格提醒:可在指定价格添加/删除提醒线,价格穿越提醒价位时触发回调,图上做可视化叠加,实时模式与回放模式均可用。
- 品种对比:叠加按百分比变化归一化的其他品种,并自动进行跨品种时间戳对齐。
- K 线回放(Bar Replay):逐根回放历史数据,支持播放/暂停/前进/后退/跳转到指定位置,速度 0.5×–16× 可调,回放期间提醒系统保持生效。
- 交易可视化:根据成交记录在图上叠加买卖标记,支持对交易标记的点击检测与回调,并与 IndicatorClickDetector 集成。
- 设置面板:K 线类型选择、涨跌颜色自定义(取色器)、价格轴类型(线性/百分比/对数)、十字光标可见性(水平/垂直独立控制)、网格线、高低点标记、提示类型,设置按 K 线 / 坐标轴 / 网格与十字光标分组。
- 其他:15+ 默认键盘快捷键(如 Alt+T 趋势线、Alt+F 斐波那契)且完全可自定义;5 套主题预设(Dark、Light、Midnight Blue、Classic TradingView 风格、High Contrast);数据导出支持 CSV(可见范围/全部数据)与截图(PNG/JPEG);通过 localStorage 进行布局的保存/加载/删除;国际化支持中文(zh-CN)与英文(en-US);支持 14 个时区。
技术栈:渲染引擎 KLineChart 9.x(Canvas,高性能);UI 框架 Solid.js(响应式、轻量);构建工具 Vite(ESM + UMD 双输出);语言 TypeScript(项目代码零 @ts-expect-error);测试 Vitest(211 个测试、18 个测试文件)。
相比上游 KLineChart Pro 的主要扩展:45+ 自定义技术指标与懒加载注册表、13+ 绘图工具(测量、标注、交易持仓可视化)、选中绘图的浮动属性工具栏、键盘快捷键系统、主题预设、数据导出、布局持久化、集成实时/回放的价格提醒系统、归一化百分比的品种对比叠加、带步进/播放/速度控制的回放引擎、带点击检测的交易可视化、带分类标签与搜索的指标面板、分组选项与取色器的设置面板,以及通过 dispose() 实现的完整资源清理(零内存泄漏)。
— 本文由 AI 根据公开来源辅助整理,命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
环境准备:需要 Node.js 与 npm 环境(来源未明确具体版本要求,待核验)。
一、作为依赖安装
npm install trading-chest klinecharts二、基本使用(首次运行) import { KLineChartPro } from 'trading-chest' import 'trading-chest/dist/trading-chest.css'
const chart = new KLineChartPro({ container: document.
getElementById('chart'), symbol: { ticker: 'BTC-USDT', name: 'Bitcoin', exchange: 'Binance', pricePrecision: 2, volumePrecision: 4, }, period: { multiplier: 1, timespan: 'day', text: '1D' }, datafeed: { searchSymbols: async () => [], getHistoryKLineData: async (symbol, period, from, to) => { // Return KLineData[] — implement your data fetching logic return [] }, subscribe: () => {}, unsubscribe: () => {}, }, theme: 'dark', locale: 'en-US', })
// Don't forget to dispose when done // chart.dispose()
首次运行注意事项:
- 必须引入样式文件 'trading-chest/dist/trading-chest.css',否则图表样式不完整。
- 需要自行实现 datafeed:getHistoryKLineData 必须返回 KLineData[],此处填写自己的数据获取逻辑;searchSymbols、subscribe、unsubscribe 也需按需实现。
- 使用结束后调用 chart.dispose() 释放资源(来源强调 dispose() 可