如何隐藏highChart plotLine标签直到鼠标悬停? [英] How to hide highChart plotLine label until mouseover?
本文介绍了如何隐藏highChart plotLine标签直到鼠标悬停?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在highChart有一个标签系列,有一个标签。我想做的是隐藏标签,直到鼠标悬停。有没有人试过这个?
$(function(){
var $ report = $(' );
$('#container')。highcharts({
xAxis:{
plotLines:[{//标记周末
颜色:'rgba 254,235,236,0.5)',
from:Date.UTC(2010,0,2),
to:Date.UTC(2010,0,3),
zIndex:1,
label:{
text:'Event',
align:'left',
style:{color:'#000'},
visible:false
$ b:
mouseover:function(e)
:
:
: {
console.log('show plotline label')
},
mouseout:function(e){
console.log('hide plotline label')
}
}
}],
tickInterval:24 * 3600 * 1000,
类型:'datetime'
},
系列: [{
data:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4],
pointStart:Date.UTC(2010,0,1),
pointInterval :24 * 3600 * 1000
}]
});
});
解决方案
使用 c $ c>代替
可见
plotLines:[{标记周末
标签:{
text:'label',
style:{
display:'none'
}
},
events:{
mouseover:function(e){
this.label.element.style.display ='block';
},
mouseout:function(e){
this.label.element.style.display ='none';
}
}
}],
http://jsfiddle.net/leongaban/n36y336z/
I have a plotline series on my highChart which has a label. What I'm trying to do is hide the label until mouseover. Has anyone attempted this before?
$(function() {
var $report = $('#report');
$('#container').highcharts({
xAxis: {
plotLines: [{ // mark the weekend
color : 'rgba(254,235,236,0.5)',
from : Date.UTC(2010, 0, 2),
to : Date.UTC(2010, 0, 3),
zIndex: 1,
label: {
text : 'Event',
align : 'left',
style : { color: '#000' },
visible : false
},
events: {
click: function(e) {
console.log('clicked event')
},
mouseover: function(e) {
console.log('show plotline label')
},
mouseout: function(e) {
console.log('hide plotline label')
}
}
}],
tickInterval: 24 * 3600 * 1000,
type: 'datetime'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
解决方案
Use display
instead of visible
plotLines: [{ // mark the weekend
label: {
text: 'label',
style: {
display: 'none'
}
},
events: {
mouseover: function (e) {
this.label.element.style.display='block';
},
mouseout: function (e) {
this.label.element.style.display='none';
}
}
}],
这篇关于如何隐藏highChart plotLine标签直到鼠标悬停?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文