简介这是一套TradingView 2020-2021年最新版图表库资源核心为charting_library-master组件面向需要为网站或应用集成专业K线图表的开发者以及希望深度研究TradingView技术架构的量化交易爱好者。包内共644个文件约2.08MB以250个JavaScript脚本、180个CSS样式、68个HTML页面为主辅以TypeScript、PNG图标、SVG与字体文件结构上涵盖数据接口、图表绘制、UI组件与静态资源等模块便于直接部署或二次开发。已有529人学习下载。该库支持折线图、K线图、柱状图等多种图表类型内置移动平均线、RSI、布林带等上百种技术指标并提供绘图工具、交互操作与PineScript脚本扩展机制。开发者可借助它快速搭建与TradingView体验一致的分析平台交易者也能通过自定义指标和策略提升市场研判效率。1. 拆解 2020-2021 tradingview charting_library这不是一个插件是一套可嵌入的前端系统很多做量化交易系统的人第一件事就是在页面上嵌入K线图搜半天只会找到 tradingview advanced charts打开仓库一看全是.bundles、.datafeeds、.dist第一反应是放弃。我最初接手 2020-2021 年版的charting_library-master时也被目录结构劝退过但实际跑通后会发现它是当时前端金融图表领域最完整的一套可嵌入方案图表渲染、交互手势、指标计算、自定义数据源全部解耦适合做行情页、策略回测界面和风控监控台。这篇文章按我拆包时的顺序从目录结构、集成、数据接入讲到指标扩展代码可以直接对应到你的项目里。2. 先用目录架构把 charting_library-master 拆明白2.1 bundles、chart、datafeeds 各自管什么我拿到的压缩包解压后长这样charting_library-master/ ├── .bundles/ ├── .chart/ ├── .charting_library/ ├── .datafeeds/ ├── .dialogs/ ├── .dist/ ├── .images/ └── _ISSUE_TEMPLATE/这是打包时带上.前缀的目录charting_library核心代码、datafeeds数据适配器、dist最终发布产物都被打散在三层目录里。真正需要引入浏览器的是.dist下编译压缩后的charting_library.min.js、static子目录里的样式和字体.bundles是 webpack 拆出来的模块块通常在开发期定位问题才会用到。我一般会把.dist单独抽出来当作静态资源目录其他目录保留在源码仓库做版本管理。下面是主要目录的职责对照目录作用部署时是否需要.dist/charting_library.min.js图表库主入口是.dist/static/图表主题、字体与图标资源是.datafeeds/udfUDF 协议示例数据源开发期参考.charting_library/未压缩源码含 TS 类型声明仅开发期.chart/图表内部组件的模块缓存通常不参与部署.dialogs/确认框、设置面板等 UI 组件按需引用看到.dialogs里还有现成的保存/加载图表模板的弹窗这其实是 TradingView 自带的本地存储 UI后面做多图表工作区时可以直接复用不用自己写模态框。而_ISSUE_TEMPLATE是 GitHub 议题模板说明这份包在作者侧是用于二次开发的问题追踪也提示我们目录本身不是最终产品形态依赖它构建时要有自己的一套外包装。2.2 dist 与 charting_library 的关系静态资源如何打包我用 webpack 处理的时候并没有把node_modules里的版本直接引进来而是先做了一次本地拷贝mkdir -p src/vendor/charting_library cp -r .dist/* src/vendor/charting_library/这样做的原因是 2020-2021 这一代版本对路径解析非常敏感charting_library.min.js会尝试从charting_library/static/加载样式。如果你的站点跟发布目录不是同一级直接 import npm 包经常出现 404 字体资源。把dist原样放进自己项目的vendor目录后再配一条 webpack 的copy-webpack-pluginplugins: [ new CopyWebpackPlugin({ patterns: [ { from: src/vendor/charting_library, to: charting_library } ] }) ]这里的逻辑是让最终打包出来的dist目录下有一个charting_library/static路径和库内部默认的 resource_url 保持一致。如果你用 Vite 或自定义构建器核心点也是把static子目录整体暴露出来而不是只复制一个 js 文件。2.3 这个版本里的 _ISSUE_TEMPLATE 和 dialogs 该怎么用_ISSUE_TEMPLATE目录让我意识到这份代码是有人把仓库整个拉下来后重新压缩发布的。我实际的使用方式是保留它作为版本备注在项目 README 里记录 基于 2020-2021 charting_library-master 集成。.dialogs下的组件是独立模块可以在初始化时通过custom_indicators_getter或dialog_components注入不过那一版组件接口比较老直接 import 可能报define is not defined需要把模块文件转成 ESM或者干脆用官方初始化参数覆盖默认 UI这会在后面章节展开。如果只是做简单的行情展示不需要触碰这些源码目录但如果要做券商风格的交易面板.dialogs里其实是有现成的价格输入和按钮样式可以抽取成自己的 Vue/React 组件再用。3. 交易图表页面集成widget 初始化和 common 参数3.1 使用 script 标签还是 npm 包打开官方文档多数指引会让你把charting_library.min.js用 script 标签放入index.html。这个方式在 2020-2021 版的确最稳因为库内部会挂载全局对象TradingView。但我自己更推荐先做成模块再传给框架script src/vendor/charting_library/charting_library.min.js/script然后在业务代码里拿到构造入口// 全局 TradingView 对象 const { widget } window.TradingView || {}; if (!widget) { console.error(TradingView 库加载失败请检查charting_library.min.js路径); return; } const tvWidget new widget({ symbol: BTCUSD, interval: 1h, container_id: tv_chart_container, datafeed: new Datafeeds.UDFCompatibleDatafeed(https://your-api.local), library_path: /charting_library/, locale: zh, debug: false, enabled_features: [study_templates], disabled_features: [header_symbol_search], time_frames: [ { text: 10y, resolution: 1M }, { text: 1y, resolution: 1W }, { text: 6m, resolution: 1D } ] });这段代码的逻辑是datafeed对象负责喂给图表所有K线和实时更新library_path告诉图表库到哪里找static资源container_id对应页面里的容器 div。widget是这一版官方推荐的构造函数返回的实例可以直接调用chart()方法拿到图表对象做更细粒度控制。3.2 widget 参数表专注于图表库核心配置参数类型建议值和说明symbolstring默认交易品种如AAPL、BTCUSD后续可被搜索替换intervalstring默认周期1代表 1 分钟1D代表日线container_idstring渲染目标节点 ID必须已存在于 DOMdatafeedobject实现 UDF 协议的行情数据源TradingView 只认识它提供的结构library_pathstring指向charting_library.min.js所在目录的路径末尾要带斜杠custom_css_urlstring覆盖主题 CSS 的完整 URLauto_save_delaynumber图表模板自动保存间隔单位毫秒具体到 2020-2021 版我自己最常踩的坑是library_path和custom_css_url的路径没有带尾斜杠导致图表右下角弹 Something went wrong, datafeed error。其实数据源已经返回正常数据只是静态资源没加载成功。3.3 初始化阶段如何判断到底哪里报错错误按来源分三类库自身加载失败、数据源初始化失败、DOM 节点惰性渲染失败。我一般会在widget构造函数外挡住第三类const chartContainer document.getElementById(tv_chart_container); if (!chartContainer) { throw new Error(Containter #tv_chart_container not found); } const tvWidget new TradingView.widget({ ... }); tvWidget.onChartReady(() { console.log(chart ready); // 此时可以调用 tvWidget.chart().setSymbol(ETHUSD, 15); });然后看浏览器 Network 面板如果charting_library.min.js本身 404说明script src路径有问题如果图表出现网格但无K线说明 datafeed 的getBars返回格式不对如果样式错乱基本是static目录 404。把这些判断记下来集成能稳定排掉八成问题。4. 数据接入是永远绕不开的 UDF 协议从 onReady 到 subscribeBars4.1 为什么需要自己实现 datafeedTradingView 图表库自己没有 K 线数据它只负责把数据画出来。要做真实行情展示datafeed 必须由你或第三方提供。UDFUnified Data Format是它定义的 REST WebSocket 协议2020-2021 版最常用的是 1.2 规范onReady拿配置getBars拉历史 K 线subscribeBars推送实时更新。我通常直接拿.datafeeds/udf目录里的udf-compatible-datafeed.js当基类再覆盖部分方法。这比自己从零实现要稳因为协议解析细节很多比如nextTime、noData这类字段若漏了图表会一直转圈。4.2 一个能跑通的最简 datafeed 骨架class UdfDatafeed { constructor(url) { this.url url; this.onDataCallback null; this.readyState false; } onReady(callback) { this._readyConfig { supported_resolutions: [1, 5, 15, 1h, 1D, 1W], supports_group_request: false, supports_marks: false, supports_search: true, }; // 图表库初始化时必调拖时间太长会超时 callback(this._readyConfig); } async getBars(symbolInfo, resolution, from, to, onHistoryCallback, onErrorCallback) { // from/to 是 Unix 秒级时间戳服务端按闭区间查K线 const url ${this.url}/history?symbol${symbolInfo.ticker}resolution${resolution}from${from}to${to}; try { const res await fetch(url); const data await res.json(); if (!data.s || data.s no_data) { onHistoryCallback([], { noData: true }); return; } // UDF 返回数组t(时间), o(开盘), h(最高), l(最低), c(收盘), v(成交量) const bars data.t.map((tv, idx) ({ time: tv * 1000, open: data.o[idx], high: data.h[idx], low: data.l[idx], close: data.c[idx], volume: data.v[idx] })); onHistoryCallback(bars, { noData: false }); } catch (e) { onErrorCallback(e); } } subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) { // 常见做法保持一个 WebSocket 或轮询定时器回调里 push K线 this.onDataCallback onRealtimeCallback; this.ws new WebSocket(wss://your-api.local/stream?symbol${symbolInfo.ticker}res${resolution}); this.ws.onmessage (evt) { const msg JSON.parse(evt.data); // 实时K线更新未完成K线直接回调 this.onDataCallback({ time: msg.timestamp * 1000, open: msg.open, high: msg.high, low: msg.low, close: msg.close, volume: msg.volume }); }; } unsubscribeBars(subscriberUID) { // 记住关闭连接否则组件销毁后还在推送 if (this.ws) this.ws.close(); } }这段代码覆盖了图表库最核心的三个生命周期回调。onReady会决定用户能选哪些周期getBars负责绘制初始历史数据subscribeBars让图表在每次跳价时实时更新。需要注意time请务必转成毫秒级UDF 历史接口返回秒但图表库内部使用毫秒不转换会出现间隔错乱。4.3 UDF 常用字段与图表行为的对应关系字段类型影响sstringok或no_data状态tnumber[]时间戳数组单位秒客户端乘 1000o/h/l/cnumber[]OHLC 价格数组vnumber[]成交量数组nextTimenumber分页加载时下一次请求的起始时间服务端返回时最容易漏的是v空数组会在成交量副图显示空白但主图K线正常排查起来非常隐蔽。我建议在 datafeed 开头统一对数组长度做断言确保四组价格长度和t一致。实时订阅还有一个坑如果 websocket 推送的time是上一根的收盘时间图表会直接作为新K线追加而不是更新当前根。正确做法是让服务端在推送前判断时间戳如果等于当前K线开始时间则仍走更新逻辑。这个需要在协议层约定好客户端只处理数据。5. 图表能力扩展指标、绘图工具和 PineScript 的联动5.1 内置指标加载策略图表库内置上百个技术指标默认在图表右侧工具栏可以选择。如果你希望在一打开就呈现某个指标可以通过createStudy方式tvWidget.chart().createStudy(MACD, false, false, { 0: { type: source, source: close }, 1: { type: constant, val: 12 }, 2: { type: constant, val: 26 } });第一个参数是指标名称第二个forceOverlay设为 false 表示放副图第三个lock用于禁止用户拖动。后面的对象数组是 PineScript 指标入参。这里要特别说明2020-2021 版指标内部名称与界面展示名不完全一致比如界面叫 MACD (12, 26, 9)API 里是 MACD要获得准确清单可以调用tvWidget.chart().getAllStudies()在 onChartReady 里打印。5.2 自定义绘图工具与交互绘图工具趋势线、斐波那契属于内置 feature可以在初始化里通过overrides重新定义默认颜色和样式overrides: { paneProperties.background: #1E222D, scalesProperties.textColor: #B2B5BE, trendLine.color: #F04B4B, trendLine.linewidth: 2 }overrides是这一版非常实用但文档不太全的配置入口。它本质是一个扁平 key-value 映射key 由paneProperties、scalesProperties、trendLine等命名空间拼接而成无法在运行时动态更新只能初始化传入。所以我的经验是把它拆成配置文件集中管理交易主题比如夜间模式、色盲模式。真正需要自定义交互的通常是创建指标面板外的额外按钮。这时可以在初始化函数外监听图表事件tvWidget.chart().onDataLoaded().subscribe(null, () { updateOrderbook(tvWidget.chart().symbol()); });这段代码会让每次K线数据更新后自动把当前交易对同步给右侧订单簿面板这就是 tradingview advanced charts 常被用来做交易终端联动的原因。5.3 PineScript 脚本资源如何应用到 charting_library图表库和 TradingView 主站不一样主站支持直接编辑 PineScript而嵌入到你们自己系统里时通常只加载编译后的指标定义。比如官方示例里会用custom_studies的方式在 widget 初始化时加载一个.js文件文件内部是 PineScript 编译器输出的__extends类结构。另一种更常见的做法是把 PineScript 策略在本地回测再将计算结果输出为指标通过图表库的createStudy调用。我在一个 CTA 项目里就是这样做的日线收盘后用 pandas 算出布林带上下轨然后把结果写入布尔变量放到自定义数据源里由getBars一并返回图表上通过 overlay 属性画出来。这样既避免了引入整个 Pine 解释器又保留了直接改参数在图表上重算的能力。5.4 限制与边界不要太自信地写自定义指标场景推荐方式原因简单指标显示createStudy直接用内置指标无需引入编译器多指标联动overridescreateStudy并发减少副图复杂度避免主线程卡顿需要策略回测结果服务端计算后由 datafeed 返回避免 Pine 解释器的兼容问题凡是涉及custom_indicators_getter的时候如果按文档传入返回 Promise 的函数很容易在 2020-2021 版遇到作用域冲突。原因是自定义指标需要注册到全局命名空间而库内部在模块环境里并没有暴露这个全局。我的规避方式是直接加载 UMD 格式的指标文件打包时把它作为入口文件独立产出不要在业务代码里 import。另外指标计算非常占用主线程我记得这一版的性能优化还不够好打开一张包含三个 MACD 和两个 RSI 的图表在低端机上会卡到无法拖动。建议用paneProperties合并副图并为图表开启crosshair锁定模式。6. 进阶让 TradingView 图表在产线跑得更稳的三条锦囊6.1 用 library_path 做版本隔离不要线上直接覆盖 vendor 目录。把 2020-2021 版的charting_library.min.js保留在/vendor/tv/2020-2021/子路径上线新版本时平行部署通过library_path指向不同版本。这样发生了无法兼容的新版 API 替换可以秒级切回旧版本。6.2 复用 datafeed 的 WebSocket 订阅很多第三方的 UDF 适配器每次getBars都会新建 WebSocket导致 30 秒内产生大量 TIME_WAIT 连接。建议把 datafeed 设计成带连接池的单例getBars只走 RESTsubscribeBars才建立 WebSocket并且内部维护订阅表同一 symbol/resolution 只保留一条流。subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscriberUID) { const key ${symbolInfo.ticker}:${resolution}; if (this.subscriptionMap.has(key)) { this.subscriptionMap.get(key).listeners.add(subscriberUID); return; } this.subscriptionMap.set(key, { ws: new WebSocket(wss://your-api.local/stream?symbol key), listeners: new Set([subscriberUID]) }); }这一段是让多个指标窗口订阅同一个交易对时不重复建连回调触发时遍历listeners就能同步到所有图表实例。对真实生产环境来说连接数从 N 降到 1收益非常直接。6.3 用 studies_overrides 批量覆盖指标样式studies_overrides是初始化配置项允许在加载前覆盖所有指标的颜色和参数比逐个调用createStudy更高效const tvWidget new TradingView.widget({ ... studies_overrides: { macd.histogram.color: #26a69a, rsi.plot.color: #f04b4b } });适合团队统一视觉规范时使用。要注意 key 写法必须以指标名.plot名的格式漏掉 plot 名不会报错但也不会生效多套主题可以直接在配置里维护多个对象按用户偏好切换初始化参数。本文还有配套的精品资源点击获取