ハイチェア円グラフ単一のデータラベルを移動

Question

私はexampleで見ることができますが、私はハイチャートの円グラフを中央に置こうとしていますが、大きなセクションのラベルは左側にあり、切り取られています。余裕がある場所を一番上に移動する方法はありますか？私はまた、コネクタを移動することもできるようにしたい。サイズが決して変わらないので、私はコンテナ内の場所をハードコーディングするつもりです。

コード：

$(function() { 
    Highcharts.setOptions({ 
     lang: { 
      thousandsSep: ',' 
     }, 
     chart: { 
      style: { 
       fontFamily: 'Myriad' 
      } 
     }, 
     colors: [ 
      'rgb(97,70,59)', 
      'rgb(129,123,59)', 
      'rgb(0,125,171)', 
      'rgb(240,50,46)', 
      'rgb(175,186,102)', 
      'rgb(228,21,58)', 
     ] 
    }); 

    var options = { 

     chart: { 
      renderTo: 'container', 
      align: 'top', 
      type: 'pie' 
     }, 

     credits: { 
      enabled: false, 
     }, 
     exporting: { 
      enabled: false 
     }, 
     title: { 
      text: '' 
     }, 
     plotOptions: { 
      pie: { 
       center: ['30%', '60%'], 
       animation: false, 
       borderWidth: 3, 
       dataLabels: { 
        enabled: true, 
        crop: false, 
        overflow: 'none', 
        softConnector: false, 
        connectorWidth: 2, 
        formatter: function() { 
         return this.key + "<br>" + this.percentage.toFixed(2) + '%'; 
        } 
       } 
      } 
     }, 
     xAxis: { 
      categories: [] 
     }, 
     series : [], 
    }; 

    var series = { 
     data: [ 
      { 
       type:'pie', 
       name: 'Example 1', 
       y: 5000 
      }, 
      { 
       type:'pie', 
       name: 'Example 2', 
       y: 2150 
      }, 
      { 
       type:'pie', 
       name: 'Example 3', 
       y: 3000 
      }, 
      { 
       type:'pie', 
       name: 'Example 4', 
       y: 8000 
      }, 
      { 
       type:'pie', 
       name: 'Example 5', 
       y: 5000 
      }, 
      { 
       type:'pie', 
       name: 'Example 6', 
       y: 50000 
      } 
     ], 
     size: '85%', // added for the donut view 
     innerSize: '75%', // updated for the donut view 
    }; 

    options.series.push(series); 
    var chart = new Highcharts.Chart(options); 
}); 

Answer 1

この時点で、これは、チャートのデフォルトbehavoirです。メインのデータラベルを無効にし、Rendererを使用して、テキストやパスなどのカスタム図形を追加することができます。

あなたの提案を私たちのuserVoice serviceに投稿して投票することもできます。