Highcharts：无法使用AngularJS读取未定义的属性'parentGroup'答案

【问题标题】：Highcharts :Cannot read property 'parentGroup' of undefined with AngularJSHighcharts：无法使用AngularJS读取未定义的属性'parentGroup'
【发布时间】：2017-11-11 07:14:45
【问题描述】：

我正在使用 highChart 和 angularJS 制作图表。我关注这个highChart。

这是我的代码：

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 代码：

<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>

我得到了这张图表

当来自图表海报时，我有这个问题：

未捕获的类型错误：无法读取未定义的属性“parentGroup” 在 k.setState (App/Template/highcharts/highcharts.js:392:112) 在 App/Template/highcharts/highcharts.js:207:54 在 Array.forEach （本机）在 a.each (App/Template/highcharts/highcharts.js:27:360) 在 a.Pointer.runPointActions (App/Template/highcharts/highcharts.js:207:32) 在 k.onMouseOver (App/Template/highcharts/highcharts.js:389:130) 在 SVGGElement.c (App/Template/highcharts/highcharts.js:380:323)

plnkr

谢谢你帮助我，

【问题讨论】：

你能在 jsfiddle 例子中重现它吗？（你可以从类似的东西开始：jsfiddle.net/6vayegnk）
我使用了 jsfiddle，但无法正常工作 jsfiddle
当你让它工作时告诉我。或者您可以使用其他工具，例如 plunker 等。
我认为不是工具问题。但是代码中有问题plnkr
你的 script.js 是空的......你的 html 标签也有问题。

标签： angularjs html highcharts

【解决方案1】：

我有同样的问题，没有一个答案能帮助我。几个小时后，我发现作为图表数据馈送发送到 highchart 组件的数组导致了问题。关键是，y 轴记录必须命名为 'y' ，而不是任何其他任意名称。

我的数据以前是这样的：

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

当我把它改成：

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

问题解决了。

【讨论】：

【解决方案2】：

根据$scope.Stat 数组对象，您可以以$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'
        }];

【讨论】：

感谢您的回复@，我尝试这样做但它返回此错误消息； Can not read property 'resConforme' of undefined
我在上面的 plunker 中找不到，您能否详细说明错误
$Scope.Stat 它的内容是从 angularJS 中的另一个函数填充的。如何创建一个全局变量？我更新了帖子。 @深
你能在$scope.Stats()之后使用console,log($scope.Stat)检查并发现错误
显示其[object Object]