Highcharts + Plotband araç ipucu + varsayılan stil

Question

Bir plotband'ın üzerine geldiğinizde bir araç ipucunun görünmesinin en kolay yolunu bulmaya çalışıyorum. Olaylar bölümü gayet iyi, mouseover'a erişebilirim ve dışarı çıkıyorum ama bir araç ipucunu Highcharts için varsayılan görünüm ve his ile aynı tarzda göstermenin bir yolunu bulmalıyım.

İşte bir quick example. Fare koordinatlarını temel alan Highcharts varsayılanı ile aynı tarz bir araç ipucu olarak göstermek için "Bir araç ipucunun üzerine gelip göster" metnine ihtiyacım var?

docs bir göz attı ve herhangi bir yardım bulamadık.

Herhangi bir fikrin var mı?

Şimdiden teşekkürler.

Answer 1

İşte bir hack olmasına rağmen, JSFiddle'da bir araya getirdiğim bir çözüm.

mouseover olay için aşağıdaki satırı ekleyin:

chart.tooltip.refresh(chart.series[1].points[2]); 

Bu gizli bir seride, uygun şekilde yerleştirilmiş noktası için araç ipucu görüntülenir.

Özel bir araç ipucu biçimlendiricisi daha sonra gerekli metni döndürür.

Answer 2

Başka bir varyantı, Gregs cevabına göre yaptım, ancak bunun yerine, plot çizgileri için, ihtiyacım olan şey buydu. Sanırım plotBands'a da kolayca çevrilecekti.

Bu varyant, olaylarla da çalışır, ancak belirli bir gizli diziye güvenmek yerine başka bir div gösterir.

Örnek, JSFiddle adresinde bulunabilir.

Böylece ipucu grafik

<div id="tooltip" class="thetooltip"> 
    <p id="tooltiptext" style="margin:0">default</p> 
</div> 

ve aynı kap içinde eklendiğinde, ekli bir ipucu

var $tooltip = $('#tooltip'); 
$tooltip.hide(); 
var $text = $('#tooltiptext'); 
displayTooltip = function (text, left) { 
    $text.text(text); 
    $tooltip.show(); 
    $tooltip.css('left', parseInt(left)+24 + 'px'); 
}; 
var timer; 
hideTooltip = function (e) { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $tooltip.fadeOut(); 
    }, 5000); 
}; 

birlikte ipucu görüntüleyen bir olay tetiklenir bir plotline üzerinden kullanıcı fareler

Ve sonra her arsa çizgisi, ek bir seçenek, tooltipText ve yukarıdaki div görüntülemek için olaylarla tanımlanır.

plotLines: [{ 
    tooltipText: 'hello', 
    value: Date.UTC(2011, 2, 28, 0, 1, 1), 
    color: '#ff6666', 
    dashStyle: 'solid', 
    width: 3, 
    events: { 
     mouseover: function (e) { 
      displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]); 
     }, 
     mouseout: hideTooltip 
    } 
} 

ToolTipText Highcharts API parçası değildir, fakat tanımlanmış zaman eleman seçenekler mülkiyet üzerinden ulaşılabilir.

.thetooltip { 
    border: 1px solid #2f7ed8; 
    background-color: #fff; 
    opacity: 0.8500000000000001; 
    padding: 4px 12px; 
    border-radius: 3px; 
    position: absolute; 
    top:100px; 
    box-shadow: 1px 1px 3px #666; 
} 

Answer 3

Başka bir çözüm useHTML" ile plotBands/plotlines arasında "etiketi" özelliğini kullanmak olacaktır:

ipucu için css basitçe css TAKLİT EDEN tarafından Highcharts tarafından varsayılan bir benzer tanımlanabilir : gerçek "bayrak ve CSS hover.

xAxis: { 
//...code  
    plotLines: [{ 
     //...code 
     dashStyle: 'Dash', 
     color: '#000000', 
     width: 2, 
     label: { 
      text: `<div class="plotline"> 
        <div id="custom-tooltip" class="thetooltip"> 
         My custom tooltip! 
        </div> 
       </div>`, 
      useHTML: true, 
     } 
    }] 
} 

Modifiye CSS olacaktır: Bence

.plotline { 
    &:hover { 
     .thetooltip { 
      display: block; 
     } 
    } 
} 

, onu daha güçlü bir çözümdür - ilk, bir CSS:

.thetooltip { 
    display: none; //the main change 
    border: 1px solid #2f7ed8; 
    background-color: #fff; 
    opacity: 0.8500000000000001; 
    padding: 4px 12px; 
    border-radius: 3px; 
    position: absolute; 
    top:100px; 
    box-shadow: 1px 1px 3px #666; 
} 

Ve plotline sınıfta ders

çözüm, JS değil ve UX/UI bakış açısından ilginç JS'den daha düzgün çalışır (sadece zaman aşımını düzeltmeye çalışın!)