Высококачественные данные datalabels не показывают infront каждого фрагмента в круговой диаграмме

Question

Я использую highcharts и пытаюсь нарисовать круговую диаграмму, но только что попал в странную проблему, мои datalabels не показывают правильно infront ломтиков, и это происходит только тогда, когда их 10 кусочков в пироге. Я не хочу показывать коннектор. Я просто хочу показать свои datalabels возле пирога и должен правильно отображать каждый фрагмент. Также я не хочу увеличивать размер круговой диаграммы.

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

Вы должны поместить данные LA если вы хотите, чтобы они размещались как на картинке.

Один из способов - вычисление позиций вручную в соответствии со значением среза пирога. Другой, создайте еще одну серию пирога с теми же данными, сделайте ее невидимой и используйте свои метки данных.

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/