如何使用來自HTTP調用的數據填充Google圖表（API）？

Question

我有一個圖表我試圖填充，通過一些HTTP調用從我們的Abas ERP系統提取數據，然後用這些數據填充所述圖表。這個想法是顯示前三年每個月的月收入（例如：2014年1月，2015年1月，2016年1月，然後2014年2月，等等）

雖然現在我看它（自從我參與這個項目以來，這已經過去了幾個星期）你能擁有一組對象嗎？

function loadArray() { 

    var i = 0; 

    var beginning2014Months = ["20140101", "20140201", "20140301", "20140401", "20140501", "20140601", "20140701", "20140801", "20140901", "20141001", "20141101", "20141201"]; 
    var closing2014Months = ["20140131", "20140228", "20140331", "20140430", "20140531", "20140630", "20140731", "20140831", "20140930", "20141031", "20141130", "20141231"]; 
    var beginning2015Months = ["20150101", "20150201", "20150301", "20150401", "20150501", "20150601", "20150701", "20150801", "20150901", "20151001", "20151101", "20151201"]; 
    var closing2015Months = ["20150131", "20150228", "20150331", "20150430", "20150531", "20150630", "20150731", "20150831", "20150930", "20151031", "20151130", "20151231"]; 
    var beginning2016Months = ["20160101", "20160201", "20160301", "20160401", "20160501", "20160601", "20160701", "20160801", "20160901", "20161001", "20161101", "20161201"]; 
    var closing2016Months = ["20160131", "20160228", "20160331", "20160430", "20160531", "20160630", "20160731", "20160831", "20160930", "20161031", "20161130", "20161231"]; 



    for (i = 0; i < 12; i++) { 


     runOWSLS("Invoice", beginning2014Months[i], closing2014Months[i], "no", function (callbackResp) { 
      $scope.invoice2014Header[i] = callbackResp; 


     }); 

     runOWSLS("Invoice", beginning2015Months[i], closing2015Months[i], "no", function (callbackResp) { 
      $scope.invoice2015Header[i] = callbackResp; 


     }); 

     runOWSLS("Invoice", beginning2016Months[i], closing2016Months[i], "no", function (callbackResp) { 
      $scope.invoice2016Header[i] = callbackResp; 


     }); 


    }; 



}; 







google.charts.load('current', { 
    packages: ['corechart', 'bar'] 
}); 
google.charts.setOnLoadCallback(drawMaterial); 


function drawMaterial() { 


    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Month'); 
    data.addColumn('number', 'Revenue 2014'); 
    data.addColumn('number', 'Revenue 2015'); 
    data.addColumn('number', 'Revenue 2016'); 

    data.addRows([ 
    [{ 
      v: [8, 0, 0], 
      f: 'January' 
     }, $scope.invoice2014Header[0].ynofreight, $scope.invoice2015Header[0].ynofreight, $scope.invoice2016Header[0].ynofreight], 
    [{ 
      v: [9, 0, 0], 
      f: 'Febuary' 
     }, $scope.invoice2014Header[1].ynofreight, $scope.invoice2015Header[1].ynofreight, $scope.invoice2016Header[1].ynofreight], 
    [{ 
      v: [10, 0, 0], 
      f: 'March' 
     }, 3, 1, 1], 
    [{ 
      v: [11, 0, 0], 
      f: 'April' 
     }, 4, 2.25, 1], 
    [{ 
      v: [12, 0, 0], 
      f: 'May' 
     }, 5, 2.25, 1], 
    [{ 
      v: [13, 0, 0], 
      f: 'June' 
     }, 6, 3, 1], 
    [{ 
      v: [14, 0, 0], 
      f: 'July' 
     }, 7, 4, 1], 
    [{ 
      v: [15, 0, 0], 
      f: 'August' 
     }, 8, 5.25, 1], 
    [{ 
      v: [16, 0, 0], 
      f: 'September' 
     }, 9, 7.5, 1], 
    [{ 
      v: [17, 0, 0], 
      f: 'October' 
     }, 10, 10, 1], 
    [{ 
      v: [18, 0, 0], 
      f: 'November' 
     }, 11, 11, 1], 
    [{ 
      v: [19, 0, 0], 
      f: 'December' 
     }, 12, 12, 1], 
    ]); 

    var options = { 
     title: 'Monthly Revenue', 
     hAxis: { 
      title: 'Month', 
      //format: 'h:mm a', 
      viewWindow: { 
       min: [0, 30, 0], 
       max: [600, 30, 0] 
      } 
     }, 
     vAxis: { 
      title: 'Revenue per year' 
     } 
    }; 

    var material = new google.charts.Bar(document.getElementById('barchart_div')); 
    material.draw(data, options); 
} 







$scope.runAll = function() { 

    $scope.$watch("unityToken", function() { 
     if (!$scope.unityToken) { 
      console.log("auto-login"); 
      login(); 
     } else { 
      loadArray(); 

     } 
    }) 
}; 

Answer 1

您在檢索所有數據之前正在加載圖表。 只有在檢索到填充圖表所需的所有內容後，才應該加載圖表。要做到這一點

一種方法是使用JavaScript的承諾。

var promiseArray = []; 
for (i = 0; i < 12; i++) { 
    promiseArray.push(
     new Promise(function(resolve,reject){ 
      runOWSLS("Invoice", beginning2014Months[i], closing2014Months[i], "no", function (callbackResp) { 
       $scope.invoice2014Header[i] = callbackResp; 
       resolve(); 
      }); 
     }) 
    ); 

    promiseArray.push(
     new Promise(function(resolve,reject){ 
      runOWSLS("Invoice", beginning2015Months[i], closing2015Months[i], "no", function (callbackResp) { 
       $scope.invoice2015Header[i] = callbackResp; 
       resolve(); 
      }); 
     }) 
    ); 

    promiseArray.push(
     new Promise(function(resolve,reject){ 
      runOWSLS("Invoice", beginning2016Months[i], closing2016Months[i], "no", function (callbackResp) { 
       $scope.invoice2016Header[i] = callbackResp; 
       resolve(); 
      }); 
     }) 
    ); 
} // end of for loop - there would be 12*3 = 36 ajax calls. 

Promise.all(promiseArray).then(function(){ 
    google.charts.setOnLoadCallback(drawMaterial); 
});