highcharts-ng ajax data load

问题

I have the following HTTP request that i use to fill out my chart:

$scope.series = ['Moduler tager', 'Gns.score'];
$scope.activity_data = [];
$scope.activity_ticks = [];
var tmp_data = [];
$scope.bar = [];
$scope.line = [];
$http.get(api.getUrl('findSelfActivityByDivisions', null))
    .success(function (response) {
        response.forEach(function(y){
            var i = 0;
            var log_date = y.date.substr(0, y.date.indexOf('T'));
            var date = new Date(log_date);
            var logg_date = moment(date).fromNow();
            var indexOf = tmp_data.indexOf(logg_date);
            var found = false;
            var index = 0;
            if(tmp_data.length > 0){
                tmp_data.forEach(function(current_data){
                    if(current_data[0] == logg_date){
                        found = true;
                    }
                    if(!found){
                        index++;
                    }
                })
            }
            if(found){
                var tmp = tmp_data[index];
                tmp[1] = tmp[1] + y.num_modules;
                tmp[2] = tmp[2] + y.num_score_modules;
                tmp[3] = tmp[3] + y.sum_score;
                tmp_data[index] = tmp;
            }
            else
            {
                var tmp = [logg_date, y.num_modules, y.num_score_modules, y.sum_score];
                tmp_data.push(tmp);
            }
        })

        var line = [];
        var bar = [];
        tmp_data.forEach(function(data){
            $scope.activity_ticks.push(data[0])
            line.push(data[1]);
            var avg_score = data[3] / data[2];
            if(isNaN(avg_score)){
                avg_score = 0;
            }
            bar.push(avg_score);

        });

        $scope.line = line;
        $scope.bar = bar;
    });

Now then i have the following chart config:

$scope.chartConfig = {
    options: {
        chart: {
            type: 'areaspline'
        }
    },
    series: [{
        data: $scope.bar,
        type: 'column'
    },{
        data: $scope.line,
        type: 'line'
    }],
    xAxis: {
        categories: $scope.activity_ticks
    },
    title: {
        text: 'Hello'
    },

    loading: false
}

Sadly none of the graphs are showing (im guessing it has something to do with the date comming after the load)

Can anyone help me out?

回答1:

Your $scope.chartConfig is likely firing before the success callback of your $http.get(api.getUrl('findSelfActivityByDivisions', null)) completes. I am assuming $scope.chartConfig is located in a controller. Try placing a $watchGroup on the values then apply your chart rendering logic once those values resolve. An example may include

Note that $watchGroup is found within Angular as of 1.3

$scope.$watchGroup(['line', 'bar'], function(newValues, oldValues) {

    // newValues[0] --> $scope.line 
    // newValues[1] --> $scope.bar 

    if(newValues !== oldValues) {
        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'areaspline'
                }
            },
            series: [{
                data: $scope.bar,
                type: 'column'
            },{
                data: $scope.line,
                type: 'line'
            }],
            xAxis: {
                categories: $scope.activity_ticks
            },
            title: {
                text: 'Hello'
            }, 
            loading: false
        }
    }
});

来源：https://stackoverflow.com/questions/29848656/highcharts-ng-ajax-data-load

标签

javascript

angularjs

Highcharts