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