Recording - TradingView从入门到放弃

  • 具有开放数据API并可下载的图表控件。这是一个独立的解决方案,您可以下载,托管在您的服务器上,连接您自己的数据,并在您的网站/应用程序中免费使用。
  • 中文文档: b.aitrade.ga/books/tradi…

二、Charting Library版本

  • 可以通过在浏览器控制台中执行 TradingView.version() 来查看图表库版本。

JS API文件

  • 1.10 版本 - 未封装
datafeed/
--| udf
----| datafeed.js
复制代码
  • >=1.13 版本 - 已封装
datafeed/
--| udf
----| dist //打包后js
----| lib // .js 
----| src // .ts
复制代码
Datafeeds

三、图表初始化配置

datafeed

1. 修改 udf-compatible-datafeed-base 文件

onReady 函数配置提供填充配置数据的对象,这些数据会影响图表的特性表现

配置前:

public onReady(callback: OnReadyCallback): void {
	this._configurationReadyPromise.then(() => {
		callback(this._configuration);
	});
}
复制代码

配置后:

public onReady(callback: OnReadyCallback): void {
    setTimeout(()=>{
        callback({
    		supports_search: true,
    		supported_resolutions: ['1', '5', '15', '30', '60', '1D', '1W', '1M'],
	    });
    },0)
}
复制代码
  1. resolveSymbol 函数配置Symbology(商品信息结构)

四、加载柱状图

官方Demo加载可以看到 history 接口返回柱状图显示的数据信息,每一条柱状图数据结构= 开(open)|高(high)|低(close)|收(low)|时间(time)|量(volume)

查看 history-provider 文件 getBars 函数,可以看到请求回调数据处理代码,最终调用 resolve 返回图表需要展示的数据

resolve({
	bars: bars, //图表需要展示的数据
	meta: meta,
});
复制代码

数据说明

// bars结构
// 接口返回的time排序必须遵循,即最新时间在最后一个下标: from - to
[
    {
        time
        close
        open
        high
        low
        volume
    }
]

// meta结构
{
    noData //只有在请求的时间段内没有数据时,才应该被设置 true|false
    nextTime //历史中下一个K线柱的时间戳
}
复制代码

4.1 懒加载

如果图表初始化接口数据不足够填充满可视区域,默认会再次触发 getBars 函数继续请求 history 接口获取历史数据,这个时候如果接口没有数据了就需要将 noData 设成 true 告诉图表已经没有数据给你了。

  • 因为只在1.10版本上实现过,当时我是自己定义了一个时间区间去请求,再次触发 getBars 请求时,我再拿上一次请求的开始时间 from 减去 unix_time 往前推出更早的时间戳去加载历史数据。
  • 然后维护一个对象,该对象存储 getBars 请求的开始时间和结束时间,每次调用 getBars 请求的时候拿返回的时间戳去对比维护的时间戳判断是否有更新。
  • 对比的目的是因为接口只会根据时间区间返回数据,并不知道图表数据是否已经填满,需要前端根据时间戳判断是否已经加载完所有历史数据

时间区间示例:

Datafeeds.UDFCompatibleDatafeed.prototype.reset_resolution = function (resolution) {
	var unix_time = null;
	switch (resolution) {
		case 1:
		    //10小时
			unix_time = 10 * 60 * 60 * 1000; 
			break;
		case 5:
		    //1.5天
			unix_time = 1 * 24 * 60 * 60 * 1000 + 43200000; 
			break;
		case 15:
		    //3天
			unix_time = 3 * 24 * 60 * 60 * 1000; 
			break;
		case 30:
		    //6天
			unix_time = 6 * 24 * 60 * 60 * 1000; 
			break;
		case 60:
		    //10天
			unix_time = 10 * 24 * 60 * 60 * 1000;
			break;
		case 240:
		    //80天
			unix_time = 80 * 24 * 60 * 60 * 1000;
			break;
		case 480:
		    //160天
			unix_time = 160 * 24 * 60 * 60 * 1000;
			break;
		case 1440:
			unix_time = 365 * 24 * 60 * 60 * 1000;
			break;
		case 10080:
			unix_time = 365 * 7 * 24 * 60 * 60 * 1000;
			break;
		default:
			unix_time = false;
	}

	return unix_time;
}
复制代码

五、更新图表最新数据

查看 data-pulse-provider 文件可以看到有一个 setInterval 轮训,没错-这个就是官方Demo默认执行的轮训请求 history 接口更新最新的一条数据,如果想要实现WS更新就在该文件进行逻辑修改。(当然各位客官有其他方法可以分享一下)

这里基于1.10版本阐述一下对接WS实现的思路

  1. 声明一个 _WsUpdateObj 变量,用于存储WS数据推送.
  2. Datafeeds 添加一个接受WS推送的 getWsUpdateMsg 方法,组件监听WS有新推送调用 getDatafeeds.WsUpdateMsg 赋值给 _WsUpdateObj .
  3. 使用 Object.defineProperty 劫持 _WsUpdateObj 数据变化,更新最新的一条数据
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章