ハイチャートのデータラベルが円グラフの各スライスの前に表示されない

Question

ハイチャートを使用していますが、円グラフを描画しようとしていますが、データラベルがスライスの正面に正しく表示されず、パイに10以上のスライスがあります。私はコネクターを表示したくありません。私は、データラベルをパイの近くに表示し、すべてのスライスの正面を正しく表示する必要があります。また、私は円グラフのサイズを大きくしたくありません。

Pie Chart

$(function() { 
var asset_allocation_pie_chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'asset_allocation_bottom_left_div' 
    }, 
    title: { 
     text: 'Current Asset Allocation', 
     style: { 
      fontSize: '17px', 
      color: 'red', 
      fontWeight: 'bold', 
      fontFamily: 'Verdana' 
     } 
    }, 
    subtitle: { 
     text: '(As of ' + 'dfdf' + ')', 
     style: { 
      fontSize: '15px', 
      color: 'red', 
      fontFamily: 'Verdana', 
      marginBottom: '10px' 
     }, 
     y: 40 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
     percentageDecimals: 0 
    }, 
    plotOptions: { 
     pie: { 
      size: '60%', 
      cursor: 'pointer', 
      data: [ 
       ['Investment Grade Bonds', 100], 
       ['High Yield Bonds', 200], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
       ['Cash', 500], 
       ['Cash', 500], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
       ['Cash', 500], 
       ['High Yield Bonds', 200], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
       ['Cash', 500], 
       ['High Yield Bonds', 200], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
      ] 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Asset Allocation', 
     dataLabels: {     
      enabled: true, 
      color: '#000000', 
      connectorWidth: 0, 
      distance: 5, 
      connectorColor: '#000000', 
      formatter: function() { 
       return Math.round(this.percentage) + ' %'; 
      } 

     } 
    }], 
    exporting: { 
     enabled: false 
    }, 
    credits: { 
     enabled: false 
    } 
}); 

}); 

Answer 1

問題は、あなたが

あなたはデータ・ラを配置する必要が

$(function() { 
    var asset_allocation_pie_chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    title: { 
     text: 'Current Asset Allocation', 
     style: { 
     fontSize: '17px', 
     color: 'red', 
     fontWeight: 'bold', 
     fontFamily: 'Verdana' 
     } 
    }, 
    subtitle: { 
     text: '(As of ' + 'dfdf' + ')', 
     style: { 
     fontSize: '15px', 
     color: 'red', 
     fontFamily: 'Verdana', 
     marginBottom: '10px' 
     }, 
     y: 40 
    }, 

    plotOptions: { 
     pie: { 
     size: '60%', 
     cursor: 'pointer', 
     series: { 
      dataLabels: { 
      enabled: true, 
      format: '{point.name}: {point.y:.1f}%' 
      } 
     } 

     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Asset Allocation', 

     data: [ 
     ['Investment Grade Bonds', 100], 
     ['High Yield Bonds', 200], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ['Cash', 500], 
     ['Cash', 500], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ['Cash', 500], 
     ['High Yield Bonds', 200], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ['Cash', 500], 
     ['High Yield Bonds', 200], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ] 
    }], 
    exporting: { 
     enabled: false 
    }, 
    credits: { 
     enabled: false 
    } 
    }); 

}); 

DEMO

Answer 2

、これを試してみて、値を四捨五入しているありますあなたがイメージのように配置したい場合は、あなた自身の上にbels。

パイのスライス値に従って、手動で位置を計算する方法もあります。 もう1つ、同じデータを持つ別の円シリーズを作成し、不可視にしてデータラベルを使用します。

series: [{ 
    enableMouseTracking: false, 
    showInLegend: false, 
    color: 'transparent', 
    colorByPoint: false, 
    size: '100%', 
    innerSize: '60%', 
    dataLabels: { 
    style: { 
     "color": "black", 
     "fontSize": "11px", 
     "fontWeight": "bold", 
    }, 
    connectorWidth: 0, 
    connectorPadding: 0, 
    distance: -35, 
    formatter: function() { 
     return Math.round(this.percentage) + ' %'; 
    } 
    }, 

}, { 
    name: 'Asset Allocation', 
    dataLabels: { 
    enabled: false 
    }, 
}] 

例：https://jsfiddle.net/3me3pyyf/

私はここにいないとそこに私が表示したくないので、スライスの前にあるべきパーセント値またはスライス外の数字が、すべての番号を表示する必要が