我正在尝试使用 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>
最佳答案
对于第一个问题，您只需通过将此配置添加到您的选项来指定饼图的深度:
plotOptions: {
pie: {
depth: 30
}
}
关于javascript - Highcharts-Ng 和损坏的深入分析，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25454184/