前言：相信做過交易及證券股票項(xiàng)目的小伙伴都遇到過要寫k線及深度圖組件情況，能做k線的插件很多?我們從echarts?和highcharts?甚至其他的插件能找到很多能做k線的，但是，在業(yè)內(nèi)大家都知道tradingview是k線這塊做的非常完善的，所以大公司一般都采用tradingview來制作k線，但現(xiàn)在網(wǎng)上的tradingview的資料和教程較少，今天給大家講講tradingview的詳細(xì)的接入到web端的使用教程
好了不多說?直接上教程
第一步：我們知道tradingview不是開源的?首頁我們得去tradingview的官網(wǎng)上去申請(qǐng)我們要使用他們的控件?主要是拿到tradingview的api文檔
第二步：然后我們將文檔還有demo拿到后其中demo里面有我們需要的庫文件，通過script引入到我們的項(xiàng)目里面來?然后 我們先了解tradingview?可以使用的模式?文檔介紹?可以使用兩種模式?一種是輪詢的模式一種是用webscoket?的模式?我在項(xiàng)目里面用的是后者?webscoket模式的?所以這里講講這個(gè)模式?
第三步：熟悉了文檔之后我們先把基本的配置弄清楚，其中比較重要的是使用適配器?我理解的適配器就是?獲取到后臺(tái)數(shù)據(jù)后?通過適配器把數(shù)據(jù)傳給tradingview? 然后你就可以不管了?接下來就是tradingview的事了?好了?我們就重點(diǎn)講講適配器datafeed怎么構(gòu)造我們的數(shù)據(jù)的?
第四步：了解使用tradingview要用的幾個(gè)基本方法?onReady（）?chartReady（）?剛剛講的基本配置都是在onReady方法里面的?chartReady是圖表繪制完成后調(diào)用的方法?第三步說的detafeed?適配器就是應(yīng)該放在onReady方法里面的?
第五步：重點(diǎn)就是適配器的編寫了?這里把適配器通過一個(gè)構(gòu)造函數(shù)定義?封裝你需要的幾個(gè)參數(shù)，上圖可以看到然后適配器主要有兩個(gè)部份組成，一部份是初始化出具?也就是歷史交易數(shù)據(jù)，這里通過文檔里面提供的getBars?然后寫在getBars里面?
第六步：就是數(shù)據(jù)的渲染了?實(shí)時(shí)數(shù)據(jù)的渲染放在subscribeBars?方法里面?上代碼
基本上完成以上的步驟?你可以可渲染出k線圖了?像這樣
當(dāng)然里面還有很多的細(xì)節(jié)? 這里沒有做太多的描述?只做了大致需要的步驟?如果想知道具體實(shí)現(xiàn)步驟可以給我留言
