javascript - 如何使 Highcharts 半 donut 出现在 Angular 应用程序中？

Question

我正在开发一个 angular.js 应用程序，该应用程序在仪表板中显示各种小部件。其中一个小部件使用 Highcharts 半 donut 。我已经用纯 HTML 创建了一个原型(prototype)，它按预期工作。我现在使用 highcharts-NG 将内容移植到我的 angular.js 应用程序中。我的小部件中的所有内容都在显示，除了半个 donut 。这是我的部分代码:

<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: 300px; vertical-align: top;">
        <div ng-controller="LoanStatusChart">
            <highchart id="chart1" config="highchartsNG"></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>

这是我的 Controller 中的代码:

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

    $scope.options = {
        type: 'pie',
        colors: ['#971a31', '#ffffff']
    }

    $scope.swapChartType = function () {
        if (this.highchartsNG.options.chart.type === 'line') {
            this.highchartsNG.options.chart.type = 'bar'
        } else {
            this.highchartsNG.options.chart.type = 'line'
        }
    }

    $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: 150
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Hello',
            style: {
                color: '#971a31',
                fontWEight: 'bold',
                fontSize: '15px'
            },
            verticvalAlign: 'middle',
            y: 20,
            x: -24
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },

        series: [{
            type: 'pie',
            name: 'Loan',
            innerSize: '50%',
            data: [
                ['85% paid', 85],
                ['15% owed', 15]

            ]
        }],
        loading: false
    }

});

我的两个问题是:

1. 为什么不显示此内容？

2. 目前数据在这些行中是“硬编码”的:

   series: [{
       type: 'pie',
       name: 'Loan',
       innerSize: '50%',
       data: [
           ['85% paid', 85],
           ['15% owed', 15]
   
       ]
   }],
   

如何设置才能传递百分比？这些来自另一个 Controller ，正如您在我的部分代码中看到的那样。

更新:我已经成功地通过在 Highcharts.js 之前添加 Jquery 来填充图表区域。然而，它忽略了我传递给它的每一个选项，只是显示“图表标题”和一个非常高的 div 图表应该在的位置。有想法吗？

Answer 1

我试过你的代码，它运行良好。可能您有一些 javascript 文件排序或 CSS 问题。请务必遵循正确的顺序

• jquery
• Highcharts.js
• AngularJS
• Highchart-ng.js

其次，您在图表配置中声明了两次series:[{}]对象。

这是 fiddle ，您可以在此处检查代码http://jsfiddle.net/Hjdnw/1018/