1. 程式人生 > >關於TradingView圖表分析外掛教程的說明以及簡單用法

關於TradingView圖表分析外掛教程的說明以及簡單用法

大家都知道TradingView是純英文版本APi,去年年底官方網站已支援中文瀏覽,但是api還是全英文支援。

所以國內使用者一定遇到很多閱讀困惑,同理我也遇到很多無法正確理解為漢語意思的地方。

由於授權以及官方溝通方面問題,本人tradingview方面的教材暫時停止更新。後續不定期會更新一些上來,請大家見諒。

注意,官方的js庫必須是以公司名義申請,不允許個人名義申請,如果以個人名義申請或者你所在行業經過中國區經銷商瞭解後不需要用到tradingview將無法給你提供github的開原始碼下載。原始碼結構如下圖:


你取到官方授權許可和原始碼之後你就可以開始使用了,如果你用不到socket訂閱動態更新最新價的話,只需要用到datafeed.js。也就是官方所說道的UDF

載入資料模式(socket的使用需要呼叫js api):  dataFeed包含了UDF訂閱資料的內部結構呼叫方法,可在DataFeed.js檔案中對所有的方法進行重寫,重構。


接下來看下widget物件例項化一個圖示中最關鍵的udf資料介面指向以及所對應的介面:

datafeed: new Datafeeds.UDFCompatibleDatafeed("/tradingview/TradingInterface"),  


1.config關於圖示的相關配置給出我這邊的配置:{\"supports_search\":true,\"supports_group_request\":false,\"supports_marks\":true,\"exchanges\":[{\"value\":\"\",\"name\":\"All Exchanges\",\"desc\":\"\"},{\"value\":\"XETRA\",\"name\":\"XETRA\",\"desc\":\"XETRA\"},{\"value\":\"NSE\",\"name\":\"NSE\",\"desc\":\"NSE\"},{\"value\":\"NasdaqNM\",\"name\":\"NasdaqNM\",\"desc\":\"NasdaqNM\"},{\"value\":\"NYSE\",\"name\":\"NYSE\",\"desc\":\"NYSE\"},{\"value\":\"CDNX\",\"name\":\"CDNX\",\"desc\":\"CDNX\"},{\"value\":\"Stuttgart\",\"name\":\"Stuttgart\",\"desc\":\"Stuttgart\"}],\"symbolsTypes\":[{\"name\":\"All types\",\"value\":\"\"},{\"name\":\"Stock\",\"value\":\"stock\"},{\"name\":\"Index\",\"value\":\"index\"}],\"supportedResolutions\":[\"1\",\"2\",\"3\",\"5\",\"15\",\"30\",\"60\",\"90\",\"240\",\"1D\",\"1W\",\"1M\",\"12M\"]}

◦  解釋

▪  supports_search是否支援搜尋;英文解釋Set this one =true if your datafeed supportssymbol search and individual symbol resolve logic.

▪  supports_group_request是否支援搜尋或品種解析;英文解釋Set this one =true  if your datafeed provides full info aboutsymbols group only and is not able to perform symbol search or individualsymbol resolve.

▪  supports_marks

▪  exchanges交易所陣列,裡面的value表示交易所codename表示交易所名稱,desc表示交易所描述

▪  symbolsTypes品種所屬型別,可屬於多個型別

▪  supportedResolutions中的值D代表天dayW代表周weekM代表月;2D是兩天;3W是三週;6M6個月,表示支援顯示的哪幾種圖日線圖、2日線


2.history是資料的關鍵項,這一塊展示行情資料結構。具體結構如下:

{\"t\":[],\"c\":[],\"o\":[],\"h\":[],\"l\":[],\"v\":[],\"s\":\"ok\"}

◦  解釋

▪  t表示時間,將t的數值補000後就代表毫秒數,比如js(new Date).getTime()

▪  c表示close收盤價

▪  o表示open開盤價

▪  h表示high最高價

▪  l表示low最低價

▪  v表示volume成交量

▪  s表示狀態,返回資料是否成功,ok表示成功

3.marks

{"id":[0,1,2,3,4,5],"time":[1435116211.643,1434770611.643,1434511411.643,1434511411.643,1433820211.643,1432524211.643],"color":["red","blue","green","red","blue","green"],"text":["Today","4days back","7 days back + Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua.","7 days back once again","15 daysback","30 daysback"],"label":["A","B","CORE","D","EURO","F"],"labelFontColor":["white","white","red","#FFFFFF","white","#000"],"minSize":[14,28,7,40,7,14]}

◦  解釋

▪  id unique mark ID

▪  time表示秒數,距197011日之間的秒數

▪  color mark color

▪  text mark popup text. HTML supported

▪  label mark label, single character

▪  labelFontColor color of mark label

▪  minSize minimal size of mark, diameter in pixels

4.search支援品種搜尋介面

 [{
"symbol": "APA",
"full_name": "APA",
"description": "Apache Corp.",
"exchange": "NYSE",
"type": "stock"
}, {
"symbol": "APC",
"full_name": "APC",
"description": "Anadarko Petroleum Corporation",
"exchange": "NYSE",
"type": "stock"
}]

◦  解釋

▪  symbol 是品種code

▪  full_name 品種全稱

▪  description品種描述

▪  exchanges交易所

▪  type型別stock表示股票

5.symbols是品種顯示資料格式化介面

{"name":"AAPL","exchange-traded":"NasdaqNM","exchange-listed":"NasdaqNM","timezone":"America/New_York","minmov":1,"minmov2":0,"pricescale":10,"pointvalue":1,"session":"0930-1630","has_intraday":false,"has_no_volume":false,"ticker":"AAPL","description":"AppleInc.","type":"stock","supported_resolutions":["D","2D","3D","W","3W","M","6M"]}

▪  name品種名稱

▪  exchange-traded交易所名稱

▪  exchange-listed交易所名稱

▪  timezone時區

▪  minmov用於格式化用途

▪  minmov2用於格式化用途

▪  pricescale是最小的顯示可能出現的價格變化的小數部分的分隔符。其計算公式為:MinimalPossiblePriceChange = minmov / pricescale

▪  pointvalue

▪  session開盤時間

▪  has_intrady顯示符號是否具有歷史盤中資料;原文解釋showing whether symbol has intraday history data

▪  has_no_volume是否有成交量

▪  description描述

▪  type型別,例如stock表示股票

▪  supportedResolutions中的值D代表天dayW代表周weekM代表月;2D是兩天;3W是三週;6M6個月,表示支援哪些圖,如下:


我們配置好這些對應的介面資料後就可以實現udf獲取資料展示我們想要的個性化Tradingview圖表啦。

簡單舉例(基於最新版本):

[html] view plain copy print?
  1. <bodystyle="margin: 0px;">
  2.     <divid="tv_chart_container">
  3.     </div>
  4. </body>
<body style="margin: 0px;">
    <div id="tv_chart_container">
    </div>
</body>
[html] view plain copy print?
  1. <scripttype="text/javascript">
  2.     function getParameterByName(name) {  
  3.         name = name.replace(/[]/, "\\[").replace(/[]/, "\\[").replace(/[]/, "\\]");  
  4.         var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),  
  5.                         results = regex.exec(location.search);  
  6.         return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));  
  7.     }  
  8.     var _symbolcode = getParameterByName('symbol');  
  9.     _symbolcode = _symbolcode ? _symbolcode : "EURUSD";  
  10.     if (navigator.userAgent.indexOf('Firefox') >= 0)  
  11.     { _symbolcode = encodeURIComponent(_symbolcode); }  
  12.     var _interval = getParameterByName('interval');  
  13.     //_interval = _interval ? _interval : "1D";  
  14.     _interval = _interval ? _interval : "1D"; //30  
  15.     TradingView.onready(function () {  
  16.         var widget = new TradingView.widget({  
  17.             fullscreen: true, //全屏  
  18.             symbol: _symbolcode, //品種  
  19.             interval: _interval, //日線  
  20.             timezone: "Etc/UTC",  
  21.             debug: false,  
  22.             toolbar_bg: '#fff',  
  23.             allow_symbol_change: false,  
  24.             save_image: true,  
  25.             hideideas: true,  
  26.             hideSymbolSearch: true,  
  27.             container_id: "tv_chart_container",  
  28.             //  BEWARE: no trailing slash is expected in feed URL  
  29.             //formal  
  30.             datafeed: new Datafeeds.UDFCompatibleDatafeed("/tradingview/TradingInterface"),  
  31.             //test  
  32.             //                datafeed: new Datafeeds.UDFCompatibleDatafeed("/tradingview/TradingInterface"),  
  33.             library_path: "charting_library/", //呼叫本js圖表地庫和樣式  
  34.             locale: "zh", //語言  
  35.             //  Regression Trend-related functionality is not implemented yet, so it's hidden for a while  
  36.             disabled_drawings: ["Regression Trend"],  
  37.             drawings_access: { type: 'black', tools: [{ name: "Regression Trend"}] },  
  38.             enabled_features: ["move_logo_to_main_pane"],  
  39.             disabled_features: ["header_symbol_search", "symbol_search_hot_key", "header_interval_dialog_button", "header_fullscreen_button", "header_screenshot", "countdown", "header_compare"],  
  40.             time_frames: [], //左側底部時間格式化:time_frames: [{ text: "50y", resolution: "6M" },{ text: "1d", resolution: "5" }],  
  41.             studies_overrides: {  
  42.                 "bollinger bands.median.color": "#33FF88",  
  43.                 "bollinger bands.upper.linewidth": 7  
  44.             }  
  45.         });  
  46.     })  
  47.     </script>
<script type="text/javascript">
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    var _symbolcode = getParameterByName('symbol');
    _symbolcode = _symbolcode ? _symbolcode : "EURUSD";
    if (navigator.userAgent.indexOf('Firefox') >= 0)
    { _symbolcode = encodeURIComponent(_symbolcode); }

    var _interval = getParameterByName('interval');
    //_interval = _interval ? _interval : "1D";
    _interval = _interval ? _interval : "1D"; //30

    TradingView.onready(function () {
        var widget = new TradingView.widget({
            fullscreen: true, //全屏
            symbol: _symbolcode, //品種
            interval: _interval, //日線
            timezone: "Etc/UTC",
            debug: false,
            toolbar_bg: '#fff',
            allow_symbol_change: false,
            save_image: true,
            hideideas: true,
            hideSymbolSearch: true,
            container_id: "tv_chart_container",
            //	BEWARE: no trailing slash is expected in feed URL
            //formal
            datafeed: new Datafeeds.UDFCompatibleDatafeed("/tradingview/TradingInterface"),
            //test
            //                datafeed: new Datafeeds.UDFCompatibleDatafeed("/tradingview/TradingInterface"),
            library_path: "charting_library/", //呼叫本js圖表地庫和樣式
            locale: "zh", //語言
            //	Regression Trend-related functionality is not implemented yet, so it's hidden for a while
            disabled_drawings: ["Regression Trend"],
            drawings_access: { type: 'black', tools: [{ name: "Regression Trend"}] },
            enabled_features: ["move_logo_to_main_pane"],
            disabled_features: ["header_symbol_search", "symbol_search_hot_key", "header_interval_dialog_button", "header_fullscreen_button", "header_screenshot", "countdown", "header_compare"],
            time_frames: [], //左側底部時間格式化:time_frames: [{ text: "50y", resolution: "6M" },{ text: "1d", resolution: "5" }],
            studies_overrides: {
                "bollinger bands.median.color": "#33FF88",
                "bollinger bands.upper.linewidth": 7
            }
        });

    })
    </script>
各位,暫時先到這裡。當你拿到你的授權開原始碼後一定要開啟wiki檢視api文件,看不懂的可以英文翻譯後再看,基本還是能懂一些的。最困擾我的就是最新版本相容舊版本調整挺大的,這沒辦法,改吧。後續還會更新,但是暫時就先到這裡啦。記得關注哦。