Javascript 如何使highcharts饼图数据标签始终位于每个切片的中心？

我真的很想知道如何使数据标签始终位于饼图每个部分的中心

正常状态如下所示（您也可以看到此示例）

---

但是，当我减小此图表的宽度或高度时，数据标签组合在一起，如下图所示。我认为这是距离的问题。我尝试动态更改距离，但失败了

---

所以，我想做的是，即使减小/增大图表大小，也要将数据标签始终定位在每个切片的中心。从我的经验来看，目前没有一种方法可以在每个饼片中间直接标记标签。我尝试过像您在示例中那样定位标签，但结果相同（不令人满意），尤其是在较小的浏览器窗口中

我建议要么使用图例来显示馅饼中的类别/类型，要么考虑使用堆叠的条形图代替（参见）。 我希望这是有帮助的

$('#container').highcharts({
    chart: {
        type: 'pie'
    },

    plotOptions: {
        pie: {
            center:  ["50%", "50%"],
            dataLabels: {
                distance: -50
            }
        },
        series:{
            events:{
                load:function(){
                    console.log(this.chartWidth, this.chartHeight);   
                }
            }
        }
    },

    series: [{
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    }]
});