如何使用来自 HTTP 调用的数据填充 Google Chart (API)？

Question

我正在尝试填充一个图表，该图表通过一些 HTTP 调用从我们的 Abas ERP 系统中提取数据，然后使用该数据填充所述图表。这个想法是显示前三年每个月的月收入（例如：2014 年 1 月、2015 年 1 月、2016 年 1 月、2014 年 2 月至 2016 年 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);
});