Highcharts + tooltip di Plotband hover + styling predefinito

Question

Sto cercando di trovare il modo più semplice per visualizzare un tooltip quando si passa con il mouse su una trama. La parte degli eventi va bene, posso accedere a mouseover e out, ma ho bisogno di trovare un modo per visualizzare un tooltip nello stesso stile del look and feel di default per Highcharts.

Ecco uno quick example. Ho bisogno del testo "Mostrami su hover in un tooltip" da visualizzare come un tooltip con lo stesso valore predefinito di Highcharts basato sulle coordinate del mouse?

che ho avuto uno sguardo alla docs e non poteva trovare alcun aiuto.

Qualche idea?

Grazie in anticipo.

Answer 1

Ecco una soluzione che ho messo insieme in JSFiddle, anche se è un po 'di hack.

Aggiungere la seguente riga all'evento mouseover:

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

Questo visualizza la descrizione per un punto opportunamente collocato in una serie nascosta.

Un formatter tooltip personalizzato restituisce il testo richiesto.

Answer 2

Ho creato un'altra variante in base alla risposta di Greg, ma invece per le trame, poiché era quello che mi serviva. Suppongo che possa essere facilmente tradotto anche in plotBands.

Questa variante funziona anche con gli eventi, ma visualizza invece un altro div anziché fare affidamento su una particolare serie nascosta.

L'esempio può essere trovato alla JSFiddle.

Quindi il suggerimento viene aggiunto nello stesso contenitore come il grafico

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

e quando l'utente sposta il mouse su una trama di un evento viene generato che visualizza la descrizione comando insieme a un suggerimento divisoria

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); 
}; 

E poi ogni trama è definita con un'opzione aggiuntiva, tooltipText ed eventi per la visualizzazione della div precedente.

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 
    } 
} 

il ToolTipText non fa parte della Highcharts api, ma quando definito è disponibile tramite la proprietà opzioni sull'elemento.

Il css per il suggerimento può essere definito simile a quello predefinito Highcharts semplicemente mimicing il css:

.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

Un'altra soluzione potrebbe essere quella di utilizzare il "label" proprietà di plotBands/trame con "useHTML : true "flag e hover CSS.

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, 
     } 
    }] 
} 

Modificato CSS sarebbe:

.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; 
} 

E naturalmente in classe trama:

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

A mio parere, si tratta di una soluzione più robusta - in primo luogo, si tratta di un CSS soluzione, non JS, e dal punto di vista UX/UI funziona più liscio del JS eccentrico (basta provare a impostare il timeout giusto!)