tradingview踩坑心得
阿新 • • 發佈:2018-11-14
一、簡介
tradingview是一個非常強大的圖表外掛,主要用於經濟類的圖表展示,尤其是k線圖,很多行情網站的k線都可以看到是用的tradingview。最近公司有專案用到了這款外掛,在摸索過程中踩了很多的坑,這裡就總結一下,寫一篇踩坑的心得,不過前端的技術棧很複雜,tradingview的功能也非常多,所以這裡只說下我用的框架和業務接觸到的功能,大家多多交流學習~
首先是申請使用,使用是免費的(當然申請完成之後,也可以付費升級成專業版),申請流程有點繁瑣,要以公司的名義提交申請,之後會收到協議,然後列印、簽字、蓋章再拍照發回去什麼的。。通過之後就可以收到tradingview的github地址了,可以把程式碼clone下來了,之後也可以隨著官方的釋出隨時更新,還是很方便的。
然後就可以開始上手使用了,這裡先貼一下官方的攻略:
https://github.com/zlq4863947/tradingViewWikiCn //wiki是官方在維護的開發文件,不過是英文的,這是大佬翻譯的中文版
https://github.com/tradingview/charting-library-examples //這是官方給出的demo,包含了現在各大主流前端框架的寫法 二、上手使用得到tradingview的程式碼後,首先就是把檔案引入自己的專案中,tradingview的專案中有很多開發用的檔案,所以為了專案精簡,沒必要像demo樣例中那樣整個檔案都拷到自己的專案中,核心檔案就2個charting_library和datafeeds,只需要引入這2個檔案即可,而且datafeeds中的程式碼會打包,所以引入dist中的檔案就可以了。公司的專案是採用vue框架,用的vue-cli3全家桶的模板,所以是在public資料夾中存放這2個資料夾,在整個專案的入口檔案index.html中引入:
2.元件化
在這個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方法,自己設定預設一次查詢資料的時段。還有rangeStartDate和rangeEndDate的格式,預設的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是個很強大的外掛,我摸索的過程中也是收益於很多大佬們踩坑的經驗,這裡也把自己的心得分享下,不過很多場景,在需求實現之後,我也沒探索得更深入了,可能有些地方描述得也不準確_(:з」∠)_
希望能給大家提供幫助~