Highcharts :Cannot read property 'parentGroup&

I'm doing a chart using the highChart and angularJS. I follow this highChart.

Here is my code:

AngularJS:

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:.2f} %'
                    }
                }
            },
            series: [{
                data: scope.data
            }]
        });
    }
};
});

app.controller('ChartsController', function ($scope) {
var ids =location.search;
$scope.Stats=function(){

           $http.get(url+"/Stats"+ids) 
            .success(function(data){
                $scope.Stat = data;
            }).error(function(err,data){
                console.log("error:" +data);
            }); 
        };      
        $scope.Stats();
/*$scope.Stat = [{
              "Validate":17.456789,
              "NotValidate":2.96296,
              "Nb_V":2.96296,
              "Nb_Not_v":2.96296
          }];
 */
       // Sample data for pie chart
            $scope.pieData = [{
                    name: 'CheckLists Socred',
                    y:  $scope.Stat[0].Validate,
                    color: '#00c853'
                },{
                    name: 'CheckLists Not Socred',
                    y: $scope.Stat[0].NotValidate,
                    color: '#b71c1c'
            }];
});

HTML code:

<html >
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body  ng-app="app" ng-controller="ChartsController" >
     <hc-pie-chart title="Browser usage" data="pieData">Placeholder for pie chart</hc-pie-chart>

</body>
</html>

What I got this chart

When from the graphic chart poster, I have this problem:

Uncaught TypeError: Cannot read property 'parentGroup' of undefined at k.setState (App/Template/highcharts/highcharts.js:392:112) at App/Template/highcharts/highcharts.js:207:54 at Array.forEach (native) at a.each (App/Template/highcharts/highcharts.js:27:360) at a.Pointer.runPointActions (App/Template/highcharts/highcharts.js:207:32) at k.onMouseOver (App/Template/highcharts/highcharts.js:389:130) at SVGGElement.c (App/Template/highcharts/highcharts.js:380:323)

plnkr

thank you for helping me,

回答1:

I have the same problem and none of the answers helped me out. after several hours I figured out that the array which I was sending to the highchart component as the data feed to my chart, was causing the problem. the point is, that the y-axis records MUST be named as 'y' , not any other arbitrary name.

my data used to be like this:

data = [{name: "n1", income: 1491},
{name: "n2", income: 103103},
{name: "n3", income: 126886},
 {name: "n4", income: 88}]

and when i changed it to :

data = [{name: "n1", y: 1491},
{name: "n2", y: 103103},
{name: "n3", y: 126886},
 {name: "n4", y: 88}]

problem solved.

回答2:

According to $scope.Stat array object you have access each as $scope.Stat[0].Validate

Forked Plunker

$scope.pieData = [{
 name: 'CheckLists Socred',
                y:  $scope.Stat[0].Validate,
                color: '#00c853'
            },{
                name: 'CheckLists Not Socred',
                y: $scope.Stat[0].NotValidate,
                color: '#b71c1c'
        }];