Highcharts-Ng and Broken Drilldown
Question
I am attempting to create a pie chart of data using highcharts-ng for angular. I can get the basic chart working, but so far I am unable to get it to recognize the 3D option. I have attempted to include it in the options section as the documentation says to do with top level config options but to no avail.
Also I seem to have an odd bug where when you drill into a pie slice, then click the button to return to the main data set, you cannot click any of the other slices, only the one you clicked before. I am not sure what the deal with that is, but it's kind of odd.
Here is a JSfiddle showing both of my problems. Any feedback/assistance is much appreciated. Thank you!
Also, here is a version of the code you can just copy and paste.
<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>
2 answers
solution1
0 2014-08-22 20:29:37
For the first issue, you just need to specify the depth of the pie chart by adding this config to your options:
plotOptions: {
pie: {
depth: 30
}
}
solution2
0 2015-03-04 15:55:12
The problem here is very simple, you only have to add the depth property to plotOptions like Richard Morgan said and move completely plotOptions next to chart object, so the same level that drilldown .
I updated your jsfiddle with the solution: http://jsfiddle.net/9bxx9tf2/2/
Best regards
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.