Highcharts：餅圖標籤的位置

Question

請看下面的例子：

http://jsfiddle.net/klodoma/2xgkzyh4/

是否有任何設置，將標籤貼更不恰當獨立地調整呢？

火狐應該是多了起來，其他人應該更向上和向右......

代碼：

$(function() { 
 
    $('#container').highcharts({ 
 
     title: { 
 
      text: 'Browser market shares at a specific website, 2014' 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       dataLabels: { 
 
        connectorWidth: 12, 
 
        style : { 
 
        fontSize: 25 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      type: 'pie', 
 
      name: 'Browser share', 
 
      data: [ 
 
       ['Firefox', 45.0], 
 
       ['IE', 26.8], 
 
       ['Safari', 8.5], 
 
       ['Opera', 6.2], 
 
       ['Others', 0.7] 
 
      ] 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 300px"></div>

Answer 1

我總是發現標籤定位餡餅（以及極地和蜘蛛）圖表難以管理。根據你的數據和你想要的格式，他們可能會非常挑剔和不守規矩的位置，如你所願。

我建議完全刪除標籤並改爲使用圖例。我已經用這個概念更新了你的代碼片段。

請讓我知道這是否對你有幫助！

$(function() { 
 
    $('#container').highcharts({ 
 
     title: { 
 
      text: 'Browser market shares at a specific website, 2014' 
 
     }, 
 
     legend: { 
 
      enabled: true, 
 
      borderWidth: 1, 
 
      borderColor: 'gray', 
 
      align: 'center', 
 
      verticalAlign: 'top', 
 
      layout: 'horizontal', 
 
      x: 0, y: 50 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       allowPointSelect: true, 
 
       cursor: 'pointer', 
 
       dataLabels: { enabled: false }, 
 
       showInLegend: true 
 
      } 
 
     }, 
 
     series: [{ 
 
      type: 'pie', 
 
      name: 'Browser share', 
 
      data: [ 
 
       ['Firefox', 45.0], 
 
       ['IE', 26.8], 
 
       ['Safari', 8.5], 
 
       ['Opera', 6.2], 
 
       ['Others', 0.7] 
 
      ] 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 300px"></div>