如何在Angular页面加载时不显示Highcharts默认饼图

Question

所以我设法让我的HighCharts半甜甜圈显示硬编码数据。它显示得很好。我现在已经修改了我的代码以从数据库中获取数据，并且导致的轻微延迟为我创建了一个问题，其中＆＃34; Chart title＆＃34;屏幕上出现一个白框：

这是我的HTML：

<div class="row container">
    <div class="col-md-2 greyBack loanWidget">
        <div class="calendarContainer">
            <div class="calendarTitle">{{myLoan.LoanStatus.Month}}</div>
            <div class="calendarDay">{{myLoan.LoanStatus.Day}}</div>
            <div class="calendarYear">{{myLoan.LoanStatus.Year}}</div>
        </div>
    </div>
    <div class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 171px; vertical-align: top;">
        <div ng-controller="LoanStatusChart">
            <highchart class="ng-cloak" config="highchartsNG" title="Wow" height="171"></highchart>
        </div>
    </div>
    <!--<div id="container" class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;"></div>-->
    <div class="col-md-3 greyBack loanWidget balance">
        <span class="balanceText">{{myLoan.LoanStatus.OriginalPrincipalBalance}}</span><br />
        <span class="balanceTextLabel">Outstanding Balance</span><br />
        <span class="borrowedText">{{myLoan.LoanStatus.BorrowedAmt}}</span><br />
        <span class="borrowedTextLabel">Borrowed</span>
    </div>
    <div class="col-md-3 loanWidget"><img src="../images/c4l/cfl-banner.png" /></div>
</div>

这是我的Angular代码：

cflApp.controller('LoanStatusChart', function ($scope, $http, $timeout) {

    $scope.$watch("myLoan.LoanNumber", function (value) {
        if (value) {
            var urlBase = '/api/C4L/';
            var loanNumber = value;
            $http.get(urlBase + 'TheLoanInfo?loanNumberText=' + loanNumber).success(function (data, status) {
                var myPaidOff = data.LoanStatus.PaidOff;
                var myStillOwed = 100 - myPaidOff;
                $scope.options = {
                    type: 'pie',
                    colors: ['#971a31', '#ffffff']
                }


                $scope.highchartsNG = {
                    options: {
                        plotOptions: {
                            pie: {
                                borderColor: '#000000',
                                size: 115,
                                dataLabels: {
                                    enabled: false,
                                    distance: -50,
                                    style: {
                                        fontWeight: 'bold',
                                        color: 'white',
                                        textShadow: '0px 1px 2px black',

                                    }

                                },
                                startAngle: -90,
                                endAngle: 90,
                                center: ['30%', '75%']
                            }
                        },
                        colors: ['#971a31', '#ffffff'],
                        chart: {
                            type: 'pie',
                            backgroundColor: '#f1f1f2',
                            height: 180,
                            className: 'half-doughnut',
                            animation: {
                                duration: 1500
                            }
                        },
                        credits: false
                    },
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },
                    title: {
                        text: Math.round(myPaidOff) + '%<br />Paid Off',
                        style: {
                            color: '#971a31',
                            fontWEight: 'bold',
                            fontSize: '15px'
                        },
                        verticvalAlign: 'middle',
                        y: 120,
                        x: -24
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },

                    series: [{
                        type: 'pie',
                        name: 'Loan',
                        innerSize: '80%',
                        data: [
                            [Math.round(myPaidOff) + '% paid', Math.round(myPaidOff)],
                            [Math.round(myStillOwed) + '% owed', Math.round(myStillOwed)]

                        ]
                    }],
                    loading: false
                }
            }).error("error message");
        }

    });

});

我试图设置一个名为＆＃34; hidden-chart＆＃34;在显示图表的div上，然后在app.run被触发时使用JQuery显示它，但隐藏图表div不再出现。有什么想法吗？

Answer 1

我发布这个是因为我找到了答案。因为我们正在使用Angular.js，所以我们需要在指令中添加代码，该代码负责图表出现的部分内容。因此，我们移动了指令中显示的相同代码，如下所示：

cflApp.directive('yourMortgage', function () {
    return {
        restrict: 'E',
        templateUrl: '/partial/yourMortgage.html',
        link: function ($scope, element, attributes) {
            $scope.options = {
                type: 'pie',
                colors: ['#971a31', '#ffffff']
            }

            $scope.highchartsNG = {
                options: {
                    plotOptions: {
                        pie: {
                            borderColor: '#000000',
                            size: 115,
                            dataLabels: {
                                enabled: false,
                                distance: -50,
                                style: {
                                    fontWeight: 'bold',
                                    color: 'white',
                                    textShadow: '0px 1px 2px black',

                                }

                            },
                            startAngle: -90,
                            endAngle: 90,
                            center: ['30%', '75%']
                        }
                    },
                    colors: ['#971a31', '#ffffff'],
                    chart: {
                        type: 'pie',
                        backgroundColor: '#f1f1f2',
                        height: 180,
                        className: 'half-doughnut',
                        animation: {
                            duration: 1500
                        }
                    },
                    credits: false
                },
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },
                title: {
                    text: 'Paid Off',
                    style: {
                        color: '#971a31',
                        fontWEight: 'bold',
                        fontSize: '15px'
                    },
                    verticvalAlign: 'middle',
                    y: 120,
                    x: -24
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                series: [{
                    type: 'pie',
                    name: 'Loan',
                    innerSize: '80%',
                }],
                loading: false
            }

        }

    }
});

修复了闪烁问题并允许控件仅在呈现页面时加载。