tradingview踩坑心得
[p=28, 2, left][size=18px][b]一、简介[/b][/size][/p][p=28, 2, left] tradingview是一个非常强大的图表插件，主要用于经济类的图表展示，尤其是k线图，很多行情网站的k线都可以看到是用的tradingview。最近公司有项目用到了这款插件，在摸索过程中踩了很多的坑，这里就总结一下，写一篇踩坑的心得，不过前端的技术栈很复杂，tradingview的功能也非常多，所以这里只说下我用的框架和业务接触到的功能，大家多多交流学习～[/p][p=28, 2, left] 首先是申请使用，使用是免费的（当然申请完成之后，也可以付费升级成专业版），申请流程有点繁琐，要以公司的名义提交申请，之后会收到协议，然后打印、签字、盖章再拍照发回去什么的。。通过之后就可以收到tradingview的github地址了，可以把代码clone下来了，之后也可以随着官方的发布随时更新，还是很方便的。[/p][p=28, 2, left] 然后就可以开始上手使用了，这里先贴一下官方的攻略：[/p][p=28, 2, left] [url=https://github.com/zlq4863947/tradingViewWikiCn]https://github.com/zlq4863947/tradingViewWikiCn[/url] //wiki是官方在维护的开发文档，不过是英文的，这是大佬翻译的中文版[/p][font="][size=14px] [url=https://github.com/tradingview/charting-library-examples]https://github.com/tradingview/charting-library-examples[/url] //这是官方给出的demo，包含了现在各大主流前端框架的写法[/size][/font]
[font="][size=14px][size=18px][b]二、上手使用[/b][/size][/size][/font]
[font="][size=14px][size=18px][b][size=16px]1.插件引入[/size]
[/b][/size][/size][/font]
[font="][size=14px][size=18px][size=14px] 得到tradingview的代码后，首先就是把文件引入自己的项目中，tradingview的项目中有很多开发用的文件，所以为了项目精简，没必要像demo样例中那样整个文件都拷到自己的项目中，核心文件就2个[b]charting_library[/b]和[b]datafeeds，[/b]只需要引入这2个文件即可，而且[b]datafeeds[/b]中的代码会打包，所以引入dist中的文件就可以了。公司的项目是采用vue框架，用的vue-cli3全家桶的模板，所以是在public文件夹中存放这2个文件夹，在整个项目的入口文件index.html中引入：[/size][/size][/size][/font]
[font="][size=14px][size=18px][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170831314375.png[/img][/size][/size]
[/size][/font]
[font="][size=14px][size=16px][b]2.组件化[/b][/size][/size][/font]
[font="][size=14px]其实官方的demo已经非常完整了，建立一个组件，然后直接把demo中初始化的代码复制粘贴过去就能跑了。。[/size][/font]
[font="][size=14px] 之前有一个“there is no such iframe”的坑，不过我写这篇文章的时候，官方已经把它修复好了。。这个坑当时踩了也是填了好久，因为tradingview在展示的时候，会自己生成一个iframe，主要内容就在这个iframe中，spa的架构，比如路由切换，组件会destroy掉，但是被干掉的iframe并不能再次根据索引id生成，必须要刷新页面才能恢复。当时有采用非组件引入的方式解决，是再放到一个iframe里面，不过需要配置子级域名解决跨域。。[/size][/font]
[font="][size=14px][size=18px][b]三、样式调整[/b][/size][size=18px]
[/size][/size][/font]
[font="][size=14px][size=18px][size=14px][b] tradingview[/b]的样式调整基本上是通过修改配置项来完成的，部分需要深入定制的再自己写css。采用demo的那种初始化写法的话，这些配置项就在widgetOptions中写入，[/size][/size][size=18px][size=14px]大部分关于样式的配置修改参考文档就可以，这里说下文档里面写的比较模糊的，和踩过坑的。[/size][/size][/size][/font]
[font="][size=14px][size=16px][b]1.theme[/b][/size][/size][/font]
[font="][size=14px][size=18px][size=14px] 官方支持的主题配色是2个，light和dark，在theme[/size][/size][size=18px][size=14px]配置项中配置了就可以了。要注意的是，在配置了主题之后如果要再修改某些样式，标签的类名会带有主题的名字，比如：[/size][/size][/size][/font]
[font="][size=14px][size=18px][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170831430586.png[/img][/size][/size][/size][/font]
[font="][size=14px][size=16px][b]2.loading_screen[/b][/size][/size][/font]
[font="][size=14px] 插件载入时的背景颜色，就是页面加载时，tradingview的模块并不会立即加载出来，会有一段loading的时间，这个配置项是修改这段等待时间时，插件区域的背景色。。[/size][/font]
[font="][size=14px] [b]loading_screen: { backgroundColor: "#052349" } //[/b]注意是backgroundColor，不是和css里的写法一样[/size][/font]
[font="][size=14px] 关于背景颜色的设置还有一个坑，是在定制自己的css时会经常遇到，tradingview里对背景色的写法不统一，background和background-color混着用的。。会经常遇到自己写了一个背景色想覆盖掉默认的，结果怎么都不生效。。[/size][/font]
[font="][size=14px][size=16px][b]3.disabled_features[/b][/size][/size][/font]
[font="][size=14px] 禁用属性，不想展示的内容、按钮之类的，在这个配置项中进行配置，不过有些配置名称解释的很模糊，要自己多试试看。。说2个可能很多人都会碰到的坑：[/size][/font]
[font="][size=14px][b] k线图和柱状图分离[/b][/size][/font]
[font="][size=14px] 默认情况下，直接生成出来的是一张图表，但是有2部分，曲线图和柱状图，曲线默认是展示蜡烛线，也就是k线了，这是行情图表最常见的模板，价格走势和交易量等等，但是这2部分融合在一张表中，有时柱状图和k线图就会重合起来，所以要把k线和柱状图分离开，成为2张独立的图表，但是依然展示在一个区域中。而这部分的设置居然是在disabled_features里面。。禁用[b]"volume_force_overlay"[/b]属性就可以了：[/size][/font]
[font="][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170831517500.png[/img] [/size][/font]
[font="][size=14px] [b]图表下方的工具栏[/b][/size][/font]
[font="][size=14px] 图表下方的工具栏名称叫[b]"timeframes_toolbar"[/b]，叫时间间隔组件的工具栏，就是选择1分钟行情、1小时行情的按钮（header工具栏中也有一个这样的按钮，但是header工具栏在全屏模式下不展示）但是坐标设置，时钟等等按钮都在这个工具栏上。。所以，即使不需要选择时间间隔的按钮，还是有必要把这个工具栏展示出来的，不要将这个属性禁用。
关于时间间隔按钮的展示内容要在另一个属性time_frames里面配置
[/size][/font]
[font="][size=14px][size=16px][b]4.overrides[/b][/size][/size][/font]
[font="][size=14px] 修改图表插件的默认样式，比如整个图表的背景色，图表标题是否默认展示，[b]这个配置一定要写在studies_overrides配置项前面！[/b]不然不会生效。[/size][/font]
[font="][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170831587813.png[/img][/size][/font]
[font="][size=14px][size=16px][b]5.studies_overrides[/b][/size][/size][/font]
[font="][size=14px] 修改图表中的默认样式，比如数字的颜色等等。注意要写在overrides后面。。[/size][/font]
[font="][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170831663985.png[/img][/size][/font]
[font="][size=14px][size=16px][b]6.custom_css_url[/b][/size][/size][/font]
[font="][size=14px] 自定义的css文件，通过这个配置引入，文件要放到tradingview插件的同级目录下，用相对路径引入：[/size][/font]
[font="][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170831878828.png[/img][p=28, 2, left] 在这个css文件里，就可以自己写css代码覆盖掉插件默认的一些样式了，但是tradingview中有很多样式是直接生成出的行内样式，感觉无解，比如header的高度。。[/p][/size][/font]
[font="][size=14px][size=18px][b]四、数据方法[/b][/size][/size][/font]
[font="][size=14px][size=18px][size=14px]将展示的行情数据变为[/size][size=14px]自己业务的数据。tradingview有提供一套完整的数据订阅的方法，代码就是[b]datafeeds[/b]文件夹中那些没有打包的文件，之后版本更新还提供了一套ts写法的版本，修改的时候就是改写这些文件里的某些方法，之后再打包，将打包生成的[/size][/size][b]bundle.js[/b]替换掉之前的。不过这样很麻烦，可以参考下rollup.config文件的配置，在dev环境下执行打包命令，会生成一个没有压缩的[b]bundle.js[/b]文件，直接在bundle.js中修改，之后上线时再自己压缩一下。[/size][/font]
[font="][size=14px][size=16px][b]1._configurationReadyPromise[/b][/size][/size][/font]
[font="][size=14px] _configurationReadyPromise是config文件的配置项，采用默认udf情况下，config的配置是去请求config接口返回的内容，但是我们会直接将配置写在前端代码中（如果架构是同样采用这种后端提供config配置的方法，就模仿demo的config接口的数据结构就可以了），就要将请求config接口的代码修改掉，或者直接修改最后生成配置的部分，将接口返回的内容注释掉，直接采用我们自己在前端代码写好的配置：[/size][/font]
[font="][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170831956953.png[/img][p=28, 2, left][img=790,28]http://image.morecoder.com/article/201811/20181114170832037032.png[/img][/p] 在[b]defaultConfiguration[/b]中的配置比较重要的就是[b]supported_resolutions[/b]，这个配置项展示的就是header工具栏中时间间隔选择按钮的下拉菜单的内容。时间间隔的代码是固定的，1分钟就是1，1小时是60，参考wiki文档。
[/size][/font]
[font="][size=14px][img=790,28]http://note.youdao.com/src/59DFD2E12FA84E3BBF11CD0B7F43A978[/img][/size][/font]
[font="][size=14px][size=16px][b]2.resolveSymbol[/b][/size][/size][/font]
[font="][size=14px] [b]resolveSymbol[/b]是图表内容的配置项，比如图表的名称，数值的精度等等，默认的udf配置，resolveSymbol的配置内容是请求symbols接口获取的，同样修改掉，我们也是直接将配置写在前端代码中，接口的请求注释掉，将我们自己配置的数据放到onResultReady方法中就可以了，需要注意的是onResultReady方法的回调，要求是异步的，所以要用setTimeout方法包装一下：[/size][/font]
[font="][size=14px][img=790,28]http://image.morecoder.com/article/201811/20181114170832113203.png[/img][p=28, 2, left] 这里的配置说下时区和精度，[/p][/size][/font]
[font="][size=14px][b]timezone[/b][/size][/font]
[font="][size=14px] 时区不对的话，数据的时间对应不上，可能会导致无法显示，或者显示出来的k线是乱的。中国的时区是[b]"Asia/Shanghai"[/b]，不是东八区，beijing这种名字。。[/size][/font]
[font="][size=14px][b]pricescale[/b][/size][/font]
[font="][size=14px] 小数点后几位的配置，100就是保留2位小数，这个配置也是比较奇怪的。。[/size][/font]
[font="][size=14px][size=16px][b]3.getBars[/b][/size][/size][/font]
[font="][size=14px][size=16px][size=14px]巨坑来了！getBars方法就是数据订阅的核心方法了，将这个方法中默认的请求替换成自己的接口，先说下这个方法的入参：[/size][/size][/size][/font]
[font="][size=14px][b] HistoryProvider.prototype.getBars = function (symbolInfo, resolution, rangeStartDate, rangeEndDate)[/b]
[/size][/font]
[font="][size=14px][size=16px][size=14px] 这里要注意数据的转换，比较麻烦的是[b]resolution[/b]，请求的时间间隔代码在插件中是固定的，但是这通常会与我们自己的后端接口定义的参数不一样，所以要先进行转换，将1、60、1D这些值转换成自己后端接口需要的标志变量。[/size][/size][/size][/font]
[font="][size=14px][size=16px][size=14px] 关于起止时间的查询，可以修改[b]periodLengthSeconds[/b]方法，自己设定默认一次查询数据的时段。还有[b]rangeStartDate[/b]和[b]rangeEndDate[/b]的格式，默认的udf方法中是都转了parseInt()[/size][/size][size=16px][size=14px]，在[/size][/size][b]_updateDataForSubscriber[/b]方法中修改：[/size][/font]
[font="][size=14px] [img=790,28]http://image.morecoder.com/article/201811/20181114170832225508.png[/img][p=28, 2, left][img=790,28]http://image.morecoder.com/article/201811/20181114170832336836.png[/img][/p]
[/size][/font]
[font="][size=14px] 之后就是修改接口数据了，这部分反倒是最简单的了，将默认的变量替换为自己接口返回的变量就可以了，最后把数据push到bars中，展示我们自己数据的k线图就跑起来了～[/size][/font]
[font="][size=14px] 这里的坑是订阅数据的2种方式，一种是官方提供的udf，也就是脉冲式，固定时间更新数据，由前端发起请求，比如1分钟行情，就会固定10秒请求一次数据接口，根据起止时间查询，更新数据；另一种是websocket的方式，也就是长链接，数据的更新由后端发起，不需要前端固定间隔不停地去请求，数据发生改变时，后端主动推送给前端，更新数据。[/size][/font]
[font="][size=14px] 脉冲式的方法，按照原本的udf方法改成自己的接口请求就可以了，数据订阅、渲染等等插件有全套流程，可以说自己只需要提供个url就能一键生成了。。ws的话，根据官方文档的指引，要采用JSAPI的方式，其实就是将udf中的方法大量改写，封装出自己的逻辑，自己监听数据的更新，当要更新时，自己去执行图表渲染的方法，比如onResetCacheNeededCallback、resetData这些，这里推荐个大佬的demo:[/size][/font]
[font="][size=14px] [url]https://github.com/webdatavisualdev/vue-tradingview[/url][/size][/font]
[font="][size=14px][p=28, 2, left][b][size=18px]五、其他[/size][/b]
tradingview是个很强大的插件，我摸索的过程中也是收益于很多大佬们踩坑的经验，这里也把自己的心得分享下，不过很多场景，在需求实现之后，我也没探索得更深入了，可能有些地方描述得也不准确_(:з」∠)_
希望能给大家提供帮助～[/p][/size][/font]
页:
[1]