tradingview使用心得（用于画K线）_tradingview

转自 https://blog.csdn.net/jacoby_fire/article/details/83376937

因为公司目前是在做一个交易所的项目页面中需要用到k线图之前用了echart的k线太过简陋了参考了另外几个同级网站决定用tradingview这个专业的股票交易所类的图表库。

从上周开始就研究tradingview一直到昨天才算是勉强能够在本地运行真的是不容易。下面来说说使用过程中遇到的一些坑。

1、tradingview虽然是开源免费可也是仅限于一些基本的图表服务但这也基本上够用了。如果你要定制高级别的那需要联系官方。使用之前需要进入tradingview官网去申请他的chart_libraryhttps://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然后就是无休止的查找了百度googleStack Overflow等等。 前两天基本一无所获找了些但是与我想要的不对口。昨天无意间找到了这个 https://github.com/webdatavisualdev/vue-tradingview 简直如获至宝啊。结合我的项目代码很顺利就完成了数据对接。 里面的createFeed不是很明白没有注释read.me也没啥东西有点蛋疼。

好了看效果把 

因为数据只有这些所以看着有点单薄后期数据多了就ok了。

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

2019/1、18号更新

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

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

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

效果

简直不能再棒