Javascript nvD3图表未等待AJAX调用完成

Javascript nvD3 chart not waiting for AJAX call to finish

本文关键字:AJAX 调用 等待 nvD3 Javascript      更新时间:2023-09-26

我正试图将jquery ajax调用中的一些数据加载到nvD3图表中。如果我不包括ajax调用,那么图表工作得很好,但是如果我试图在进行ajax调用后加载数据,则根本不会加载。。

<script>
     angular.module('app',  ['onsen'])
        nv.addGraph(function() {
          var chart = nv.models.discreteBarChart()
              .x(function(d) { return d.label })    //Specify the data accessors.
              .y(function(d) { return d.value })
              .staggerLabels(true)    //Too many bars and not enough room? Try staggering labels.
              .tooltips(false)        //Don't show tooltips
              .showValues(true)       //...instead, show the bar value right on top of each bar.
              ;
          d3.select('#chart svg')
              .datum(exampleData())
              .call(chart);
          nv.utils.windowResize(chart.update);
          return chart;
        });
        //Each bar represents a single discrete quantity.
        function exampleData() {
            $.ajax({
                type: "GET", 
                url: "https://demo8162910.mockable.io/json",
                dataType: 'jsonp',
                jsonp: true,
                jsonpCallback: "myJsonMethod",
                error: function(){
                    console.log( 'Unable to load feed, Incorrect path or invalid feed' );
                },
                success: function(data){
                    console.log( 'feed done' );
                    return  [ 
                                {
                                  key: "Cumulative Return",
                                  values: [
                                    { 
                                      "label" : "A Label" ,
                                      "value" : -29.765957771107
                                    } , 
                                    { 
                                      "label" : "B Label" , 
                                      "value" : 0
                                    } , 
                                    { 
                                      "label" : "C Label" , 
                                      "value" : 32.807804682612
                                    } , 
                                    { 
                                      "label" : "D Label" , 
                                      "value" : 196.45946739256
                                    } , 
                                    { 
                                      "label" : "E Label" ,
                                      "value" : 0.19434030906893
                                    } , 
                                    { 
                                      "label" : "F Label" , 
                                      "value" : -98.079782601442
                                    } , 
                                    { 
                                      "label" : "G Label" , 
                                      "value" : -13.925743130903
                                    } , 
                                    { 
                                      "label" : "H Label" , 
                                      "value" : -5.1387322875705
                                    }
                                  ]
                                }
                              ]                 
                }});
        }
    </script>

我认为您需要放置

d3.select('#chart svg')
          .datum(exampleData())
          .call(chart);

success函数中,用数据本身替换exampleData()