Highcharts 데이터 레이블이 파이 차트의 각 슬라이스의 앞쪽에 표시되지 않습니다.

Question

하이 차트를 사용하고 있는데 파이 차트를 그려야하지만 이상한 문제가 발생했습니다. 데이터 레이블이 슬라이스의 infront을 올바르게 표시하지 못하고 있으며, 파이 10 개 이상입니다. 커넥터 옆에 데이터 레이블을 표시하고 각 슬라이스의 infront을 올바르게 표시해야한다는 것을 표시하고 싶지 않습니다. 또한 파이 차트의 크기를 늘리고 싶지 않습니다.

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.

파이 슬라이스 값에 따라 위치를 수동으로 계산하는 한 가지 방법이 있습니다. 다른 데이터는 동일한 데이터로 다른 파이 계열을 만들고 보이지 않게 만들고 데이터 레이블을 사용합니다.

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/

난 그냥 여기 저기에 내가 보여주고 싶지 않기 때문에 슬라이스 앞에 있어야 백분율 값 또는 슬라이스의 외부 번호를 제외한 모든 수를 표시 할 필요가