使用 Angularjs 的 HighCharts 的 PieChart 中没有显示数据（来自 Ajax 调用的动态数据）答案

【问题标题】：Data is not getting displayed in PieChart of HighCharts using Angularjs (Dynamic Data from Ajax call)使用 Angularjs 的 HighCharts 的 PieChart 中没有显示数据（来自 Ajax 调用的动态数据）
【发布时间】：2019-11-05 06:48:39
【问题描述】：

我正在尝试使用 highcharts 在 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}]

【问题讨论】：

您能在在线代码编辑器中重现此问题吗？

标签： javascript angularjs highcharts

【解决方案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);

                        }
                    };
                })

【讨论】：