0

我在 Angular js 中实现了高图表，它适用于硬编码数据，但当数据来自动态 Web 服务时它不起作用。在我的控制器中：

$scope.months = [];
                $scope.retail = [];
                $scope.wholesale = [];

                $scope.fetchChart = function(){
                    $scope.chartConfig = {
                            title: {
                                text: ""
                            },

                            options: {
                                chart: {
                                    type: 'column'
                                },
                                plotOptions: {
                                    series: {
                                      stacking: ''
                                    }
                                  },
                                legend: {
                                    layout: 'vertical',
                                    align: 'topleft',
                                    verticalAlign: 'top',
                                    borderWidth: 1
                                }
                            },
                            xAxis: {
                                categories: $scope.months
                            },
                            credits: {
                                enabled: true
                            },
                            series: [{
                                name: 'Retail',
                                data: $scope.retail
                            },
                            {
                                name: 'Wholesale',
                                data: $scope.wholesale
                            }
                            ],

                            loading: false
                    }
                };



                $http.get(http://localhost:8080/abc/pqr/mno/getData).success(function(response) {
                    $scope.data = angular.fromJson(response);
                    $scope.comlete = false;
                    var count=0;
                    for(var i = 0; i < $scope.data.length; i++){
                        count++;
                        $scope.months.push($scope.data[i].month);
                        $scope.retail.push($scope.data[i].retail);
                        $scope.wholesale.push($scope.data[i].wholesale);
                        if(count == $scope.data.length){
                            $scope.fetchChart();
                            $scope.comlete = true;
                        }
                    }

                    $scope.toggleHighCharts = function () {
                        this.chartConfig.useHighStocks = !this.chartConfig.useHighStocks
                    }


                    $scope.$watch("comlete",function(){
                        alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
                      },true);

                    $scope.reflow = function () {
                        $scope.$broadcast('highchartsng.reflow');
                    };

                });

                $scope.chartTypes = [
                                     {"id": "line", "title": "Line"},
                                     {"id": "spline", "title": "Smooth line"},
                                     {"id": "area", "title": "Area"},
                                     {"id": "areaspline", "title": "Smooth area"},
                                     {"id": "column", "title": "Column"},
                                     {"id": "bar", "title": "Bar"},
                                     {"id": "pie", "title": "Pie"},
                                     {"id": "scatter", "title": "Scatter"}
                                     ];

                $scope.dashStyles = [
                                     {"id": "Solid", "title": "Solid"},
                                     {"id": "ShortDash", "title": "ShortDash"},
                                     {"id": "ShortDot", "title": "ShortDot"},
                                     {"id": "ShortDashDot", "title": "ShortDashDot"},
                                     {"id": "ShortDashDotDot", "title": "ShortDashDotDot"},
                                     {"id": "Dot", "title": "Dot"},
                                     {"id": "Dash", "title": "Dash"},
                                     {"id": "LongDash", "title": "LongDash"},
                                     {"id": "DashDot", "title": "DashDot"},
                                     {"id": "LongDashDot", "title": "LongDashDot"},
                                     {"id": "LongDashDotDot", "title": "LongDashDotDot"}
                                     ];

                $scope.chartSeries = [
                                      {"name": "Retail", "data": $scope.retail, type: "column"},
                                      {"name": "Wholesale", "data": $scope.wholesale, type: "column"}
                                      ];

在我的 HTML 中：

<div>
    <highchart id="chart1"  config="chartConfig"></highchart>
</div>

在控制器中的语句：

$scope.data = angular.fromJson(response);

我得到的数据为

[{"wholesale":"1","retail":"0","month":"Jan"},
{"wholesale":"2","retail":"0","month":"May"},
{"wholesale":"0","retail":"1","month":"Jun"},
{"wholesale":"0","retail":"2","month":"Jul"}]

在控制器中的语句：

$scope.$watch("comlete",function(){
                        alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
                      },true);

我得到的数据如下：

["Jan","May","Jun","Jul"]---["0","0","1","2"]=-=--["1","2","0","0"]

并串联：

series: [{  name: 'Retail',
            data: $scope.retail
        },
        {   name: 'Wholesale',
            data: $scope.wholesale
        }
        ],

当我用它替换data: $scope.retail它data: [250,500,1500,1800]//$scope.retail时data: $scope.wholesale。我data: [700,800,200,1300]//$scope.wholesale怎样才能得到带有动态数据的图表。

4

1 回答 1

0

问题的答案：-

我自己解决了这个问题。我正在回答解决方案以供我将来参考，以防它可以帮助有相同要求的人。

$scope.$watch("comlete",function(){
                        alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
                      },true);

在上述语句中，$scope.retail和$scope.wholesale数据作为数组的字符串，语句

 series: [{
           name: 'Retail',
           data: $scope.retail
           },
           {
           name: 'Wholesale',
           data: $scope.wholesale
           }
           ],

系列不接受数据作为字符串，通过将数字字符串转换为数字（将字符串转换为数字类型）然后它接受系列。答案是：

if(angular.isNumber($scope.data[i].retail))
{
 $scope.retail.push($scope.data[i].retail);
}else{
    $scope.retail.push(+$scope.data[i].retail);
    }
if(angular.isNumber($scope.data[i].wholesale))
{
$scope.wholesale.push($scope.data[i].wholesale);
}else{
$scope.wholesale.push(+$scope.data[i].wholesale);
}

代替

$scope.retail.push($scope.data[i].retail);
 $scope.wholesale.push($scope.data[i].wholesale);

这两个语句在for循环中。

于 2014-08-16T13:39:57.217 回答