Highcharts饼图工具提示被切断
问题描述：
我使用Highcharts生成饼图。它生成的很好，但问题是我有一个固定的区域来显示图表，并且工具提示有大量的文本。
I am using Highcharts to generate a pie chart. It is generating it fine but the problem is that I have a fixed area to display the chart and the tooltip has large amount of text.
工具提示太大而不适合在图表div中，我该如何解决这个问题？
The tooltip is too large to fit inside the chart div, how can I fix this?
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'ER_inpatient_stay',
plotBackgroundColor: null,
plotBorderWidth: null,
marginTop: 0,
plotShadow: false,
backgroundColor: 'none',
},
legend: {
layout: 'vertical',
align: 'left',
borderColor: '#fff',
itemMarginTop: 30,
verticalAlign: 'top',
x: 70,
y: 0
},
title: {
text: ''
},
tooltip: {
userHTML: true,
style: {
padding: 10,
width: 250,
height: 60,
},
formatter: function () {
return this.point.residents;
},
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
formatter: function () {
return this.point.y;
},
color: 'white',
distance: -10
},
showInLegend: true,
tooltip: {}
}
},
series: [{
type: 'pie',
size: 80,
name: '',
data: [{
'name': 'E/R Visits',
'y': 1,
'residents': "fMonroe Monroe",
'color': '#FA3D19'
}, {
'name': 'Inpatient Stay',
'y': 21,
'residents': "fGinanni Ginanni, fJobs Jobs, fMonroe Monroe, fDickerson Dickerson, fBrown Brown, fHerter Herter, fDavidson Davidson, fFernbach Fernbach, fGentry Gentry, fJones Jones, fKostic Kostic, fnewresident lnewresident, fLogger Logger, fMaxwell Maxwell, fMcGuire McGuire, fMiller Miller, fO'Farrell O'Farrell, fProgram Program, fProgram2 Program2, frer rer",
'color': 'orange'
}]
}]
});
});
})
答
通过动态地改变svg和highchart-container的大小，我已经解决了问题。
Issue has been resolved for me, by changing the svg and highchart-container size dynamically as following
$('.highcharts-series-group').mouseover(function(){
setTimeout(function() {
$('.highcharts-tooltip').css({'height': 'auto !important'});
var tspans = $('tspan').length;
var svg_height = 150;
if( (tspans * 16 ) > 150 ){
svg_height = tspans * 16;
}
$('.highcharts-container').css({'height': svg_height+'px'});
$('svg').height(svg_height);
},100);
});