我正在使用代表 Assets 分配的 HighCharts 创建一个金融饼图。我的目标是创建一个图表,表示每个切片中的实际分配值,但每张幻灯片内部实质上将显示第二个数据标签,该标签显示各种投资工具的目标百分比。需要注意的是,当前的 Assets 配置可能并不总是与目标配置值相匹配。
除了每张幻灯片内的目标标签之外,我已经完成了所有工作。请参阅下图了解我想要完成的任务:
这是我迄今为止所拥有的:
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}: <b>{point.percentage}%</b>', percentageDecimals: 0 },
plotOptions: {
pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorWidth: 1, connectorColor: '#000000', formatter: function() { return '<b>' + this.point.name + '</b>:<br/> ' + 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 }
});
最佳答案
这是jsfiddle为此和代码显示内部和外部的数据标签。
为了实现这个目标
- 您需要提供两个饼图系列。一个人会看前面,另一个人会看后面。
- 如果您想模拟它,请更改
size: '80%'
。 - 距离:距离的用途是显示数据标签进出,您可以根据您想要的位置进行更改。
- 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}: <b>{point.percentage}%</b>',
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 '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %';
}
}
}],
exporting: {
enabled: false
},
credits: {
enabled: false
}
});
饼图如下所示:
关于jquery - HighCharts 饼图 - 在每个切片内添加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15235666/