如引用 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',
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
}
});我也不知道这是加载图表还是什么，反正就出现图表了
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<; 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);
}整体代码：
<!-- TradingView Widget BEGIN -->
<html>
<head>
<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>
</head> <body>
<div id="tv_chart_container"></div> </body>
<script type="text/javascript">
var dataBar = [];
var chart_data = createChartData();
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 }
});
chart.onChartReady(function () {
//chart.chart().createStudy('MA Cross', false, false); // K线图添加初始化曲线
}) ;
});
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);
}
</script>
<p>chart</p>
</html>
TradingView
效果图：