我想使用$http.get将与this link相同的高位图与Restful API集成在一起,由于$scope.pieData在成功函数中,因此它不起作用:

app.directive('hcPieChart', function () {
                return {
                    restrict: 'E',
                    template: '<div></div>',
                    scope: {
                        title: '@',
                        data: '='
                    },
                    link: function (scope, element) {
                        Highcharts.chart(element[0], {
                            chart: {
                                type: 'pie'
                            },
                            title: {
                                text: scope.title
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                                    }
                                }
                            },
                            series: [{
                                data: scope.data
                            }]
                        });
                    }
                };
            })

app.controller('myCtrl', function($scope, $http) {

   $http({
              method: 'Get',
              url: 'http://localhost:2195/api/charts',
          }).success(function(data, status , header, config) {

                // Sample data for pie chart
                        $scope.pieData = [
                        {
                            name: "Sent SMSs",
                            selected: true,
                            y:  data[0].sentSMS
                        },
                        {
                            name: "Not Sent",
                            y: data[0].notSentSMS,
                            sliced: true,

                        },
                        {
                            name: "Delivered",
                            y: data[0].deliveredSMS
                        },
                        {
                            name: "Not Delivered",
                            y: data[0].notDeliveredSMS,

                            selected: false
                        }
                    ];
          }

}); // End of Controller


这是JSFiddle link(由于服务链接,它不起作用)。

任何人都可以帮忙。

最佳答案

Jimmy是对的,您的问题是图表呈现,然后成功函数得到响应

以防止您必须创建标志并使用ng-if,因此html将会像这样

<hc-pie-chart  ng-if="flag" data = "pieData" title="Manual Campaigns" >Placeholder for Manual Campaigns pie chart</hc-pie-chart>


而JS将是这样的:

$scope.flag = false;

          $http.get("http://localhost:2195/api/charts")
              .then(function(response) {
                console.log(response);

                  $scope.pieData = [
                        {
                            name: "Sent SMSs",
                            selected: true,
                            y : response.data[0].sentSMS

                        },
                        {
                            name: "Not Sent",
                            y: response.data[0].notSentSMS,
                            sliced: true,

                        },
                        {
                            name: "Delivered",
                            y:response.data[0].delivered
                        },
                        {
                            name: "Not Delivered",
                            y: response.data[0].notDelivered,

                            selected: false
                        }
                    ]

                    console.log($scope.pieData);
                    $scope.flag = true;  //set the flag equal true to show it

              });

10-06 04:36
查看更多