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
    }

});

我的两个问题是：

为什么不赢这个节目？

目前，数据是＆＃34;硬编码＆＃34;在这些方面：

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

    ]
}],

我如何设置它以便传递百分比？这些来自另一个控制器，你可以在我的部分代码中看到。

UPDATE：我已经设法通过在Highcharts.js之前添加Jquery来使图表区域填充。然而，它忽略了我传给它的每一个选项，只是显示＆＃34; Chart Title＆＃34;和图表应该是一个非常高的div。想法？

Answer 1

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

jquery的
Highcharts.js
AngularJS
Highchart-ng.js

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

您可以在这里查看代码http://jsfiddle.net/Hjdnw/1018/

如何在角度应用中出现Highcharts half-donut？

1 个答案: