javascript - Highchars 百分比变异位置

Question

当每张饼图的百分比达到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(*)'];

                    }

                    ?>]
]  
    }]
});

我可以使用一个功能来使百分比位置保持恒定吗？提前致谢

Answer 1

您可以通过在每个标签上调用 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