HighCharts 3D Pie Chart Rounding the Edges

不想你离开。 提交于 2020-01-07 09:07:16

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!