一、簡介

　　tradingview是一個非常強大的圖表外掛，主要用於經濟類的圖表展示，尤其是k線圖，很多行情網站的k線都可以看到是用的tradingview。最近公司有專案用到了這款外掛，在摸索過程中踩了很多的坑，這裡就總結一下，寫一篇踩坑的心得，不過前端的技術棧很複雜，tradingview的功能也非常多，所以這裡只說下我用的框架和業務接觸到的功能，大家多多交流學習～

　　首先是申請使用，使用是免費的（當然申請完成之後，也可以付費升級成專業版），申請流程有點繁瑣，要以公司的名義提交申請，之後會收到協議，然後列印、簽字、蓋章再拍照發回去什麼的。。通過之後就可以收到tradingview的github地址了，可以把程式碼clone下來了，之後也可以隨著官方的釋出隨時更新，還是很方便的。

　　然後就可以開始上手使用了，這裡先貼一下官方的攻略：

      https://github.com/zlq4863947/tradingViewWikiCn    //wiki是官方在維護的開發文件，不過是英文的，這是大佬翻譯的中文版

       https://github.com/tradingview/charting-library-examples     //這是官方給出的demo，包含了現在各大主流前端框架的寫法   二、上手使用

1.外掛引入
　　得到tradingview的程式碼後，首先就是把檔案引入自己的專案中，tradingview的專案中有很多開發用的檔案，所以為了專案精簡，沒必要像demo樣例中那樣整個檔案都拷到自己的專案中，核心檔案就2個charting_library和datafeeds，只需要引入這2個檔案即可，而且datafeeds中的程式碼會打包，所以引入dist中的檔案就可以了。公司的專案是採用vue框架，用的vue-cli3全家桶的模板，所以是在public資料夾中存放這2個資料夾，在整個專案的入口檔案index.html中引入：

 

2.元件化

　　其實官方的demo已經非常完整了，建立一個元件，然後直接把demo中初始化的程式碼複製貼上過去就能跑了。。 　　之前有一個“there is no such iframe”的坑，不過我寫這篇文章的時候，官方已經把它修復好了。。這個坑當時踩了也是填了好久，因為tradingview在展示的時候，會自己生成一個iframe，主要內容就在這個iframe中，spa的架構，比如路由切換，元件會destroy掉，但是被幹掉的iframe並不能再次根據索引id生成，必須要重新整理頁面才能恢復。當時有采用非元件引入的方式解決，是再放到一個iframe裡面，不過需要配置子級域名解決跨域。。   三、樣式調整 　  　  tradingview的樣式調整基本上是通過修改配置項來完成的，部分需要深入定製的再自己寫css。採用demo的那種初始化寫法的話，這些配置項就在widgetOptions中寫入， 大部分關於樣式的配置修改參考文件就可以，這裡說下文件裡面寫的比較模糊的，和踩過坑的。 1.theme 　　官方支援的主題配色是2個，light和dark，在theme 配置項中配置了就可以了。要注意的是，在配置了主題之後如果要再修改某些樣式，標籤的類名會帶有主題的名字，比如：   2.loading_screen 　　外掛載入時的背景顏色，就是頁面載入時，tradingview的模組並不會立即加載出來，會有一段loading的時間，這個配置項是修改這段等待時間時，外掛區域的背景色。。 　　 loading_screen: { backgroundColor: "#052349" }　　//注意是backgroundColor，不是和css裡的寫法一樣 　　關於背景顏色的設定還有一個坑，是在定製自己的css時會經常遇到，tradingview裡對背景色的寫法不統一，background和background-color混著用的。。會經常遇到自己寫了一個背景色想覆蓋掉預設的，結果怎麼都不生效。。   3.disabled_features 　　禁用屬性，不想展示的內容、按鈕之類的，在這個配置項中進行配置，不過有些配置名稱解釋的很模糊，要自己多試試看。。說2個可能很多人都會碰到的坑：   　　k線圖和柱狀圖分離 　　預設情況下，直接生成出來的是一張圖表，但是有2部分，曲線圖和柱狀圖，曲線預設是展示蠟燭線，也就是k線了，這是行情圖表最常見的模板，價格走勢和交易量等等，但是這2部分融合在一張表中，有時柱狀圖和k線圖就會重合起來，所以要把k線和柱狀圖分離開，成為2張獨立的圖表，但是依然展示在一個區域中。而這部分的設定居然是在disabled_features裡面。。禁用 "volume_force_overlay"屬性就可以了： 　　   　　 圖表下方的工具欄 　　圖表下方的工具欄名稱叫 "timeframes_toolbar"，叫時間間隔元件的工具欄，就是選擇1分鐘行情、1小時行情的按鈕（header工具欄中也有一個這樣的按鈕，但是header工具欄在全屏模式下不展示）但是座標設定，時鐘等等按鈕都在這個工具欄上。。所以，即使不需要選擇時間間隔的按鈕，還是有必要把這個工具欄展示出來的，不要將這個屬性禁用。 　　關於時間間隔按鈕的展示內容要在另一個屬性time_frames裡面配置   4.overrides 　　修改圖表外掛的預設樣式，比如整個圖表的背景色，圖表標題是否預設展示， 這個配置一定要寫在studies_overrides配置項前面！不然不會生效。   5.studies_overrides 　　修改圖表中的預設樣式，比如數字的顏色等等。注意要寫在overrides後面。。   6.custom_css_url 　　自定義的css檔案，通過這個配置引入，檔案要放到tradingview外掛的同級目錄下，用相對路徑引入：

　　在這個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是個很強大的外掛，我摸索的過程中也是收益於很多大佬們踩坑的經驗，這裡也把自己的心得分享下，不過很多場景，在需求實現之後，我也沒探索得更深入了，可能有些地方描述得也不準確_(:з」∠)_
　　希望能給大家提供幫助～