使用angular指令繪制高圖餅圖但是當我在成功函數中使用它時它不起作用

Question

我正在研究單頁面應用程序項目，我們使用angularjs和higcharts.js來繪制圖表。 我想使用angularjs指令繪制圖表，並做了一個簡單的例子，看起來沒事，但是當我試圖在我的ajax調用成功函數中編寫代碼時，圖表沒有顯示出來。 我使用此鏈接作為示例，但我需要在ajax的成功函數中設置pieData。

這是我的index.html，它作為shell頁面工作。

<!DOCTYPE html>
<html ng-app="app" ng-controller="SPAController">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index Page</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />           

    <script type="text/javascript" src="~/Scripts/angular.min-1.5.8.js"></script>    
    <script type="text/javascript" src="~/Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="~/Scripts/highcharts.js"></script>    
    <script type="text/javascript" src="~/Scripts/AngularController/DailyController.js"></script>    
</head>
<body>

    <!-- start: page-wrapper
    =-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
    <div class="container">
        <div class="page-wrapper">
            <div class="page-body">                
                  <div ng-view></div>
            </div>
        </div>
    </div>

</body>
</html>

這是我在index.html（ng-view div）中呈現的daily.html視圖

<div ng-controller="DailyController">
    <hc-pie-chart title="Browser usage" data="pieData">Placeholder for pie chart</hc-pie-chart>
</div>

這是我的DailyController.js文件

app.controller("DailyController", function ($scope, PRServiceNew) {
    $scope.GetDataAndDrawChart = function (data) {
        $rootScope.showLoader = true;
// CommmonApi is my service which is fetching data from database.
        PRServiceNew.GetAllNew("CommonApi", "GetData", data).then(function (d) {
            // Here i am getting data from data base and i will send that data to chart but as of now for the simplicity I have written the sample data in $scope.pieData
            $scope.pieData = [{
                name: "Microsoft Internet Explorer",
                y: 56.33
            }, {
                name: "Chrome",
                y: 24.03,
                sliced: true,
                selected: true
            }, {
                name: "Firefox",
                y: 10.38
            }, {
                name: "Safari",
                y: 4.77
            }, {
                name: "Opera",
                y: 0.91
            }, {
                name: "Proprietary or Undetectable",
                y: 0.2
            }]

            $rootScope.showLoader = false;
        });
        //End-Total AR by Aging
    }
});

這是我的指令代碼，最后也寫在DailyController.js文件中。

 // Directive for pie charts, pass in title and data only    
        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
                        }]
                    });
                }
            };
        })

Answer 1

基本上，您需要使用它的API更新Highcharts以重新繪制新數據。 要做到這一點，只需使用以下代碼更新您的鏈接功能。 在這里，我使用新數據在一段時間間隔后更新了圖表的舊數據，並將其反映到視圖中。 您可以使用AJAX而不是超時。

function (scope, element) {
    scope.chart = Highcharts.chart(element[0], {
        chart: {
            type: 'pie'
        },
        plotOptions: {
            // plot options
        },
        series: [{ data: { /* some data */  } }]
    });
    scope.updateChart = function() {            
        scope.chart.update( { series: [{
            data: { /* new data */ }
        }] }, true );
    }
    /* Here you can make AJAX call and on success of your AJAX call call this scope.updateChart function */
    $timeout( scope.updateChart , 1000 )             
}

Answer 2

我使用了你發布的相同代碼，它對我來說非常適合。

myapp.controller("DailyController", function($scope) {
  $scope.GetDataAndDrawChart = function(data) {
    // CommmonApi is my service which is fetching data from database.
    $scope.pieData = [{
      name: "Microsoft Internet Explorer",
      y: 56.33
    }, {
      name: "Chrome",
      y: 24.03,
      sliced: true,
      selected: true
    }, {
      name: "Firefox",
      y: 10.38
    }, {
      name: "Safari",
      y: 4.77
    }, {
      name: "Opera",
      y: 0.91
    }, {
      name: "Proprietary or Undetectable",
      y: 0.2
    }]  

  }
});

DEMO

使用angular指令繪制高圖餅圖但是當我在成功函數中使用它時它不起作用

問題描述

2 個解決方案

解決方案1
1 已采納 2016-12-05 12:07:07

解決方案2
0 2016-12-05 11:50:18

使用angular指令繪制高圖餅圖但是當我在成功函數中使用它時它不起作用

問題描述

2 個解決方案

解決方案1 1 已采納 2016-12-05 12:07:07

解決方案2 0 2016-12-05 11:50:18

解決方案1
1 已采納 2016-12-05 12:07:07

解決方案2
0 2016-12-05 11:50:18