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<; 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

效果图：