Question

我正在尝试使用highcharts-ng for angular创建数据饼图。我可以使基本图表工作，但到目前为止我无法识别3D选项。我试图将它包含在选项部分中，因为文档说明与顶级配置选项有关，但无济于事。

此外，我似乎有一个奇怪的错误，当您钻入饼图切片，然后单击按钮返回主数据集时，您不能单击任何其他切片，只能单击之前单击的切片。我不确定与此有什么关系，但这有点奇怪。

这是一个JSfiddle，显示了我的两个问题。任何反馈/协助都非常感谢。谢谢！

此外，这是您可以复制和粘贴的代码版本。

<html ng-app="ngTW">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>

<script>
var ngTW = angular.module('ngTW', ['highcharts-ng']);

ngTW.controller('ngChartCtrl', function($scope){
    $scope.allocations;
    $scope.allocationsDrilldown;
    $scope.init = function()
    {
        //get main data set
        $scope.allocations = $scope.setAllocations();

        //get drilldown data set
        $scope.allocationsDrilldown = $scope.setAllocationsDrilldown();

        //set the data points on the chart itself
        $scope.highchartsNG.series[0].data = $scope.allocations;
        $scope.highchartsNG.options.drilldown.series = $scope.allocationsDrilldown;     
    }
    $scope.setAllocations = function()
    {
        console.log('Setting allocations');
        return JSON.parse('[{"name":"mutualFund","y":54014,"drilldown":"mutualFund"},{"name":"bond","y":10229,"drilldown":"bond"}]'); 
    }
    $scope.setAllocationsDrilldown = function()
    {
        console.log('Setting drilldown data');
        return JSON.parse('[{"id":"mutualFund","data":[["MILLER CONV BOND FD CL I",54013.69]],"name":"mutualFund Holdings"},{"id":"bond","data":[["APOLLO COML REAL 5.5%19 DUE 03/15/19",10229.2],["BARCLAYS BANK PLC 0%21F DUE 08/18/21 BARCLAYS BANK PLC",4970.76],["VERINT SYSTEMS IN 1.5%21 CONV BONDS DUE 06/01/21",8295.92],["TTM TECH 1.75%20 DUE 12/15/20",9293.67],["TITAN MACHINERY 3.75%19 DUE 05/01/19",6449.36],["TICC CAPITAL CORP 7.5%17 DUE 11/01/17",9851.49],["TESLA MOTORS INC 0.25%19 CONV BONDS DUE 03/01/19",8873.33],["SPIRIT REALTY C 2.875%19 DUE 05/15/19",7042.07],["RYLAND GRP 0.25%19 DUE 06/01/19",10349.61],["RTI INTL METALS 1.625%19 CONV BONDS DUE 10/15/19",10201.2],["RES CAP CORP 6%18 DUE 12/01/18",10147.3],["REDWOOD TRUST I 4.625%18 DUE 04/15/18",10283.5],["PROSPECT CAP CO 5.875%19 DUE 01/15/19",9414.63],["PENNYMAC CORP 5.375%20 DUE 05/01/20",6957.8],["PDL BIOPHARMA INC. 4%18 DUE 02/01/18",4453],["NATIONAL HEALTH 3.25%21 DUE 04/01/21",10244.3],["MERITAGE HOMES 1.875%32 DUE 09/15/32",9500.4],["J2 GLOBAL INC. 3.25%29 DUE 06/15/29",8311.68],["GOLDMAN SACHS GROUP 0%21 DUE 02/19/21",9879.53],["ARES CAP CORP 4.75%18 DUE 01/15/18",8396.8],["BARCLAYS BANK PLC 0%21F DUE 05/20/21 BARCLAYS BANK PLC",9006.21],["BARCLAYS BANK PLC 0%21F DUE 07/23/21 BARCLAYS BANK PLC",6000],["BGC PARTNERS INC. 4.5%16 DUE 07/15/16",7460.25],["BLACKROCK KELSO C 5.5%18 DUE 02/15/18",10594],["BLACKSTONE MTG T 5.25%18 DUE 12/01/18",9561.24],["BROADSOFT INC. 1.5%18 DUE 07/01/18",4965.33],["COLONY FINL 3.875%21 DUE 01/15/21",9992.08],["FORESTAR GROUP I 3.75%20 DUE 03/01/20",9855]],"name":"bond Holdings"}] ');
    }
    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }                  
            },
            drilldown: {
                series: [],
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                        }
                    }
                }
            }
        },
        title: {
            text: 'Allocations'
        },
        Axis: {
            type: 'category'
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Allocations',
            colorByPoint: true,
            data: $scope.allocations
        }],

    }
});
</script>
</head>

<body>
    <div ng-controller="ngChartCtrl" data-ng-init="init()">                             
        <highchart id="chart1" config="highchartsNG"></highchart>
    </div>
</body>

</html>

Answer 1

对于第一个问题，您只需要通过将此配置添加到选项中来指定饼图的深度：

plotOptions: {
    pie: {
            depth: 30
    }
}

Answer 2

此处的问题非常简单，您只需将depth属性添加到plotOptions，就像Richard Morgan所说，并在plotOptions对象旁边完全移动chart，所以与drilldown。

相同的级别

我用解决方案更新了你的jsfiddle： http://jsfiddle.net/9bxx9tf2/2/

祝你好运

Highcharts-Ng和Broken Drilldown

2 个答案: