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>