create by
db
on
2020-9-2 13:30:46
Recently revised in
2020-12-28 09:52:10
闲时要有吃紧的心思，忙时要有悠闲的趣味
一、Tradingview 介绍
二、使用之前
三、使用 Tradingview
因为公司在做一个交易所的项目，页面中需要用到 k 线图,参考了另外几个类似网站，决定用 tradingview 这个专业的股票交易所类的图表库。基于一些类似的项目，加上 Tradingview 的文档，终究是把 K 线做出来了。现在整理一下笔记，以记录自己的心得。分享给大家，以供参考。
Tradingview 是一个价格图表和分析软件，提供免费和付费选项，由一群交易员和软件开发商在 2011 年 9 月推出。投资者可以通过 Tradingview 查看各种不同金融市场和资产类别的价格图表，包括股票、货币对、债券、期货以及加密货币。除此之外，投资者还可以通过该平台查看多个交易品种，比如股指期货、欧美货币对、黄金、原油、比特币等等。
TradingView 可以说是全球在网页 K 线图上最专业的网站了，凡是在网页上提供 K 线图的，大部分使用的都是 TradingView 的技术，比如说火币、币安……
简而言之，这是一个图表插件，刨除外观 UI 的设置，它的功能就是：获得数据——数据可视化——响应用户操作——获得数据——数据可视化——……
有兴趣可以看下
在线 demo
1. 申请核心图表库
Tradingview 图表库是开源免费的，GitHub 上有官网 demo 可以下载——
demo 下载地址
。
该图表库支持多种语言及框架（如 Vue/React/Angular 等），其实下载了 demo 并不能直接运行，其中缺少关键的核心库(charting-library)，这个需要到官网申请获得——
申请地址
，申请步骤比较麻烦，需要下载它的一份协议，签名盖章之后扫描上传上去，然后填写一堆表单（邮箱公司地址等等），如果填写没问题的话，会在一两天之内回复你的邮箱，是 github 的链接(已授权过的，不然会报 404)。
申请页面如下：
获取 github 授权之后，就可以将核心库(charting-library)下载到本地了。可以用
http-server
打开 charting-library 中的
index.html
（npm install http-server/ http-server -p 8080）,我使用的是 VScode 的
Live Server
插件运行的，运行之后，可以看到 demo 效果如下。
2. 图表库内容说明
下载的图标库内容如下：
+/charting_library
+ /static
- charting_library.min.js
- charting_library.min.d.ts
- datafeed-api.d.ts
+ /datafeeds
+ /udf
- index.html
- mobile_black.html
- mobile_white.html
- test.html
文件介绍：
/charting\_library 包含全部的图表库文件。
/charting\_library/charting\_library.min.js 包含外部图表库 widget 接口。此文件不应该被修改。
/charting_library/charting_library.min.d.ts 包含 TypeScript 定义的 widget 接口
/charting_library/datafeed-api.d.ts 包含 TypeScript 定义的 datafeed 接口。
/charting_library/datafeeds/udf/ 包含 UDF-compatible 的 datafeed 包装类（用于实现 JS API 通过 UDF 传输数据给图表库）。例子中的 datafeed 包装器类实现了脉冲实时仿真数据。您可以自由编辑此文件。
/charting\_library/static 文件夹中存储图表库内部资源，不适用于其他目的。
/index.html 为使用Charting Library widget 的 html 例子。
/test.html 为不同的图表库自定义功能使用的示例。
/mobile\*.html 也是 Widget 自定义的示例。
3. 参考文档
因为开发文档写的可能不怎么友好，在此罗列一下自己的一些参考文档及一些实现的 demo
TradingView 中文开发文档 ==> zlq4863947.gitbook.io/tradingview…
这是个很不错的文档，作者很用心，文档也很详尽，只是小白可能看着有点绕。
因为我们用的是 Vue 框架，所以推荐的大都是基于 Vue 的一些开源项目，都是可以去 github 直接下载的。
vue-tradingview | xushanpei ==> github.com/xushanpei/V…
很基础的一个项目，Vue + tradingview 实现交易所交易 K 线，里面 K 线是随机创建的假数据，有在线演示--demo
vue-tradingview | webdatavisualdev ==> github.com/webdatavisu…
一个基于 Vue 2 + Vuex + TypeScript + TradingView Component 的项目，有在线演示--demo
tradingview-vue | 杭州蘇小小 ==> gitee.com/SuHangWeb/t…
其中包含了移动端和 PC 端
火币 ==> futures.huobi.fm/zh-cn/contr…
币安 ==> www.binancezh.pro/cn/trade/BN…
现在我们已经大致了解了 TradingView，也已经运行起了相关的 demo。不过，要将 Tradingview 放进我们的项目使用，仅仅是考 demo 是不够的，我们还要了解其他的东西。现在我们从头开始。
1、引入图表
首先官方仓库（地址）下载代码到本地，新建tradingview-test项目，然后将
charting_library /_文件夹_/
datafeeds /_文件夹_/
把以上两个放到 tradingview-test项目根目录下的 static 文件夹下
在其根目录下面的入口文件 index.html 中引入以下两个个文件，
<script type="text/javascript" src="./static/datafeeds/udf/dist/polyfills.js"></script>
<script type="text/javascript" src="./static/datafeeds/udf/dist/bundle.js"></script>
在对应的组件,如Exchange.vue内引入 tradingview---这里的构造器 widget
import { widget } from '../../../static/charting_library/charting_library.min.js'
至此 我们需要应用的图表库就可以使用了，下面开始下一步，配置 K 线图。
2、参数配置
关于 K 线图的参数配置，包括语言、样式、产品信息、数据展示方式、面板上禁用的功能、启用的功能等等,都是可以自己配置的。文档也有详细介绍.其大致配置如下：
new TradingView.widget({
symbol: 'A',
interval: 'D',
timezone: 'America/New_York',
container_id: 'tv_chart_container',
locale: 'ru',
datafeed: new Datafeeds.UDFCompatibleDatafeed(
'https://demo_feed.tradingview.com'
),
3、绑定数据、
demo 中的代码都是使用的 tradingview 官方的 UDF 接口来获取数据的，这有很大的局限性。如果我们需要自己的数据的，就要按照 Tradingviewd 的格式(传参为{开始时间、结束时间、产品 id}，返回值为[{高、开、低、收、数量、时间戳}])，实现自己的接口。
不过，如果你的团队后台人手够的话，也完全可以参照UDF, 去开发一个接口供使用，这样前端代码会少很多（这个我没尝试过）
4、图表事件
图表事件，也就是创建Datafeed函数。这是我们自定义使用 tradingview 的重点，其中包括了生命周期/事件触发等。
推荐仔细阅读文档中 JS Api，内容比较繁琐，但很有阅读必要。里面定义了数据的格式，用户操作的响应，每个参数是如何传递给图表的。
需要重点掌握的方法有以下几个
onReady
resolveSymbol
getBars
subscribeBars
unsubscribeBars
具体使用如下：
createFeed () {
let that = this
let Datafeed = {}
Datafeed.Container = function (updateFrequency) {
this._configuration = {
supports_search: false,
supports_group_request: false,
supported_resolutions: [
'1',
'5',
'15',
'60',
'120',
'1D',
supports_marks: true,
supports_timescale_marks: true,
exchanges: ['myExchange1']
Datafeed.Container.prototype.onReady = function (callback) {
let that = this
if (this._configuration) {
setTimeout(function () {
callback(that._configuration)
}, 0)
} else {
this.on('configuration_ready', function () {
callback(that._configuration)
Datafeed.Container.prototype.resolveSymbol = function (
symbolName,
onSymbolResolvedCallback,
onResolveErrorCallback
Promise.resolve().then(() => {
onSymbolResolvedCallback({
name: that.projectDetail.productName ,
ticker: symbolName,
description: '',
session: '24x7',
timezone: 'Asia/Shanghai',
pricescale: 100,
minmov: 1,
minmov2: 0,
type: 'bitcoin',
has_intraday: true,
intraday_multipliers: ['1', '5', '15', '15', '60', '120'],
has_weekly_and_monthly: true,
has_daily: true,
force_session_rebuild: true,
has_no_volume: false,
regular_session: '24x7'
Datafeed.Container.prototype.getBars = async function (
symbolInfo,
resolution,
rangeStartDate,
rangeEndDate,
onDataCallback,
onErrorCallback,
firstDataRequest
that.localresolution = resolution
if (firstDataRequest) {
let bars = await that.getChartData(resolution, rangeStartDate, rangeEndDate, firstDataRequest)
if (bars.length) {
onDataCallback(bars)
} else {
onDataCallback([], { noData: true })
else {
onDataCallback([], { noData: true })
Datafeed.Container.prototype.subscribeBars = function (
symbolInfo,
resolution,
onRealtimeCallback,
listenerGUID,
onResetCacheNeededCallback
that.callbacks = []
that.callbacks.push(onRealtimeCallback)
that.updateBar(resolution, onRealtimeCallback)
that.chart.activeChart().setChartType(1);
Datafeed.Container.prototype.unsubscribeBars = function (listenerGUID) {
return new Datafeed.Container()
5、工作原理
在我们对图表事件有所了解之后，可以知道，图表的工作原理就是我们喂数据，图表做可视化的展示。
而我们如何把数据喂给图表，插件本身已经定义了对外接口，需要我们提供一个拥有这些接口的对象 datafeed。如 getBars 方法，这是获取交易记录的，我们用来实例化图表的对象 datafeed，需要实现这个方法，而且返回的值必须是图表插件预期的。
对应的用户操作，图表插件对应的调用对外接口，所以我们需要在 datafeed 实现这些接口，返回预期数据，图表将会展示这些数据。
6、websocket
ajax 获取数据在用户量比较多的情况下，实时数据轮询会造成服务器压力大，所以一般都会使用 websocket 推送来获取数据。
对于 websocket，官方没有给出 demo，但是很幸运的是，已经有博主实现了 websocket 的 demo，有需要的同学可以看一下关于 tradingView 与 websocket 结合的可用案例
对于用户，这是一个很好用的插件，但是对于前端工程师，这个插件并不够友好。很多人接手这个插件都是云里雾里，包括我。但是通过对这个插件的学习，还是获得了很多知识，同时希望本文能帮到大家。
TradingView 中文开发文档
TradingView JS API 集成教程 | Ellite - 简书
tradingview 使用心得 | jacoby_fire - CSDN
tradingview 入门 | 陈其文 - 思否
TradingView 笔记 | 索茄啦你 - CSDN
TradingView 自定义指标 | x_smile - 博客园
后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址
db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。
