HighCharts饼图 – 在每个切片内添加文本

我正在使用代表资产分配的HighCharts创建一个金融饼图。 我的目标是创建一个表示每个切片中实际分配值的图表，但每张幻灯片内部将显示第二个数据标签，该标签显示各种投资工具的目标百分比。 值得注意的是，当前的资产配置可能并不总是与目标分配值相匹配。

除了每张幻灯片中的Target标签外，我已经完成了所有工作。 请参阅下图，了解我想要完成的任务：

这是我到目前为止：

var asset_allocation_pie_chart = new Highcharts.Chart({ chart: { renderTo: 'asset_allocation_bottom_left_div' }, title: { text: 'Current Asset Allocation', style: { fontSize: '17px', color: entity_color, fontWeight: 'bold', fontFamily: 'Verdana'} }, subtitle: { text: '(As of ' + effective_date_formatted + ')', style: { fontSize: '15px', color: entity_color, fontFamily: 'Verdana', marginBottom: '10px' }, y: 40 }, tooltip: { pointFormat: '{series.name}: {point.percentage}%', percentageDecimals: 0 }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorWidth: 1, connectorColor: '#000000', formatter: function() { return '' + this.point.name + ':
 ' + Math.round(this.percentage) + ' %'; } } } }, series: [{ type: 'pie', name: 'Asset Allocation', data: [['Investment Grade Bonds', InvestmentGradeBondPercentage], ['High Yield Bonds', HighYieldBondPercentage], ['Hedged Equity', HedgedEquityPercentage], ['Global Equity', GlobalEquityPercentage], ['Cash', CashPercentage]] }], exporting: { enabled: false }, credits: { enabled: false } }); 

Answer 1

这是jsfiddle ，以及显示内部和外部数据标签的代码。

为达到这个

1. 你需要给两个饼图系列。 一个人会在前面看，另一个人在后面。
2. 如果你想模拟它然后改变size: '80%' 。
3. 距离：距离的使用是显示进出的数据标签，您可以根据自己想要的位置进行更改。
4. allowPointSelect：默认值为false，但如果使用此值，则单击前面饼图切片时将显示后面的饼图。

码：

  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}: {point.percentage}%', percentageDecimals: 0 }, plotOptions: { pie: { size: '80%', cursor: 'pointer', data: [ ['Investment Grade Bonds', 100], ['High Yield Bonds', 200], ['Hedged Equity', 300], ['Global Equity', 400], ['Cash', 500] ] } }, series: [{ type: 'pie', name: 'Asset Allocation', dataLabels: { verticalAlign: 'top', enabled: true, color: '#000000', connectorWidth: 1, distance: -30, connectorColor: '#000000', formatter: function() { return Math.round(this.percentage) + ' %'; } } }, { type: 'pie', name: 'Asset Allocation', dataLabels: { enabled: true, color: '#000000', connectorWidth: 1, distance: 30, connectorColor: '#000000', formatter: function() { return '' + this.point.name + ':
 ' + Math.round(this.percentage) + ' %'; } } }], exporting: { enabled: false }, credits: { enabled: false } }); 

饼图将如下所示：