首页 > 文章 > tradingview踩坑心得

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_librarydatafeeds,只需要引入这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方法,自己设定默认一次查询数据的时段。还有rangeStartDaterangeEndDate的格式,默认的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是个很强大的插件,我摸索的过程中也是收益于很多大佬们踩坑的经验,这里也把自己的心得分享下,不过很多场景,在需求实现之后,我也没探索得更深入了,可能有些地方描述得也不准确_(:з」∠)_
  希望能给大家提供帮助~

时间:2018-11-14 17:08:31阅读(3611)
联系我们 - 留言反馈
© 2017 版权所有 鲁ICP备17052893号