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',
            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<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 
  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>chartp>
126 html>

TradingView

 效果图：