Highcharts datalabels未显示在饼图的每个切片的盈

我使用highcharts并试图从中得出饼图，但刚刚进入一个奇怪的问题我datalabels都显示不正确盈片，并且它只有在发生了在馅饼中有10+片。我不想显示连接器，我只想在饼图附近显示我的数据标签，并且应该正确显示每个切片的前面。另外我不想增加饼图的大小。Highcharts 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 
    } 
}); 

});

来源

2016-11-26 Faseeh Haris

问题是要四舍五入的值，

试试这个，

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

来源

2016-11-26 15:12:27 Sajeetharan

我只需要显示百分比值或片外的数字，但所有的数字应该是在片不是在这里和那里，因为我不希望显示的前连接器也是如此。所以你的回答是不正确的，因为我已经在我的问题中提到它，并发布了代码。 –

你要的位置数据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/

来源

2016-11-28 12:58:50 morganfree

Highcharts datalabels未显示在饼图的每个切片的盈

回答

相关问题