Question

我正在处理单页应用程序项目，我们正在使用angularjs和higcharts.js来绘制图表。我想使用angularjs指令绘制图表，并做了一个简单的例子，看起来没事，但是当我试图在我的ajax调用成功函数中编写代码时，图表没有显示出来。我使用此link作为示例，但我需要在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

我使用了您发布的相同代码，这对我来说非常适合。

BackgroundColor = Color.FromRgb (76, 108, 139)
Device.OnPlatform(() => 
{
    this.Padding = new Thickness(0, 30, 0, 0);
});

and i add my pages with this function
void AddPage(string title, params View[] views) 
    {
        var content = new StackLayout();
        foreach (var view in views)
            content.Children.Add(view);
        this.Children.Add(new ContentPage 
        {
            Content = content,
            Title = title
        });
    }

DEMO

使用angular指令绘制高图饼图但是当我在成功函数中使用它时它不起作用

1 个答案: