我正在尝试旋转和定位Highcharts饼图中每个部分的数据标签,但感觉越陷越深,却没有接近解决方案。希望能得到一些提示或建议。
所需目标的示意图:
每个饼图中将有三个部分。我希望:
- 每个数据标签都被旋转,从而为每个部分创建一个中心线(由品红色线条说明); - 数据标签在段落中居中,无论字体大小如何。
有关如何开始此操作的建议,或者可以让我接近解决方案的示例?
所需目标的示意图:
每个饼图中将有三个部分。我希望:
- 每个数据标签都被旋转,从而为每个部分创建一个中心线(由品红色线条说明); - 数据标签在段落中居中,无论字体大小如何。
有关如何开始此操作的建议,或者可以让我接近解决方案的示例?
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
backgroundColor: 'transparent',
spacing: [0, 0, 0, 0],
margin: [0, 0, 0, 0],
events: {
load: function() {
$.each(this.series[0].data, function(index, point) {
var degree = (point.angle * 180) / Math.PI;
var rotation = 0;
(degree < 0) && (degree += 360);
// If the slice is in the left half, then rotate 180
// so the text won't look upside down
if (degree >= 90 && degree <= 270) {
rotation = degree - 180;
point.dataLabel.x = 0;
point.dataLabel.y = 0;
point.dataLabel.translateX = (point.labelPos[2] + point.labelPos[4]) / 2;
point.dataLabel.translateY = (point.labelPos[3] + point.labelPos[5]) / 2;
} else {
point.dataLabel.x = 0;
point.dataLabel.y = 0;
rotation = degree - 180;
point.dataLabel.translateX = (point.labelPos[2] + point.labelPos[4]) / 2;
point.dataLabel.translateY = (point.labelPos[3] + point.labelPos[5]) / 2;
}
point.dataLabel.rotation = Math.floor(rotation);
point.dataLabel.show();
point.dataLabel.updateTransform();
});
}
}
},
title: {
text: null
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
borderColor: 'rgb(243, 243, 243)',
borderWidth: 2,
shadow: false,
center: ['50%', '50%'],
colors: ['rgb(77, 196, 215)', 'rgb(50, 68, 132)', 'rgb(85, 119, 183)']
}
},
tooltip: {
enabled: false
},
series: [{
type: 'pie',
name: 'Votes',
data: [
['Yes', 9],
['No', 5],
['Undecided', 2]
],
size: '90%',
dataLabels: {
formatter: function () {
return this.point.name;
},
color: 'white',
connectorWidth: 0,
distance: -80
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 600px; width: 100%;"></div>