tradingview踩坑心得

龙听

一、简介

　　tradingview是一个非常强大的图表插件，主要用于经济类的图表展示，尤其是k线图，很多行情网站的k线都可以看到是用的tradingview。最近公司有项目用到了这款插件，在摸索过程中踩了很多的坑，这里就总结一下，写一篇踩坑的心得，不过前端的技术栈很复杂，tradingview的功能也非常多，所以这里只说下我用的框架和业务接触到的功能，大家多多交流学习～

　　首先是申请使用，使用是免费的（当然申请完成之后，也可以付费升级成专业版），申请流程有点繁琐，要以公司的名义提交申请，之后会收到协议，然后打印、签字、盖章再拍照发回去什么的。。通过之后就可以收到tradingview的github地址了，可以把代码clone下来了，之后也可以随着官方的发布随时更新，还是很方便的。

　　然后就可以开始上手使用了，这里先贴一下官方的攻略：

      https://github.com/zlq4863947/tradingViewWikiCn    //wiki是官方在维护的开发文档，不过是英文的，这是大佬翻译的中文版

      https://github.com/tradingview/charting-library-examples     //这是官方给出的demo，包含了现在各大主流前端框架的写法

二、上手使用
1.插件引入

　　得到tradingview的代码后，首先就是把文件引入自己的项目中，tradingview的项目中有很多开发用的文件，所以为了项目精简，没必要像demo样例中那样整个文件都拷到自己的项目中，核心文件就2个charting_library和datafeeds，只需要引入这2个文件即可，而且datafeeds中的代码会打包，所以引入dist中的文件就可以了。公司的项目是采用vue框架，用的vue-cli3全家桶的模板，所以是在public文件夹中存放这2个文件夹，在整个项目的入口文件index.html中引入：


2.组件化
其实官方的demo已经非常完整了，建立一个组件，然后直接把demo中初始化的代码复制粘贴过去就能跑了。。
　　之前有一个“there is no such iframe”的坑，不过我写这篇文章的时候，官方已经把它修复好了。。这个坑当时踩了也是填了好久，因为tradingview在展示的时候，会自己生成一个iframe，主要内容就在这个iframe中，spa的架构，比如路由切换，组件会destroy掉，但是被干掉的iframe并不能再次根据索引id生成，必须要刷新页面才能恢复。当时有采用非组件引入的方式解决，是再放到一个iframe里面，不过需要配置子级域名解决跨域。。

三、样式调整

　  tradingview的样式调整基本上是通过修改配置项来完成的，部分需要深入定制的再自己写css。采用demo的那种初始化写法的话，这些配置项就在widgetOptions中写入，大部分关于样式的配置修改参考文档就可以，这里说下文档里面写的比较模糊的，和踩过坑的。
1.theme
　　官方支持的主题配色是2个，light和dark，在theme配置项中配置了就可以了。要注意的是，在配置了主题之后如果要再修改某些样式，标签的类名会带有主题的名字，比如：


2.loading_screen
　　插件载入时的背景颜色，就是页面加载时，tradingview的模块并不会立即加载出来，会有一段loading的时间，这个配置项是修改这段等待时间时，插件区域的背景色。。
　　loading_screen: { backgroundColor: "#052349" }　　//注意是backgroundColor，不是和css里的写法一样
　　关于背景颜色的设置还有一个坑，是在定制自己的css时会经常遇到，tradingview里对背景色的写法不统一，background和background-color混着用的。。会经常遇到自己写了一个背景色想覆盖掉默认的，结果怎么都不生效。。

3.disabled_features
　　禁用属性，不想展示的内容、按钮之类的，在这个配置项中进行配置，不过有些配置名称解释的很模糊，要自己多试试看。。说2个可能很多人都会碰到的坑：

　　k线图和柱状图分离
　　默认情况下，直接生成出来的是一张图表，但是有2部分，曲线图和柱状图，曲线默认是展示蜡烛线，也就是k线了，这是行情图表最常见的模板，价格走势和交易量等等，但是这2部分融合在一张表中，有时柱状图和k线图就会重合起来，所以要把k线和柱状图分离开，成为2张独立的图表，但是依然展示在一个区域中。而这部分的设置居然是在disabled_features里面。。禁用"volume_force_overlay"属性就可以了：
　　

　　图表下方的工具栏
　　图表下方的工具栏名称叫"timeframes_toolbar"，叫时间间隔组件的工具栏，就是选择1分钟行情、1小时行情的按钮（header工具栏中也有一个这样的按钮，但是header工具栏在全屏模式下不展示）但是坐标设置，时钟等等按钮都在这个工具栏上。。所以，即使不需要选择时间间隔的按钮，还是有必要把这个工具栏展示出来的，不要将这个属性禁用。
　　关于时间间隔按钮的展示内容要在另一个属性time_frames里面配置


4.overrides
　　修改图表插件的默认样式，比如整个图表的背景色，图表标题是否默认展示，这个配置一定要写在studies_overrides配置项前面！不然不会生效。


5.studies_overrides
　　修改图表中的默认样式，比如数字的颜色等等。注意要写在overrides后面。。


6.custom_css_url
　　自定义的css文件，通过这个配置引入，文件要放到tradingview插件的同级目录下，用相对路径引入：

　　在这个css文件里，就可以自己写css代码覆盖掉插件默认的一些样式了，但是tradingview中有很多样式是直接生成出的行内样式，感觉无解，比如header的高度。。

四、数据方法
将展示的行情数据变为自己业务的数据。tradingview有提供一套完整的数据订阅的方法，代码就是datafeeds文件夹中那些没有打包的文件，之后版本更新还提供了一套ts写法的版本，修改的时候就是改写这些文件里的某些方法，之后再打包，将打包生成的bundle.js替换掉之前的。不过这样很麻烦，可以参考下rollup.config文件的配置，在dev环境下执行打包命令，会生成一个没有压缩的bundle.js文件，直接在bundle.js中修改，之后上线时再自己压缩一下。
1._configurationReadyPromise
　　_configurationReadyPromise是config文件的配置项，采用默认udf情况下，config的配置是去请求config接口返回的内容，但是我们会直接将配置写在前端代码中（如果架构是同样采用这种后端提供config配置的方法，就模仿demo的config接口的数据结构就可以了），就要将请求config接口的代码修改掉，或者直接修改最后生成配置的部分，将接口返回的内容注释掉，直接采用我们自己在前端代码写好的配置：

　　在defaultConfiguration中的配置比较重要的就是supported_resolutions，这个配置项展示的就是header工具栏中时间间隔选择按钮的下拉菜单的内容。时间间隔的代码是固定的，1分钟就是1，1小时是60，参考wiki文档。



2.resolveSymbol
　　resolveSymbol是图表内容的配置项，比如图表的名称，数值的精度等等，默认的udf配置，resolveSymbol的配置内容是请求symbols接口获取的，同样修改掉，我们也是直接将配置写在前端代码中，接口的请求注释掉，将我们自己配置的数据放到onResultReady方法中就可以了，需要注意的是onResultReady方法的回调，要求是异步的，所以要用setTimeout方法包装一下：

　　这里的配置说下时区和精度，

timezone
　　时区不对的话，数据的时间对应不上，可能会导致无法显示，或者显示出来的k线是乱的。中国的时区是"Asia/Shanghai"，不是东八区，beijing这种名字。。
pricescale
　　小数点后几位的配置，100就是保留2位小数，这个配置也是比较奇怪的。。

3.getBars
巨坑来了！getBars方法就是数据订阅的核心方法了，将这个方法中默认的请求替换成自己的接口，先说下这个方法的入参：
　　HistoryProvider.prototype.getBars = function (symbolInfo, resolution, rangeStartDate, rangeEndDate)

　　这里要注意数据的转换，比较麻烦的是resolution，请求的时间间隔代码在插件中是固定的，但是这通常会与我们自己的后端接口定义的参数不一样，所以要先进行转换，将1、60、1D这些值转换成自己后端接口需要的标志变量。
　　关于起止时间的查询，可以修改periodLengthSeconds方法，自己设定默认一次查询数据的时段。还有rangeStartDate和rangeEndDate的格式，默认的udf方法中是都转了parseInt()，在_updateDataForSubscriber方法中修改：

　　之后就是修改接口数据了，这部分反倒是最简单的了，将默认的变量替换为自己接口返回的变量就可以了，最后把数据push到bars中，展示我们自己数据的k线图就跑起来了～
　　这里的坑是订阅数据的2种方式，一种是官方提供的udf，也就是脉冲式，固定时间更新数据，由前端发起请求，比如1分钟行情，就会固定10秒请求一次数据接口，根据起止时间查询，更新数据；另一种是websocket的方式，也就是长链接，数据的更新由后端发起，不需要前端固定间隔不停地去请求，数据发生改变时，后端主动推送给前端，更新数据。
　　脉冲式的方法，按照原本的udf方法改成自己的接口请求就可以了，数据订阅、渲染等等插件有全套流程，可以说自己只需要提供个url就能一键生成了。。ws的话，根据官方文档的指引，要采用JSAPI的方式，其实就是将udf中的方法大量改写，封装出自己的逻辑，自己监听数据的更新，当要更新时，自己去执行图表渲染的方法，比如onResetCacheNeededCallback、resetData这些，这里推荐个大佬的demo:
　　https://github.com/webdatavisualdev/vue-tradingview

五、其他
　　tradingview是个很强大的插件，我摸索的过程中也是收益于很多大佬们踩坑的经验，这里也把自己的心得分享下，不过很多场景，在需求实现之后，我也没探索得更深入了，可能有些地方描述得也不准确_(:з」∠)_
　　希望能给大家提供帮助～