我正在使用代表资产分配的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',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和用于显示内部和外部数据标签的代码.
为了达成这个
>你需要给出两个饼图系列.一个人会在前面看,另一个人在后面.
>如果你想模拟它然后改变大小：’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',fontFamily: 'Verdana'
}
},subtitle: {
text: '(As of ' + 'dfdf' + ')',style: {
fontSize: '15px',marginBottom: '10px'
},y: 40
},tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',percentageDecimals: 0
},plotOptions: {
pie: {
size: '80%',data: [
['Investment Grade Bonds',100],200],300],400],500]
]
}
},dataLabels: {
verticalAlign: 'top',enabled: true,distance: -30,formatter: function() {
return Math.round(this.percentage) + ' %';
}
}
},{
type: 'pie',dataLabels: {
enabled: true,distance: 30,formatter: function() {
return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %';
}
}
}],exporting: {
enabled: false
},credits: {
enabled: false
}
});
饼图将如下所示：
