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

Highcharts百分比可变性位置

1 个答案: