我的问题是当列值非常小时，数字文本与下一列中的数字重叠。如何设置最小列高或范围以避免此布局问题？谢谢。这是一个小提琴。
$(function () {
var categoryImgs = {
'Banana': '<img src="/images/2.png"><img> ',
'Orange': '<img src="/images/8.png"><img> ',
'Fruit': '<img src="/images/12.png"><img> ',
'Apple': '<img src="/images/4.png"><img> ',
'Coconut': '<img src="/images/3.png"><img> '
};
var totals = new Array();
var stackTotals = new Array();
var i = 5, j = 0;
//totals = HighchartsAdapter
function reverse() {
totals.reverse();
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Premium Summary'
},
xAxis: {
categories: ['Banana', 'Fruit', 'Orange', 'Apple', 'Coconut'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div id="div1" class="myToolTip' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function (e) {
var elm = e.currentTarget.children.div1.className;
switch (elm) {
case "myToolTipBanana":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/2.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$89</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$150</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$150</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$200.12</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$514.55<b></td></tr>' + '</table>');
break;
case "myToolTipFruit":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/8.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$400</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$186.76</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$210.23</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$290</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$1086.99<b></td></tr>' + '</table>');
break;
case "myToolTipOrange":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/12.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$258.13</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$150</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$143.50</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$45.78</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$597.41<b></td></tr>' + '</table>');
break;
case "myToolTipApple":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/3.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$212</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$200</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$219</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$71</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$702<b></td></tr>' + '</table>');
break;
case "myToolTipCoconut":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/4.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$152</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$100</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$143</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$120</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$515<b></td></tr>' + '</table>');
break;
}
},
mouseout: function () {
document.getElementById('hoverboard').style.display = "none";
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['Banana', 'Fruit', 'Orange', 'Apple', 'Coconut'],
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return this.series.name + ', ' + this.x + ', ' +' $'+ this.y + '<br/>';
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth:0,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
style: {
},
format: '${y}'
}
}
},
series: [{
name: 'Jam',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120],
color: '#B9B6BA',
}, {
name: 'Fruit',
data: [150, 186.76, 150, 20, 10.0],
color: '#E5764C'
}, {
name: 'Candy',
data: [29,4, null , 21.2, 15.2],
color: '#9D8365'
}, {
name: 'Boxes',
data: [15.43, 10.23, 14.50, 21.9, 14.3],
color: '#9F7AC3'
} ]
});
});