[英]Highcharts - How do I position tooltip behind icon on each pie slice on hover?
I wanted help with the following: 我需要以下方面的帮助:
To put html tags on each pie slice(element+class to show icon) and have it positioned behind the hover tooltip? 要将html标签放在每个饼图切片上(元素+类显示图标),并将其放置在悬停工具提示的后面?
At the moment I have this: 目前,我有这个:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'modules',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
backgroundColor:"transparent"
},
credits:{
enabled:false
},
exporting: {
enabled: false
},
title: {
text: '',
style: {
fontSize: '20px',
color: '#999999',
fontWeight: 'bold',
fontFamily: 'Verdana'
}
},
subtitle:{
text: '',
style: {
fontSize: '15px',
color: '#999999',
fontFamily: 'Verdana'
}
},
tooltip: {
borderWidth: 0,
borderColor: null,
borderRadius: 0,
shadow: false,
shape: "callout",
pointFormat: "{series.data.name}",
backgroundColor: "rgba(0,0,0,0.8)",
style: { "color": "#ffffff", "cursor": "default", "fontSize": "12px", "pointerEvents": "none", "whiteSpace": "nowrap" }
},
plotOptions: {
pie: {
allowPointSelect: true, // on click pulls segment out
stickyTracking: false, // mouse events
cursor: 'pointer',
followPointer:true,
dataLabels: {
enabled: false, // annotation of each segment
format: '<b>{point.name}</b>',
style: {
color: "#FFFFFF"
}
}
},
series: {
animation: {
duration: 1000,
easing: 'easeOutBounce'
},
point: {
events: {
mouseOver: function(event) {
var point = this;
if (!point.selected) {
//chart.tooltip.shared = true;
timeout = setTimeout(function () {
point.firePointEvent('click');
chart.tooltip.shared = false;
chart.tooltip.refresh(point);
}, 100);
}
}
}
},
events: {
mouseOut: function() {
chart.tooltip.shared = false;
clearTimeout(timeout);
}
},
dataLabels: {
allowOverlap:false,
enabled: true,
useHTML: true,
format:'{point.icon}',
formatter: function() {
return Math.round(this.percentage*100)/100 + ' %';
},
distance: -70,
color:'#FFFFFF'
}
}
},
series: [{
type: 'pie',
name: 'Modules',
colorByPoint: true,
color:'#FFFFFF',
data: [
{
name: 'Scheduling',
y: 60,
icon: '<i class="fa fa-book" style="font-size:80px;margin:-20px;"></i>'
},
{
name: 'Budgeting',
y: 60,
icon: '<i class="fa fa-calculator" style="font-size:70px;margin:-24px -20px -20px -40px;"></i>'
},
{
name: 'Attendance',
y: 60,
icon: '<i class="fa fa-user" style="font-size:80px;margin:-40px -15px -40px -15px;"></i>'
},
{
name: 'Reporting',
y: 60,
icon: '<i class="fa fa-bar-chart" style="font-size:80px;margin:-40px -20px -40px -15px;"></i>'
},
{
name: 'Absence',
y: 60,
icon: '<i class="fa fa-bed" style="font-size:80px;margin:-30px -20px -30px 0px;"></i>'
},
{
name: 'Payroll',
y: 60,
icon: '<i class="fa fa-gbp" style="font-size:80px;margin:-10px -20px -20px 10px;"></i>'
}
]
}]
});
If you hover each slice, the tooltip is behind the font-awesome icon? 如果将鼠标悬停在每个切片上,工具提示将位于超棒字体图标的后面吗?
Can it be behind? 能落后吗?
You need to use an html tooltip instead of an svg tooltip. 您需要使用html工具提示而不是svg工具提示。 Set tooltip.useHTML to true.
将tooltip.useHTML设置为true。
Disable tooltip's svg box 禁用工具提示的svg框
tooltip: {
borderWidth: 0,
borderColor: null,
borderRadius: 0,
shadow: false,
backgroundColor: "none",
useHTML: true,
Set style in css: 在CSS中设置样式:
.highcharts-tooltip > span {
padding: 5px;
background-color: rgba(0,0,0,0.8);
background-color: white\9;
/* < IE11 */
border: 1px solid #a8a7a5;
z-index: 9999;
}
https://jsfiddle.net/tz5stfcw/ https://jsfiddle.net/tz5stfcw/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.