jQuery HighCharts 饼图图例值对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16223616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts Pie Chart Legend value alignment
提问by Nick G
I just want to have my legend have the name value left aligned and the percentage value right aligned, I have worked on this thing for 2 straight days and opened a couple different questions on forums about it and have gotten 0 answers so anyone with any knowledge i'd love your help! thank you very much http://jsfiddle.net/hAnCr/2/
我只是想让我的图例将名称值左对齐，百分比值右对齐，我已经连续两天研究这件事，并在论坛上提出了几个不同的问题，得到了 0 个答案，所以任何有知识的人我很想得到你的帮助！非常感谢 http://jsfiddle.net/hAnCr/2/
$("document").ready(
function(){
$('#container').highcharts({
chart:{
type:'pie',
height: 300,
width: 400
},
credits:{enabled: false},
colors:[
'#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319', '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
],
title:{text: null},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: false,
formatter: function() {
return this.percentage.toFixed(2) + '%';
}
}
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function() {
return '<div style="text-align: left; width:130px;">' + this.name + '</div><div style="width:40px; text-align:right;">' + this.y + '%</div>';
}
},
series: [{
type: 'pie',
dataLabels: {
},
data: [
['Domestic Equity', 38.5],
['International Equity', 26.85],
['Other', 15.70],
['Cash and Equivalents', 10.48],
['Fixed Income', 8.48]
]
}]
});
});
回答by Sebastian Bochan
You should set float:left; for both divs inside legend.
你应该设置 float:left; 对于图例中的两个 div。
labelFormatter: function() {
return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.y + '%</div>';
