Данные не отображаются в PieChart HighCharts с помощью Angularjs (динамические данные из вызова Ajax)

Question

Я пытаюсь сделать круговую диаграмму в Angularjs, используя высокие графики. Диаграмма не отображает данные. На ней отображаются жестко закодированные данные (там, где они отмечены в коде), но не отображаются динамические данные в формате json.

Мой HTML-шаблон

 <div style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto; margin-top:100px;">
 <hc-pie-chart  title="Employee from diffrent states" data="pieData">Placeholder for pie chart</hc-pie-chart></div>

Мой контроллер и директива

 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("highChartController", function($scope,$state, $window,$timeout,$stateParams,chartService)   
    StateList();

        function StateList() {
         var getData=chartService.getStateList()
         getData.then(function(emp) {           
            var data= emp.data; 
            $scope.pieData=data;        //if i will put hardcoded data here it will not work
        });
         //if i will put hardcoded data here it will work
    }
});

Мой файл json

var data=[{name: "Bihar", y: 1},{name: "Karnataka", y: 3},{name: "Bengal", y: 2},{name: "Punjab", y: 3},{name: "Maharastra", y: 2}] 

Answer 1

Мне удалось сделать это самому. Мне просто нужно было добавить этот код в директиву, чтобы он перерисовал диаграмму.

scope.$watch("data", function (newValue) {
                                chart.series[0].setData(newValue, true);
                              }, true);

app.directive(
                'hcPieChart',
                function(chartService) {
                    return {
                        restrict : 'E',
                        template : '<div></div>',
                        scope : {
                            title : '@',
                            data : '='
                        },
                        controller: function ($scope, $element, $attrs) {
                              console.log(2);

                            },
                            template: '<div id="container" style="margin: 0 auto">not working</div>',
                        link : function(scope, element,attr) {

                              var chart = new Highcharts.Chart({
                                chart: {
                                  renderTo: 'container',
                                  plotBackgroundColor: null,
                                  plotBorderWidth: null,
                                  plotShadow: false
                                },
                                title: {
                                    text: scope.title
                                },
                                plotOptions: {
                                    pie: {
                                      allowPointSelect: true,
                                      cursor: 'pointer',
                                      dataLabels: {
                                        enabled: true,
                                        color: '#000000',
                                        connectorColor: '#000000',
                                        formatter: function () {
                                          return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                                        }
                                      }
                                    }
                                },
                                series: [{
                                  type: 'pie',
                                  data: scope.data
                                }]
                              });
                            scope.$watch("data", function (newValue) {
                                chart.series[0].setData(newValue, true);
                              }, true);

                        }
                    };
                })