TradingView 初識

如引用 TradingView 庫,需引入庫中 3 個文件(所需庫爲 github 私有庫,需申請)javascript

<script type="text/javascript" src="/static/charting_library-master/charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/polyfills.js"></script>
<script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/bundle.js"></script>

初始化圖表:html

 TradingView.onready(function () { var chart = window.tvWidget = new TradingView.widget({ symbol: 'd', height: '900', width: '1700', interval: 'D', toolbar_bg: '#c5c5c8', timezone: 'Asia/Shanghai', time_frames: [ {text: "1y", resolution: "1W"}, {text: "6m", resolution: "3D"}, {text: "3m", resolution: "1D"}, {text: "1m", resolution: "1D"}, {text: "1w", resolution: "30"}, {text: "3d", resolution: "30"}, {text: "1d", resolution: "30"}, {text: "6h", resolution: "15"}, {text: "1h", resolution: "1"}, { text: "100y", resolution: "W", description: "All", title: "All" }, ], container_id: 'tv_chart_container', library_path: '/static/charting_library-master/charting_library/', locale: 'zh', //datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"), datafeed: chart_data, //須要顯示的數據內容 disabled_features:[ //'volume_force_overlay',// 成交量與k線分離 ], overrides:{ 'volumePaneSize': 'small', //成交量高度設置,可選值 large, medium, small, tiny } });

我也不知道這是加載圖表仍是什麼,反正就出現圖表了java

function createChartData(){ Datafeeds.Container = function () { //this._configuration=configurationData this._configuration = { supports_search: false, supports_group_request:false, exchanges:[{value: 'DV', name: 'NYSE', desc: 'DeVry Education Group Inc.'}], supported_resolutions: ['1', '15','D','M'], supports_marks: false, supports_time: false, supports_timescale_marks: false, symbols_types: [{name: 'Ny', value: 'dv'}], } } Datafeeds.Container.prototype.onReady = function (callback) { let that = this; getChartData(); if(this._configuration){ setTimeout(function(){ callback(that._configuration); }, 0); } } Datafeeds.Container.prototype.getBars = function(symbolInfo, resolution, dataFrom, dataTo, onHistoryCallback) { onHistoryCallback(dataBar); } Datafeeds.Container.prototype.resolveSymbol = function(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) { onSymbolResolvedCallback({ "name": 'D', "timezone": "Asia/Shanghai", "pricescale": 500, "minmov": 1, "ticker": 'D', "description": "DIdontKnow", "session": "24x7", "type": "bitcoin", "has_intraday": true, "intraday_multipliers": ['1', '30', 'D'], "has_weekly_and_monthly": false, "has_no_volume": false, "regular_session": "24x7" }); } return new Datafeeds.Container; }

數據內容爲本身設置的隨機生成的一些數據,僅供測試使用git

 function getChartData() { var time = 1528404420000; var maxHigh = 8888; var minLow = 8000; for (var i =0; i<10000; i++){ var high = maxHigh - Math.floor(Math.random()*300); var low = minLow + Math.floor(Math.random()*300); var close = high - Math.floor(Math.random()*500); var open = low + Math.floor(Math.random()*500); var volume = parseInt(Math.random()*100); this.dataBar.push({ time:time, close:close, open:open, high:high, low:low, volume:volume }) time += 2000000; } //console.log(dataBar); }

總體代碼:github

 1 <!-- TradingView Widget BEGIN -->
 2 <html>
 3 <head>
 4     <script type="text/javascript" src="/static/charting_library-master/charting_library/charting_library.min.js"></script>
 5     <script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/polyfills.js"></script>
 6     <script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/bundle.js"></script>
 7 </head>
 8 
 9 <body>
 10 <div id="tv_chart_container"></div>
 11 
 12 </body>
 13 <script type="text/javascript">
 14     var dataBar = [];  15     var chart_data = createChartData();  16  TradingView.onready(function () {  17         var chart = window.tvWidget = new TradingView.widget({  18  symbol: 'd',  19  height: '900',  20  width: '1700',  21  interval: 'D',  22  toolbar_bg: '#c5c5c8',  23  timezone: 'Asia/Shanghai',  24  time_frames: [  25  {text: "1y", resolution: "1W"},  26  {text: "6m", resolution: "3D"},  27  {text: "3m", resolution: "1D"},  28  {text: "1m", resolution: "1D"},  29  {text: "1w", resolution: "30"},  30  {text: "3d", resolution: "30"},  31  {text: "1d", resolution: "30"},  32  {text: "6h", resolution: "15"},  33  {text: "1h", resolution: "1"},  34  { text: "100y", resolution: "W", description: "All", title: "All" },  35  ],  36  container_id: 'tv_chart_container',  37  library_path: '/static/charting_library-master/charting_library/',  38  locale: 'zh',  39             //datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
 40  datafeed: chart_data,  41  disabled_features:[  42                 //'volume_force_overlay',// 成交量與k線分離
 43  ],  44  overrides:{  45                 'volumePaneSize': 'small', //成交量高度設置,可選值 large, medium, small, tiny
 46 
 47  }  48  });  49  chart.onChartReady(function () {  50             //chart.chart().createStudy('MA Cross', false, false); // K線圖添加初始化曲線
 51  }) ;  52  });  53     function createChartData(){  54  Datafeeds.Container = function () {  55             //this._configuration=configurationData
 56             this._configuration = {  57  supports_search: false,  58  supports_group_request:false,  59  exchanges:[{value: 'DV', name: 'NYSE', desc: 'DeVry Education Group Inc.'}],  60  supported_resolutions: ['1', '15','D','M'],  61  supports_marks: false,  62  supports_time: false,  63  supports_timescale_marks: false,  64  symbols_types: [{name: 'Ny', value: 'dv'}],  65  }  66  }  67  Datafeeds.Container.prototype.onReady = function (callback) {  68  let that = this;  69  getChartData();  70             if(this._configuration){  71  setTimeout(function(){  72  callback(that._configuration);  73  }, 0);  74  }  75  }  76 
 77  Datafeeds.Container.prototype.getBars = function(symbolInfo, resolution, dataFrom, dataTo, onHistoryCallback) {  78  onHistoryCallback(dataBar);  79 
 80  }  81  Datafeeds.Container.prototype.resolveSymbol = function(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {  82  onSymbolResolvedCallback({  83                 "name": 'D',  84                 "timezone": "Asia/Shanghai",  85                 "pricescale": 500,  86                 "minmov": 1,  87                 "ticker": 'D',  88                 "description": "DIdontKnow",  89                 "session": "24x7",  90                 "type": "bitcoin",  91                 "has_intraday": true,  92                 "intraday_multipliers": ['1', '30', 'D'],  93                 "has_weekly_and_monthly": false,  94                 "has_no_volume": false,  95                 "regular_session": "24x7"
 96  });  97  }  98             
 99 
100         return new Datafeeds.Container; 101  } 102     function getChartData() { 103          var time = 1528404420000; 104          var maxHigh = 8888; 105          var minLow = 8000; 106          for (var i =0; i<10000; i++){ 107              var high = maxHigh - Math.floor(Math.random()*300); 108              var low = minLow + Math.floor(Math.random()*300); 109              var close = high - Math.floor(Math.random()*500); 110              var open = low + Math.floor(Math.random()*500); 111              var volume = parseInt(Math.random()*100); 112              this.dataBar.push({ 113  time:time, 114  close:close, 115  open:open, 116  high:high, 117  low:low, 118  volume:volume 119  }) 120  time += 2000000; 121  } 122         //console.log(dataBar);
123  } 124 </script>
125 <p>chart</p>
126 </html>
TradingView

 效果圖:session

相關文章
相關標籤/搜索