javascript - highcharts-ng ajax 数据加载

Question

我有以下 HTTP 请求，用于填写我的图表:

$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;
    });

现在我有以下图表配置:

$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
}

遗憾的是没有显示任何图表(我猜测这与加载后的日期有关)

谁能帮帮我吗？

Answer 1

您的 $scope.chartConfig 可能会在 $http.get(api.getUrl('findSelfActivityByDivisions', null)) 的 success 回调之前触发 完成。我假设 $scope.chartConfig 位于 Controller 中。尝试在值上放置 $watchGroup，然后在这些值解析后应用图表渲染逻辑。一个例子可能包括

请注意$watchGroup自 1.3 起在 Angular 中找到

$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
        }
    }
});