如何在Angular js中获取带有动态json数据的饼图答案

【问题标题】：How can i get pie chart with dynamic json data in Angular js如何在Angular js中获取带有动态json数据的饼图
【发布时间】：2014-08-28 00:10:53
【问题描述】：

在我的控制器中：

如果服务成功则调用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 数据的饼图。

【问题讨论】：

@Sebastian Bochan 你能回答这个问题吗？

标签： javascript arrays json charts highcharts

【解决方案1】：

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

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

【讨论】：

感谢您的回答，但您建议的系列类型对我不起作用，请阅读我的问题已更新。
我没有更改您的系列类型，只是向您展示如何将数据传递给系列...只需阅读我的答案并尝试一下。
Fus，感谢您的重播，我对控制器进行了更改。 for 循环： for(var i = 0; i
应该有：arr.push([$scope.reportRangeList[i].businessName , $scope.reportRangeList[i].total1]);

【解决方案2】：

由于我正在研究 angular 2，我将提供与它相关的解决方案。看看它是否可以帮助你。。

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

希望它能解决您的问题。

【讨论】：