如引用 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>
效果圖:session