停止Highchart饼图DataLabel和Legend重叠

Question

我有一个Highchart饼图，我需要一种方法来阻止标签和图例重叠。

这是一个DEMO：http://jsfiddle.net/vc7ccag6/

Stackoverflow希望我发布代码：

        Highcharts.setOptions({
        "colors": ["#626A71", "#D26F28", "#F6A84F", "#1B5EA3", "#34A8E0"],
        "title": {
            "style": {
                "color": "#BFBFBF"
            }
        },
        "subtitle": {
            "style": {
                "color": "#BFBFBF"
            }
        },
        "chart": {
            "backgroundColor": null
        },
        "legend": {
            "backgroundColor": null,
            "itemStyle": {
                "color": "#BFBFBF",
                "font": "9pt Trebuchet MS, Verdana, sans-serif"
            },
            "itemHoverStyle": {
                "color": "grey"
            }
        },
        "xAxis": {
            "labels": {
                "style": {
                    "color": "#BFBFBF"
                }
            },
            "gridLineWidth": 0,
            "lineWidth": 0,
            "minorGridLineWidth": 0,
            "lineColor": "transparent",
            "minorTickLength": 0,
            "tickLength": 0
        },
        "yAxis": {
            "labels": {
                "enabled": false
            },
            "gridLineWidth": 0,
            "lineWidth": 0,
            "minorGridLineWidth": 0,
            "lineColor": "transparent",
            "minorTickLength": 0,
            "tickLength": 0
        },
        "tooltip": {
            "followpointer": true
        },
        "credits": {
            "enabled": false
        },
        "plotOptions": {
            "series": {
                "borderWidth": 0
            },
            "bar": {
                "minPointLength": 5,
                "dataLabels": {
                    "allowOverlap": true,
                    "overflow": "none",
                    "crop": false,
                    "align": "left",
                    "enabled": true,
                    "color": "#BFBFBF",
                    "style": {
                        "fontSize": 9
                    }
                }
            },
            "column": {
                "minPointLength": 5,
                "dataLabels": {
                    "allowOverlap": true,
                    "overflow": "none",
                    "crop": false,
                    "enabled": true,
                    "color": "#BFBFBF",
                    "style": {
                        "fontSize": 9
                    }
                }
            }
        }
    });
    Chart_984650 = new Highcharts.Chart({
        "chart": {
            "renderTo": "RMSI_Chart_984650",
            "type": "pie",
            "marginTop": 60,
            "marginBottom": 15,
            "marginLeft": 105,
            "marginRight": 25,
            "plotShadow": false
        },
        "title": {
            "style": {
                "fontSize": 13
            },
            "text": "Total budget - $49.547M"
        },
        "subtitle": {
            "text": "Total Spent - $10.754M"
        },
        "yAxis": {
            "min": 0,
            "title": {
                "text": ""
            },
            "plotLines": [{
                "value": 5.5,
                "color": "#BFBFBF",
                "dashStyle": "solid",
                "width": 2,
                "zIndex": 4,
                "label": {
                    "text": "4\/3\/15",
                    "align": "center",
                    "verticalAlign": "top",
                    "textAlign": "center",
                    "y": -3,
                    "rotation": 0,
                    "style": {
                        "color": "#BFBFBF",
                        "fontWeight": "bold",
                        "fontSize": 10
                    }
                }
            }]
        },
        "legend": {
            "reversed": 1,
            "enabled": true,
            "align": "right",
            "verticalAlign": "top",
            "layout": "vertical",
            "floating": true,
            "itemMarginBottom": 5,
            "x": 0,
            "y": 10
        },
        "tooltip": {
            "followPointer": true,
            "shared": true,
            "formatter": function () {
                var s = '<b>' + this.series.name + '</b>';
                s += '<br />' + this.point.name + ': ' + this.y + '%' + ' - ' + this.point.value;
                return s;
            }
        },
        "plotOptions": {
            "series": {
                "pointWidth": 14,
                "borderWidth": 2,
                "borderColor": "#3A434C",
                "cursor": "pointer",
                "point": {
                    "events": {
                        "click": function () {
                            //do ajax calls here!!!
                            alert('Clicked!!' + ' - ' + this.name + ' - ' + this.value + ' - ' + this.name + ' - ' + this.id);
                        }
                    }
                }
            },
            "pie": {
                "dataLabels": {
                    "enabled": 1,
                    "color": "#BFBFBF",
                    "connectorWidth": 2,
                    "allowOverlap": true,
                    "overflow": "none",
                    "crop": false,
                    "formatter": function () {
                        return '<b>' + this.point.name + '</b>: ' + this.point.value;
                    }
                },
                "innerSize": 100,
                "depth": 40,
                "showInLegend": true,
                "allowPointSelect": true,
                "size": "100%",
                "borderColor": "black",
                "borderWidth": 6
            }
        },
        "series": [{
            "name": "2015 National Spend as of 4\/3\/15",
            "data": [{
                "name": "Remaining",
                "y": 22,
                "value": 12000,
                "id": 79
            }, {
                "name": "Projects",
                "y": 2,
                "value": 23555,
                "id": 80
            }, {
                "name": "Remodels",
                "y": 15,
                "value": 89555,
                "id": 81
            }, {
                "name": "NewItems",
                "y": 2,
                "value": 4000,
                "id": 82
            }, {
                "name": "Resets",
                "y": 26,
                "value": 684351,
                "id": 83
            }]
        }]
    });