tradingview 是一個封裝度比較高的框架，也是一個比較專業的行情JS插件，有著各種指標比如：成交量，移動平均線等，可在PC、H5中完美運行！

tradingview 是需要申請才能給你用的，申請過程還挺麻煩，我這里有申請下來的版本，V15，可以提供；

tradingview 只接受兩種給數據的方式：一種是JS-API，一種是UDF稍微解釋一下： JS-API:在頁面中用JS實現適配，DIY程度較高，這種方式JS工作量會高一些，推薦這種寫法； UDF：tradingview
自己有一套寫好的接口，按照tradingview
規定的API名稱寫實現接口的功能，這種方法后端工作量大，可以用后端語言，java,go等等去實現；
如圖邏輯：

我這里只講JS-API，圍繞我的Demo講，Demo加我微信會給出，demo效果如圖所示：

首先看mychart.vue文件 changeChart方法接受一個 商品id,和時間跨度（分鐘，日，周，月等） 然后商品信息傳遞給 drawKLineChart，這里面要根據商品信息初始化Datafeeds（數據適配器）“this”不是必須的那是我為了讓內部能調用到當前對象的方法才傳的；然后就是使用widget構造器創建，TradingView實例構造器配置在config.js文件的tradeViewOptions

當圖表實例初始化并準備就緒時會調用onChartReady，可以在這里安全的設置指標、訂閱、監聽事件等等；

getTVOCHL方法是為了實現圖表上面的高開低收，因為自帶的高開低收太丑所以我就自己實現了，這個可選；

DataFeeds/index.js，這個文件是官方的JS-api接口，不多說有注釋；

DataFeeds/barsUpdater.js 這個文件是數據適配器了，用來更新和請求數據的初始化 頁碼（翻頁用到）訂閱者對象（包含商品信息，和更新商品數據等方法） 最后一條數據 （一些實時更新分秒圖取數據可能用到）；

設置商品數據時用getAllBars，在這個方法里面可以根據商品去請求行情數據，請求完成數據用onDataCallback回調設置數據，假如到最后一頁沒有數據了可以onDataCallback([],
{ noData: true });告訴tradingview
沒有數據了，第一次可以先加載一頁的數據，用戶滑動到空白處時tradingview 會自動調用getAllBars方法；

demo里面使用了 fmtData方法來創建模擬數據

到這里也就基本能跑通了，更加詳細是肯定寫不完的，有問題的好好翻文檔吧；

一些常見的坑或者要注意的地方：
a.tradingview很多元素是可以css覆蓋的，覺得自帶的吃藕的話，自己審查元素然后覆蓋，配置自定義css的地方在構造器的custom_css_url參數這里；

b.去掉logo disabled_features中禁用 widget_logo，這個僅供自己學習用，未授權去掉logo商用會有法律責任！
c.tradingview框架是外國人創造的，外國股市都是綠漲紅跌，但中國卻相反！框架默認是綠漲紅跌為了符合國人習慣請設置柱狀圖顏色！不然會出大事！在構造器的studies_overrides中添加’volume.volume.color.0’: ‘rgba(29, 178,112,1)’,‘volume.volume.color.1’: ‘rgba(239, 64, 52, 1)’;

d.無限加載問題：用戶滑動到下一頁或者頁面初始化時畫面一直閃，可能是一次請求數據過少，試一試時間跨度大一點讓數據多一些，無數據時及時調用onDataCallback([],{ noData: true })； d.這里是買它的分析軟件，不是授權這個tradingview 框架，別買錯了

e.該框架沒有任何官方中文的文檔，網絡上的中文文檔是大神翻譯過來的，如果你的版本過高可能不適用一些功能；原文檔鏈接https://github.com/tradingview/charting_library/wiki但是現在已經404，最新的鄙人也不知道在哪;

f.中文文檔(大神翻譯)：https://b.aitrade.ga/books/lightweight-charts-docs-cn/

g.倉庫：https://github.com/zlq4863947/proficient-tradingview

h.在線閱讀：https://b.aitrade.ga/books/proficient-tradingview

i.有視頻教程是大神制作出來的，售價3000人民幣（買過的人說沒啥用），QQ群也是付費交流群；

j.可以加我微信要這個demo, 請備注來意