我需要以下方面的帮助:
要在每个饼图上放置 html 标签(元素+类以显示图标)并将其定位在悬停工具提示后面？
目前我有这个:
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>'
}
]
}]
});
如果将鼠标悬停在每个切片上，工具提示会出现在字体超棒的图标后面吗？
能不能落后？
最佳答案
您需要使用 html 工具提示而不是 svg 工具提示。设置tooltip.useHTML为真。
禁用工具提示的 svg 框
tooltip: {
borderWidth: 0,
borderColor: null,
borderRadius: 0,
shadow: false,
backgroundColor: "none",
useHTML: true,
在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/
关于javascript - Highcharts - 如何在悬停时将工具提示放在每个饼图切片的图标后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42760748/