Highcharts：円グラフは、位置

Question

ラベルには、次の例を参照してください：

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

は独立して、それらを調整することなく、より適切にラベルを配置するための任意の設定はありますか？

Firefoxはその他のコードよりアップし、右...

する必要があり、よりアップする必要があります：

$(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>