把tooltip信息显示的svg渲染方式改成html渲染方式,useHTML: true,//不用svg渲染,换成html渲染,在调整弹出信息框样式
css样式
#RepairType .highcharts-tooltip-box //此处隐藏控件默认的tooltip显示框
{
display:none !important;
}
#RepairType .highcharts-tooltip //此处调整tooltip 显示信息样式
{ pointer-events: auto !important;//当此属性值为none是所有事件(点击、滚动条等事件)都失效
left: 270px !important;
top: 130px !important;
z-index: 999 !important;
height: 330px !important;
width: 280px !important;
overflow-y: scroll !important;
position: absolute !important;
border: 2px solid #00C2FB;
border-radius: 4px;
padding: 10px;
background: #ffffff;
margin: 50px 0px 0px -18px;
}
#RepairType .highcharts-tooltip>span
{
margin-top: -20px !important;
}
#RepairType>.highcharts-container {
position: static !important;
}
var chart = Highcharts.chart(‘RepairType’, {
chart: {
type: ‘column’,
inverted: true,
options:‘container-third’
},
exporting: { // 右上角的导出菜单
enabled: false
},
title: {
text: ‘xxxx统计’
},
xAxis: {
categories: [‘’]
},
yAxis: {
min: 0,
title: {
text: ‘’
}
},
credits: {
enabled: false
},
tooltip: {
shared: true,
useHTML: true,//不用svg渲染,换成html渲染
pointFormat: ‘
valueDecimals: 2
},
plotOptions: {
column: {
stacking: ‘percent’
}
},
legend:{
maxHeight:100 //图例最大高度
},
series: bar_left_data
});
效果: