2016-07-27 16 views
2

http://jsfiddle.net/leongaban/n36y336z/highChartのplotLineラベルをマウスオーバーするまで隠すには?

enter image description here

私はラベルを持っている私のhighChart上plotlineシリーズを持っています。私がしようとしているのは、マウスオーバーするまでラベルを隠すことです。誰もこれを前に試みましたか?

$(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 
    }] 
    }); 
}); 
+1

の使用displayをですから、この例に似た何かを得るために希望ですか? http://jsfiddle.net/n36y336z/28/ラベルオブジェクトにhide()とshow()を使用することができます –

+0

@GrzegorzBlachlińskiYES!何かのようなものですが、プロットライン/プロットバンドの領域にカーソルを置いたとき –

+0

あなたの要件を満たす必要がある例がここにあります:http://jsfiddle.net/n36y336z/41/ –

答えて

2

代わり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'; 
    } 
    } 
}], 

JSFiddle demo

+0

ありがとう! JSFiddleで働いています...私の実際のアプリで問題を抱えている、おそらくあまりにも多くのプロットラインイベントがあるので... –

関連する問題