当每块饼图的百分比达到50%(或52%和48%)时,百分比的位置发生变化,即每个图形的16%和84%不一样。我使用的代码是:
Highcharts.chart('container1', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
options3d: {
enabled: true,
alpha:70,
beta: 0
}
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
size:100,
depth: 15,
dataLabels: {
textOverflow:'none',
enabled: true,
color:'black',
connectorColor:'transparent',
format:'{point.percentage:.1f}%',
distance:-30,
style:{
textShadow:false}
},
showInLegend: false
}
},
series: [{
type: 'pie',
name: 'ΑΞΚΟΙ - ΑΝΘΣΤΕΣ',
data: [
['Παρόντες', <?php
while ($row2 = mysql_fetch_assoc($res2)) {
while( $row1 = mysql_fetch_assoc($res1)){
$row3['COUNT(*)']=$row2['COUNT(*)'] - $row1['COUNT(*)'];
echo $row3['COUNT(*)'];
}
}?>],
['Απόντες', <?php
while( $row3 = mysql_fetch_assoc($res3)){
echo $row3['COUNT(*)'];
}
?>]
]
}]
});
我可以使用一个功能,以使百分比的位置保持不变?提前致谢
您可以通过在每个标签上调用Highcharts.SVGElement.attr()
函数来设置数据标签的固定位置:
events: {
load: function() {
var points = this.series[0].points;
points.forEach((p) => p.connector.destroy()); // destroy connectors
// set fixed position for both points
points[0].dataLabel.attr({
x: 300,
y: 100
});
points[1].dataLabel.attr({
x: 75,
y: 100
});
}
}
现场演示:http://jsfiddle.net/kkulig/8z3g1LLy/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr