highchart饼图Data labels放在连接线的上方

highchart官网api

先上效果图：

代码；

Highcharts.chart('container', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: '2018年1月浏览器市场份额'
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			size: '60%',
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				alignTo: 'toPlotEdges',
				format: '<b>{point.name}</b>: {point.y}',
				y: -14,
				// 重点是这个地方
				connectorShape: function (labelPosition, connectorPosition, options) {
					var
					touchingSliceAt = connectorPosition.touchingSliceAt,
						alignment = labelPosition.alignment,
						left = 0,
						right = 0;
					if (alignment == 'left') {
						left = labelPosition.x + this.dataLabel.bBox.width + 14
						right = labelPosition.x + 2
					} else {
						left = labelPosition.x - this.dataLabel.bBox.width - 14
						right = labelPosition.x - 2
					}
					return ['M',
							left,
							labelPosition.y,
							'L',
							right,
							labelPosition.y,
							'L',
							touchingSliceAt.x,
							touchingSliceAt.y
						   ];
				}
			}
		}
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		data: [{
			name: 'Chrome',
			y: 61.41,
			sliced: true,
			selected: true
		}, {
			name: 'Internet Explorer',
			y: 11.84
		}, {
			name: 'Firefox',
			y: 10.85
		}, {
			name: 'Edge',
			y: 4.67
		}, {
			name: 'Safari',
			y: 4.18
		}, {
			name: 'Sogou Explorer',
			y: 1.64
		}, {
			name: 'Opera',
			y: 1.6
		}, {
			name: 'QQ',
			y: 1.2
		}, {
			name: 'Other',
			y: 2.61
		}]
	}]
});

<div id="container" style="min-width:400px;height:400px"></div>

其中比较重要的是：connectorShape 这个配置， 有两种情况，以上是设置成函数方法实现的。另外一种就是直接设置属性（
crookedLine：带转折

		dataLabels: {
			connectorShape: 'crookedLine',
			crookDistance: '70%' // 转折线长度
		}

straight：一条直线

		dataLabels: {
			connectorShape: 'straight'
		}

官方样例