前言：相信做过交易及证券股票项目的小伙伴都遇到过要写k线及深度图组件情况，能做k线的插件很多 我们从echarts 和highcharts 甚至其他的插件能找到很多能做k线的，但是，在业内大家都知道tradingview是k线这块做的非常完善的，所以大公司一般都采用tradingview来制作k线，但现在网上的tradingview的资料和教程较少，今天给大家讲讲tradingview的详细的接入到web端的使用教程
好了不多说 直接上教程
第一步：我们知道tradingview不是开源的 首页我们得去tradingview的官网上去申请我们要使用他们的控件 主要是拿到tradingview的api文档
第二步：然后我们将文档还有demo拿到后其中demo里面有我们需要的库文件，通过script引入到我们的项目里面来 然后 我们先了解tradingview 可以使用的模式 文档介绍 可以使用两种模式 一种是轮询的模式一种是用webscoket 的模式 我在项目里面用的是后者 webscoket模式的 所以这里讲讲这个模式
第三步：熟悉了文档之后我们先把基本的配置弄清楚，其中比较重要的是使用适配器 我理解的适配器就是 获取到后台数据后 通过适配器把数据传给tradingview 然后你就可以不管了 接下来就是tradingview的事了 好了 我们就重点讲讲适配器datafeed怎么构造我们的数据的
第四步：了解使用tradingview要用的几个基本方法 onReady（） chartReady（） 刚刚讲的基本配置都是在onReady方法里面的 chartReady是图表绘制完成后调用的方法 第三步说的detafeed 适配器就是应该放在onReady方法里面的
像这样
第五步：重点就是适配器的编写了 这里把适配器通过一个构造函数定义 封装你需要的几个参数，上图可以看到然后适配器主要有两个部份组成，一部份是初始化出具 也就是历史交易数据，这里通过文档里面提供的getBars 然后写在getBars里面
历史数据
第六步：就是数据的渲染了 实时数据的渲染放在subscribeBars 方法里面 上代码
这里注意tradingview需要的数据格式 你传过去的数据格式要和tradingview要符合
基本上完成以上的步骤 你可以可渲染出k线图了 像这样
当然里面还有很多的细节 这里没有做太多的描述 只做了大致需要的步骤 如果想知道具体实现步骤可以给我留言
网友评论