highcharts-ng ajax数据加载 [英] highcharts-ng ajax data load

问题描述

我有以下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 = time（date）.fromNow（）; 
 var indexOf = tmp_data.indexOf（logg_date）; 
 var found = false; 
 var index = 0; 
 if（tmp_data。长度> 0）{
 tmp_data.forEach（function（current_data）{
 if（current_data [0] == logg_date）{
 found = true; 
} $ b $如果（找到）{
 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 = {
选项：{
图表：{
类型：'areaspline'
} 
 }，
系列：[{
数据：$ scope.bar，
类型：'列'
}，{
数据：$ scope.line，
类型：'line'
}]，
 xAxis：{
类别：$ scope.activity_ticks 
}，
标题：{
 text： 'Hello'
}，
 
 loading：false 
} 
  

遗憾的是没有一个图表显示（即时通讯猜测它与加载后的日期有关）

任何人都可以帮我解决问题吗？

$ b $您的 $ scope.chartConfig 可能会在成功之前触发成功s 您的 $ http.get（api.getUrl（'findSelfActivityByDivisions'，null））的回调完成。我假设 $ scope.chartConfig 位于控制器中。尝试在这些值上放置一个 $ watchGroup ，然后在这些值解析后应用您的图表呈现逻辑。一个例子可能包括

请注意， $ watchGroup

 rel =nofollow> <  $ scope。$ watchGroup（['line'，'bar']，function（newValues，oldValues）{
 
 // newValues [0]  - > $ scope。 line 
 // newValues [1]  - > $ scope.bar 
 
 if（newValues！== oldValues）{
 $ scope.chartConfig = {
选项：{
图表：{
类型：'areaspline'
} 
}，
系列：[{
 data：$ scope.bar，
类型：'列'
}，{
数据：$ scope.line，
类型：'行'
}]，
 xAxis：{
类别：$ scope.activity_ticks 
}，
标题：{
 text：'Hello'
}，
 loading：false 
} 
} 
}）; 
  

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?

解决方案

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

这篇关于highcharts-ng ajax数据加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！