5

今年七月入坑,中间断断续续做了别的项目,因为没有完全掌握这个插件,所以一直没有嵌入项目。
现在已经四个月过去了,迭代工作没那么忙,是时候整合tradingview到项目内部了。

1、简介

这是一个图表插件,刨除外观UI的设置,它的功能就是:获得数据——数据可视化——响应用户操作——获得数据——数据可视化——……
一般在交易所中使用比较多,数字货币交易所如火币网币安都在使用这个插件。

2、引入图表

GitHub上有demo可以下载,支持多种语言,但是demo缺少关键的核心库,这个需要到官网申请获得
官方demo使用的数据获取方式为ajax获取,数据接口是官方提供的。
但是我们自己的项目,自然要使用我们自己的数据,所以接口得自己实现。

3、参数配置

官方GitHub有功能选择介绍,另有很多博主都有详细的讲解,不在此赘言,我自己也整理了一个文档,在这里

4、图表事件

推荐仔细阅读官方JS Api,内容比较繁琐,但很有阅读必要。里面定义了数据的格式,用户操作的响应,每个参数是如何传递给图表的。

5、工作原理

在我们对图表事件有所了解之后,可以知道,图表的工作原理就是我们喂数据,图表做可视化的展示。
而我们如何把数据喂给图表,插件本身已经定义了对外接口,需要我们提供一个拥有这些接口的对象datafeed。如getBars方法,这是获取交易记录的,我们用来实例化图表的对象datafeed,需要实现这个方法,而且返回的值必须是图表插件预期的。
对应的用户操作,图表插件对应的调用对外接口,所以我们需要在datafeed实现这些接口,返回预期数据,图表将会展示这些数据。

6、websocket

ajax获取数据在用户量比较多的情况下,实时数据轮询会造成服务器压力大,所以一般都会使用websocket来获取数据,这个需要我们自己实现数据的获取而不能使用demo的数据交互方式。
对于websocket,官方没有给出demo,但是很幸运的是,已经有博主实现了websocket的demo,这个博主是个好人,地址在这里。我已经在github上放了一个websocket的例子,有需要的同学可以看一下传送门

7、结语

对于用户,这是一个很好用的插件,但是对于前端工程师,这个插件并不够友好。很多人接手这个插件都是云里雾里,包括我。但是通过对这个插件的学习,还是获得了很多知识。


陈其文
430 声望19 粉丝

前端