首页 > 资讯 > 正文

tradingview使用心得(用于画K线)

2021-11-09 18:53:04
 
1469

因为公司目前是在做一个交易所的项目,页面中需要用到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了。

这里就不上代码了,如果有需要,可以留言。

2019/1、18号更新:

1、新增均线和最新价水平虚线方法:(与火币效果一样)

 self.chart.onChartReady(function(){undefined
                    console.log('ready')
                       // 创建均线
                    self.chart.chart().createStudy('Moving Average', false, false, [5, 'close', 0], null, {undefined
                        'Plot.color': '#34a9ff',
                        'Plot.linewidth': 1
                    })
                    self.chart.chart().createStudy('Moving Average', false, false, [10, 'close', 0], null, {undefined
                        'Plot.color': '#ffb620',
                        'Plot.linewidth': 1
                    })
                    self.chart.chart().createStudy('Moving Average', false, false, [15, 'close', 0], null, {undefined
                        'Plot.color': '#8750ff',
                        'Plot.linewidth': 1
                    })
                    self.chart.chart().createStudy('Moving Average', false, false, [30, 'close', 0], null, {undefined
                        'Plot.color': '#ff688f',
                        'Plot.linewidth': 1
                    })

                    // 创建最新价水平线
                    self.chart.chart().createShape({undefined
                        time: self.timestamp,
                        channel:close
                    },{undefined
                        shape: 'horizontal_line'
                    })
  })

效果:

简直不能再棒!!!

声明:
本文内容不代表斑马投诉网站观点,内容仅供参考,不构成投资建议。投资有风险,选择需谨慎! 如涉及内容、版权等问题,请联系我们,我们会在第一时间作出调整!