我已经将这些图表构建了几个月,就在今天,图例的样式似乎向左移动了大约150px。它们刚刚从饼图右侧对齐,但现在直接在饼图顶部呈现,我无法弄清楚原因。我可以使用边距和填充为div创建内联样式,但这并不能证明图例中与每个饼图对应的彩色框。我的代码/样式没有改变,我相信这是一个功能问题。这是我的代码; 任何帮助表示赞赏。
var options = {
chart:{type:'pie',
renderTo: 'ctl00_ContentPlaceHolder1_Overview1_AssetCategoryChart',
events: {
load: function(event) {
$('#ctl00_ContentPlaceHolder1_Overview1_AssetCategoryChart .highcharts-legend-item').last().append('<br/><div style="width: 200px; margin-left: 170px; height: 2px;">_____</div><br/><div style="width:200px; height: 10px;"><span style="float:right"><b>100%</b></span> </div>');
}
},
spacingTop: 0,
marginTop: 0
},
credits:{enabled: false},
colors:[
'#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319', '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
],
title:{text: null},
tooltip:{
enabled: true,
animation: true,
formatter: function(){
return this.point.name + '<br/>' + this.y.toFixed(2) + '%';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
animation: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: false,
formatter: function() {
return this.y.toFixed(2) + '%';
}
}
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'top',
borderWidth: 0,
useHTML: true,
itemMarginBottom: 4,
labelFormatter: function() {
return '<div style="width:180px; margin-left: 150px;"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y.toFixed(2) + '%</span></div>';
},
title: {
text: 'Category',
style: {
fontWeight: 'bold'
}
}
},
series: [{
type: 'pie',
dataLabels:{
},
data: [
['Real Estate', 12.55],
['Large-Cap Growth', 12.34],
['Foreign Large-Cap Blend', 12.19],
['Large-Cap Value', 7.51],
['Emerging Markets', 6.51],
['Health',5.59],
['Cash Equivalents',5.23],
['Foreign Large-Cap Value',4.02],
['Large-Cap Blend',3.95],
['World Allocation',3.55],
['Mid-Cap Growth',3.29],
['Remaining', 23.30]
]
}]
}