HighCharts 3D饼图圆形边缘

时间:2015-08-18 16:28:02

标签: javascript highcharts rounded-corners

有谁知道如何将3D饼图的边缘弄圆以使其与所包含的图片类似?我尝试通过round-corner.js添加边框半径,但它没有任何影响。我也将图表代码放在下面。

enter image description here

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

0 个答案:

没有答案