TradingView 初识
如引用 TradingView 库，需引入库中 3 个文件（所需库为 github 私有库，需申请）
<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>
初始化图表：
TradingView.onready(function () {
var chart = window.tvWidget = new TradingView.widget({
symbol: 'd',
height: '900',
'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
}
});
我也不知道这是加载图表还是什么，反正就出现图表了
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;
}
数据内容为自己设置的随机生成的一些数据，仅供测试使用
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); }
整体代码：
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 '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>
效果图：