tradingview使用心得

原创 2023-04-07 10:18:16 2.8w 阅读 AI写同款

收录于

工作总结

jacoby_fire

码龄10年墨衍会员 · AI 创作全网分发

231粉丝32篇原创

关注

TradingView 使用方法是一个价格图表和分析软件，提供免费和付费选项，为优秀的交易技术分析金融图表，拥有丰富的技术指标库，并拥有可以直接交易的交易终端插件。阅读详情

AI摘要

本文详细介绍了使用TradingView图表库的过程，包括申请流程、本地运行、数据对接及均线和水平线的实现方法，适合用于交易所项目的图表展示。

因为公司目前是在做一个交易所的项目，页面中需要用到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接口来获取数据的。这有很大的局限性，如果你的团队后台人手够的话，也完全可以参照文档, 去开发一个接口供使用，这样前端代码会少很多。
3、当然，如果像我这样，因为后台框架的限制，无法给我一个适配UDF的接口，那就很蛋疼了。
我现在所希望的是，能将我的数据放进图表中，因为之前用echart的时候已经有数据接口了，数据返回时没有问题的。
官方文档是让使用JS API，可是说实话我到现在也没有get到JS API的魅力。官方文档中对于JS API是这样解释的：

	这是啥? 一套JS方法（以实现指定的公共接口）。
	我该怎么使用它?: 您应该创建一个JS对象，它将以某种方式接收数据，并响应图表库的请求。
	在图表库中实现了数据缓存（历史和商品信息）。当您创建一个实现接口的对象时，只需将它传递给图表库Widget的构造函数。

真心觉得看不懂，这里面的某种方式是什么，创建对象之后的传递方法又是什么？一脸懵逼，如果有大佬看到我的文章，还希望不吝赐教。

4、ok，然后就是无休止的查找了，百度，google，Stack Overflow等等。前两天基本一无所获，找了些但是与我想要的不对口。昨天无意间找到了这个（一个domo ），简直如获至宝啊。结合我的项目代码，很顺利就完成了数据对接。里面的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'
                    })
  })

效果：
在这里插入图片描述
简直不能再棒！！！