因为公司目前是在做一个交易所的项目,页面中需要用到k线图,之前用了echart的k线,太过简陋了,参考了另外几个同级网站,决定用tradingview这个专业的股票交易所类的图表库。
从上周开始就研究tradingview,一直到昨天才算是勉强能够在本地运行,真的是不容易。下面来说说使用过程中遇到的一些坑。
1、tradingview虽然是开源免费,可也是仅限于一些基本的图表服务,但这也基本上够用了。如果你要定制高级别的,那需要联系官方。使用之前,需要进入tradingview官网去申请他的chart_library(https://cn.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/ ), 申请步骤是我见过最复杂的,需要下载它的一份协议,签名盖章之后扫描上传上去,然后填写一堆表单(邮箱公司地址等等),如果填写都ok的话,会在一两天之内回复你的邮箱,是github的链接(已授权过的,不然会报404)。
2、github授权之后,你就可以clone到本地了,可以用http-server运行(npm install http-server/ http-server -p 8080)
运行之后,可以看到demo的效果。demo中的代码都是使用的tradingview官方的UDF接口来获取数据的。这有很大的局限性,如果你的团队后台人手够的话,也完全可以参照(https://b.aitrade.ga/books/tradingview/book/UDF.html ), 去开发一个接口供使用,这样前端代码会少很多。
3、当然,如果像我这样,因为后台框架的限制,无法给我一个适配UDF的接口,那就很蛋疼了。
我现在所希望的是,能将我的数据放进图表中,因为之前用echart的时候已经有数据接口了,数据返回时没有问题的。
官方文档是让使用JS API,可是说实话我到现在也没有get到JS API的魅力。官方文档中对于JS API是这样解释的:
这是啥? 一套JS方法(以实现指定的公共接口)。
我该怎么使用它?: 您应该创建一个JS对象,它将以某种方式接收数据,并响应图表库的请求。
在图表库中实现了数据缓存(历史和商品信息)。当您创建一个实现接口的对象时,只需将它传递给图表库Widget的构造函数。
真心觉得看不懂,这里面的某种方式是什么,创建对象之后的传递方法又是什么? 一脸懵逼,如果有大佬看到我的文章,还希望不吝赐教。
4、ok,然后就是无休止的查找了,百度,google,Stack Overflow等等。 前两天基本一无所获,找了些但是与我想要的不对口。昨天无意间找到了这个( https://github.com/webdatavisualdev/vue-tradingview ),简直如获至宝啊。结合我的项目代码,很顺利就完成了数据对接。 里面的createFeed不是很明白,没有注释,read.me也没啥东西,有点蛋疼。
好了,看效果把:
因为数据只有这些,所以看着有点单薄,后期数据多了就ok了。
这里就不上代码了,如果有需要,可以留言。