问题
Does anyone know how to round off the edges of a 3D Pie Chart to resemble the included picture? I tried adding border radius via rounded-corner.js, but it had no affect. I have put the chart code in below as well.
function drawFirstLevel() {
// Build the chart
chart = new Highcharts.Chart({
chart: {
type: 'pie',
plotBorderColor: '#0574AC',
borderWidth: .5,
renderTo: 'buRequests',
plotShadow: false,
options3d: {
enabled: true,
alpha: 55,
beta: 0
},
events: {
load: function () {
var label = this.renderer.label(spcData.length + " Total Requests" )
.css({
color: '#666666',
width: '480px'
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0, // offset
verticalAlign: 'top',
y: 20 // offset
}), null, 'spacingBox');
}
},
},
credits: {
enabled: false
},
title: {
text: 'Coaching Requests by ATO BU (YTD)',
style: {
color: '#666666',
fontWeight: 'bold'
}
},
tooltip: {
pointFormat: '{point.y}' + ' Requests' + '<br>' + '{point.percentage:1.0f}%'
},
plotOptions: {
pie: {
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
softConnector: true,
useHTML: true,
enabled: true,
padding: 0,
fontWeight: 'medium',
formatter: function() {
var req;
if (this.point.y === 1) {
req = " Request";
} else {
req = " Requests";
}
return '<span style="color:' + this.point.color + '">' + this.point.name + '<br>' + this.point.y + req + '<br>' + Math.round(this.percentage) + '%' + '</span>';
}
},
point: {
events: {
click: function() {
if (this.name === "Tech Dev" || this.name === "Tech Ops") {
drawSecondLevel(this.name);
}
}//click
}//events
}//point
}//pie
},
series: [{
type: 'pie',
name: 'Coaching Requests by ATO BU (YTD)',
data: chartData,
colors: ['#CD2626', '#F9B112', '#42C5F1', '#0472A9', '#4AA70A', '#C1D52C'],
borderRadiusTopLeft: 50,
borderRadiusTopRight: 50,
borderRadiusBottomRight: 50,
borderRadiusBottomLeft: 50
}]
});
} //firstLevelFunction
来源:https://stackoverflow.com/questions/32077817/highcharts-3d-pie-chart-rounding-the-edges