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

Question

我真的想知道如何在饼图中使数据标签始终位于每个切片的中心。

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

$('#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]
        ]
    }]
});

但是，当我减小此图表的宽度或高度时，数据标签会合并，如下图所示。我认为这是distance财产的问题。我试图动态改变距离但失败了。

因此，我想要做的是将数据标签定位在每个切片的中心，甚至减少/增加图表大小。

Answer 1

这是一个艰难的。根据我的经验，目前还没有一种方法可以直接在每个饼图的中间明确地居中标签。我尝试使用相同（不令人满意的）结果在您的示例中定位标签，尤其是在较小的浏览器窗口中。

我建议您使用图例来显示饼图中的类别/类型，或者考虑使用堆叠条形图（请参阅http://www.highcharts.com/demo/bar-stacked）。

我希望这有用！