如何让 Highcharts 半甜甜圈出现在 angular 应用程序中？

Question

我正在开发一个 angular.js 应用程序，它在仪表板中显示各种小部件。这些小部件之一使用 Highcharts 半甜甜圈。我直接 HTML 创建了一个原型，它按预期工作。我现在正在使用 highcharts-NG 将内容移植到我的 angular.js 应用程序。我的小部件中的所有内容都在显示，除了半个甜甜圈。这是我的部分代码：

<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>

这是我控制器中的代码：

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
    }

});

我的两个问题是：

为什么不显示？

当前这些行中的数据是"hard-coded"：

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

    ]
}],

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

更新： 我已经设法通过在 Highcharts.js 之前添加 Jquery 来填充图表区域。然而，它忽略了我传递给它的每一个选项，并简单地显示 "Chart Title" 和一个非常高的 div 图表应该在哪里。想法？

Answer 1

我试过你的代码运行没问题。可能是您有一些 javascript 文件排序或 CSS 问题。一定要按照正确的顺序

jquery
Highcharts.js
AngularJS
Highchart-ng.js

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

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

如何让 Highcharts 半甜甜圈出现在 angular 应用程序中？

How do I make Highcharts half-donut appear in angular application?

javascript

angularjs

highcharts