highcharts.js图表tooltip显示信息超出长度处理方案

把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: ‘

{series.name}: {point.y}’ + ‘({point.percentage:.2f}%)
’,
valueDecimals: 2
},
plotOptions: {
column: {
stacking: ‘percent’
}
},
legend:{
maxHeight:100 //图例最大高度
},
series: bar_left_data
});

效果:
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值