Highcharts + Plotband tooltip hover + estilo predeterminado

Question

Estoy tratando de encontrar la forma más fácil de mostrar una información sobre herramientas cuando pasa el mouse sobre una trama. La parte de eventos está bien, puedo acceder y sacar el mouseover, pero necesito encontrar una manera de mostrar una información sobre herramientas en el mismo estilo que la apariencia predeterminada para Highcharts.

Aquí hay un quick example. Necesito el texto "Mostrar en flotación en una información sobre herramientas" para mostrar como una información sobre herramientas con el mismo estilo que Highcharts predeterminado en algún lugar en función de las coordenadas del mouse?

He echado un vistazo al docs y no he podido encontrar ninguna ayuda.

¿Alguna idea?

Gracias de antemano.

Answer 1

He aquí una solución que he reunido en JSFiddle, aunque es un poco complicado.

Añadir la siguiente línea al evento mouseover:

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

Esto muestra la información sobre herramientas para un punto apropiadamente colocado en una serie oculto.

Un formateador de información sobre herramientas personalizado devuelve el texto requerido.

Answer 2

Hice otra variante basada en la respuesta de Gregs pero para las tramas en cambio, ya que eso era lo que necesitaba. Supongo que también se traduciría fácilmente a plotBands.

Esta variante también funciona con eventos, pero en su lugar muestra otra div en lugar de depender de una serie oculta particular.

El ejemplo se puede encontrar en JSFiddle.

Así la información sobre herramientas se añade en el mismo recipiente que el gráfico

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

y cuando los ratones de usuario más de una trama se dispara un evento que muestra la información de herramientas junto con una información de herramienta adjunta

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

Y luego, cada trazado se define con una opción adicional, tooltipText y eventos para mostrar el div anterior.

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

la ToolTipText no es parte de Highcharts api, pero cuando se define que está disponible a través de la propiedad opciones en el elemento.

El css para la información de herramienta se puede definir similar a la predeterminada por Highcharts simplemente por mimicing el 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

Otra solución sería utilizar la propiedad "etiqueta" de plotBands/tramas con "useHTML : true "flag y 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, 
     } 
    }] 
} 

CSS Modificado sería:

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

Y, por supuesto, en la clase de trama:

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

En mi opinión, se trata de una solución más robusta - en primer lugar, se trata de un CSS solución, no JS, y desde el punto de vista de UX/UI funciona mejor que el peculiar JS (¡simplemente intente establecer el tiempo de espera correcto!)