Question

在我的控制器中：

如果服务成功则调用Web服务然后获取数据并将数据推送到相应的数组

for(var i = 0; i < $scope.reportRangeList.length; i++)
{                           
     count++;

    if(angular.isNumber($scope.reportRangeList[i].businessName))
    {
        $scope.nameBusiness.push($scope.reportRangeList[i].businessName);
    }else{                                  
        $scope.nameBusiness.push(+$scope.reportRangeList[i].businessName);
        }
    if(angular.isNumber($scope.reportRangeList[i].total1))
    {
        $scope.total.push($scope.reportRangeList[i].total1);
    }else{
        $scope.total.push(+$scope.reportRangeList[i].total1);
    }

    if(count == $scope.reportRangeList.length){
    //$log.info("dddd"+ angular.toJson($scope.bname) )
    $scope.fetchChart();
    $scope.comlete = true;
    }
}

并在fetchChart（）中：

$scope.fetchChart = function(){
   $scope.chartConfig = {
    title: {
      text: ""
    },tooltip: {
     visible: true,
     pointFormat: '<b>{point.name}</b>: {point.percentage:.1f} %',
    },
    options: {
      chart: {
        type: 'pie'
      },
    plotOptions: {
       series: {
        stacking: ''
       },
      pie: {
     allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
    enabled: true,
    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
    style: {
    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
    }
  },
 showInLegend: true
  },
},
legend: {
        layout: 'vertical',
        align: 'topleft',
        verticalAlign: 'top',
        borderWidth: 1,
    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
    }
    },

    /*xAxis: {
   categories: $scope.bname
    },*/
    credits: {
    enabled: true
    },
    seriesDefaults: {
     labels: {
     template:'{series.name}: <b>{point.percentage:.1f}%</b>',
      position: "outsideEnd",
     visible: true,
     background: "transparent"
    }
    },
    series: [{
    type: "pie",
    name: "",
     data: //$scope.bname,
        [
        $scope.nameBusiness,$scope.total
         //['Firefox', 42.0]
          /* ['IE', 26.8],
       {
           name: 'Chrome',
          y: 14.8,
          sliced: true,
         selected: true
      },
        ['Safari', 6.5],
      ['Opera', 8.2],
     ['Others', 0.7]*/
    ],
}],
           loading: false
     }
       };

我想用上面的数据显示饼图高图，在for循环中我尝试仅推送数字，但它显示单行饼图，即使圆没有形成。当我转换为数字类型时是推送，它显示http://www.highcharts.com/errors/14错误。我可以共享的更多内容$scope.reportRangeList[i].businessName是字符串类型，$scope.reportRangeList[i].total1是数字类型。饼图正在处理硬编码数据。现在我如何获得带有动态json数据的饼图。

Answer 1

问题是businessName是字符串，您的数据格式应该是数字。我猜你每个切片都有businessName + total1对，这是正确的吗？在这种情况下，为每个对创建一个点：

series: [{
    type: "pie",
    name: "",
    data: [
        [ $scope.nameBusiness, $scope.total ] // [name, value] format
    ]
 }],

Answer 2

当我正在研究角度2时，我将提供与之相关的解决方案..看看它是否可以帮助你..

首先，创建一个函数并调用将获取的服务来自服务器并将结果存储在变量中。
然后在图表的数据部分使用该变量代替静态数据。

希望它能解决您的问题。

如何在Angular js中获得包含动态json数据的饼图

2 个答案: