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

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] 
     ] 
    }] 
}); 

---

但是，当我减小此图表的宽度或高度，datalabels组合看起来像下面的图片。我认为这是distance财产的问题。我试图动态改变距离，但失败了。

结果，我想要做的是在每片甚至减少/增加图表大小的中心始终定位datalabels。

Answer 1

这是一个艰难的。根据我的经验，目前还没有一种方法可以将标签直接显示在每个饼图片的中间。我已经尝试了在您的示例中对标签进行定位，结果相同（不满意），尤其是在较小的浏览器窗口中。

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

我希望这有帮助！