如何讓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）。

我希望這有幫助！