如何使用 Hightchart-ng 制作 Highcharts 半圆甜甜圈图

Question

我正在尝试在我的 angular 应用程序中创建一个 Highcharts 半圆圆环图。我已经安装了 Highcharts-ng 指令。无论出于何种原因，它似乎完全跳过了 plotOptions 部分，这是设置开始和结束角度的地方，从而创建了甜甜圈。我得到的是一个完整的圆形饼图。这是我的代码：

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <highchart id="chart1" config="highchartsNG"></highchart>
    </div>
</div>

    //See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', 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: {
            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>'  
        },
        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%']
            }
        },
        series: [{
            type: 'pie',
            name: 'Loan',
            innerSize: '50%',
            data: [
                ['85% paid', 85],
                ['15% owed', 15]

            ]
        }],
        loading: false
    }

});

我在这里创建了一个 JSFiddle：

http://jsfiddle.net/mikemahony/hzdewsx8/

我错过了什么？

Answer 1

Highcharts-ng 指令需要将这些属性放在选项下。

$scope.highchartsNG = { 
    options:{
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            }
        }
    },

在 highchartsNGConfig 中，选项属性是一个标准的 highcharts 选项对象。例如任何你可以传递给 `new Highcharts.Chart(options);在这里工作。

正在监视此选项对象的更改。当此处发生变化时，将重新创建整个图表。

如何使用 Hightchart-ng 制作 Highcharts 半圆甜甜圈图

How to make a Highcharts semi-circle donut chart using Hightchart-ng

javascript

jquery

angularjs

highcharts