Highcharts datalabels未显示在饼图的每个切片的盈
问题描述:
我使用highcharts并试图从中得出饼图,但刚刚进入一个奇怪的问题我datalabels都显示不正确盈片,并且它只有在发生了在馅饼中有10+片。我不想显示连接器,我只想在饼图附近显示我的数据标签,并且应该正确显示每个切片的前面。另外我不想增加饼图的大小。Highcharts datalabels未显示在饼图的每个切片的盈
$(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
}
});
});
答
问题是要四舍五入的值,
试试这个,
$(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
}
});
});
答
你要的位置数据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
},
}]
我只需要显示百分比值或片外的数字,但所有的数字应该是在片不是在这里和那里,因为我不希望显示的前连接器也是如此。所以你的回答是不正确的,因为我已经在我的问题中提到它,并发布了代码。 –