1

angular に highcharts-ng を使用して、データの円グラフを作成しようとしています。基本的なチャートを機能させることはできますが、これまでのところ、3D オプションを認識させることができません。ドキュメントには最上位の構成オプションを扱うように記載されているため、オプションセクションに含めようとしましたが、役に立ちませんでした。

また、パイのスライスにドリルダウンしてからボタンをクリックしてメインのデータセットに戻ると、他のスライスをクリックできず、前にクリックしたスライスだけがクリックされるという奇妙なバグがあるようです。それが何の取引なのかはわかりませんが、ちょっと奇妙です。

ここに私の問題の両方を示す JSfiddle があります。フィードバック/支援は大歓迎です。ありがとうございました！

http://jsfiddle.net/9bxx9tf2/

また、コピーして貼り付けるだけで使用できるバージョンのコードを次に示します。

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

2 に答える 2

0

最初の問題については、次の構成をオプションに追加して、円グラフの深さを指定するだけです。

plotOptions: {
    pie: {
            depth: 30
    }
}
于 2014-08-22T20:29:37.627 に答える