Highcharts: La información sobre herramientas está desbordada por otro elemento DOM

_Solución alterna_
Use html personalizado <div> y aplique estilos CSS.

Manifestación:

• http://jsfiddle.net/7wVDV/147/

Solución alterna

También hay un enfoque alternativo, que le permite conservar el pequeño puntero de la información sobre herramientas original. Pone la información sobre herramientas en un cuadro svg separado: http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -caja/.

@sebastianbochan gracias, este parece ser un buen enfoque, pero no resuelve mi problema, porque como dije, tengo mi gráfico envuelto en un div con desbordamiento: desplazamiento.
Compruebe este violín para ver si hay un problema http://jsfiddle.net/7wVDV/201/

La otra solución funciona: http://jsfiddle.net/highcharts/7wVDV/202/

Gracias, @TorsteinHonsi por la solución, lo intentaré.
¿Es la opción 'appendToBody' algo que espera implementar en una versión futura?

@TorsteinHonsi Hay algunos problemas con la solución.

1. La barra de desplazamiento aparece en el cuerpo si la información sobre herramientas se crea en un borde de la pantalla. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (establezca el ancho de la ventana de demostración en 2 gráficos de ancho y desplácese primero punto desde la derecha)

2. En IE11 setSize (JS línea 86) no está creando un cuadro de vista más pequeño. Por ejemplo, esta demostración muestra información sobre herramientas de corte en Chrome y una información sobre herramientas normal en IE11. http://jsfiddle.net/Lguddypf/

3. Cuando se muestra en una tabla y necesita desplazarse para ver un gráfico, entonces la posición de la información sobre herramientas es incorrecta: http://jsfiddle.net/Lguddypf/1/ (desplace el sitio hasta el gráfico y coloque el cursor sobre un punto para ver que la posición de la información sobre herramientas es incorrecta). movido a la izquierda.

Abra http://jsfiddle.net/1jp9e4rw/3/show/ en iPad o en Chrome. Los anclajes para la información sobre herramientas que aparecen debajo del punto de datos no se muestran:

Este es un problema con el estudio de información sobre herramientas fuera de la caja. Con la implementación estándar, la información sobre herramientas está bien.

Solución para el problema anterior: http://jsfiddle.net/1jp9e4rw/9/

@pawelfus De hecho, hemos intentado un trabajo similar (H.wrap()) en nuestro código, pero resulta que la solución nunca resuelve el problema a la perfección, por ejemplo, en nuestro caso, podría tener algún problema de rendimiento y accesibilidad. , e incluso en el navegador Safari, la posición de la información sobre herramientas no se calcula de la misma manera que en el navegador Chrome. Por lo tanto, en lugar de tratar de resolver el error usando el ajuste del lado del consumidor, sería muy bueno que highcharts solucionara este problema en el código nativo.

Veo que este error se ha presentado hace más de un año. ¿Hay algún cronograma o plan para corregir este error?

También me gustaría una solución nativa para este error.
Copiar el script jQuery no parece funcionar correctamente, en algunos casos lo empeora aún más.

+1 también para la solución nativa en lugar de confiar en una solución basada en complementos. También estamos ejecutando este problema en nuestra aplicación.

Aquí está la solución alternativa sugerida por Paweł, pero sin jQuery (y se usan los mismos cálculos para obtener los tamaños de ventana y documento): http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

No es una muy buena solución :(

Hola @MiroLiska
Adivinando por el estilo de las barras de desplazamiento y el error del logotipo de JSFiddle: es IE11.
En ese navegador , la demostración de Paweł se ve igual: solo eliminé la dependencia de jQuery, no se mejoró nada en el código / lógica.
Por cierto: es causado por el desplazamiento

¿Que tal este? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
Animación deshabilitada para evitar el salto de la barra de desplazamiento, pero puede ajustar la animación de la información sobre herramientas para asegurarse de que se anima solo en el espacio disponible o no activará ninguna acción de la barra de desplazamiento.

@KacperMadej ¡muchas gracias por eso! Nos encontramos con un problema similar en nuestra aplicación en el que necesitamos información sobre herramientas para superponerse con otros elementos DOM. Su nueva solución es mucho mejor. Sin embargo, una pequeña crítica es que si tiene gráficos de líneas con varias series, si pasa el cursor sobre la información sobre herramientas para llegar a otra serie, hay un ligero retraso en el que no sucede nada y la experiencia no es excelente.

Creo que el problema aquí es que el evento mouseOver no se activa si se desplaza sobre una información sobre herramientas. Pero eso es solo una suposición.

También otro comentario es: necesitamos formatear y diseñar esto con useHTML . Que yo sepa, si usa este complemento, no puede usar useHTML y aplicar un formato personalizado, ¿es así?

Hola @jackyliang

Hubo un error hace mucho tiempo con mouseOver y la información sobre herramientas flotante (alrededor de Highcharts v4.0); esto no debería ser un problema ya que usamos kd-tree para buscar puntos más cercanos. ¿Quizás es una regresión? ¿Podrías recrear el problema en jsFiddle y compartirlo? ¡Gracias!

Con respecto a useHTML - sí, eso es una limitación.

Creo que lo que realmente se necesita aquí es una información sobre herramientas independiente, no relacionada en absoluto con el gráfico. Por ejemplo, podemos usar <div> simples que se actualizarán al pasar el mouse por encima y se ocultarán al alejar el mouse, demostración: http://jsfiddle.net/BlackLabel/xctq42n8/1/ - ahora podemos escribir cualquier cosa dentro de la información sobre herramientas, lo único que requiere mejora es el posicionamiento (la demostración usa solo la posición del punto en relación con el gráfico, falta la posición del gráfico en el documento).

@pawelfus Hola Pawel. Estamos en 6.1 en este momento (recién comprobado). La falta de useHTML es un gran problema, incluso si pudiéramos permitir que desborde otros elementos DOM. Nuestro equipo ha terminado en un 95 % de migrar nuestros viejos gráficos d3 a Highcharts (lo cual, tenga en cuenta que ha sido una experiencia placentera :D), pero tradicionalmente nuestra información sobre herramientas desborda otros elementos dom, ya que cada gráfico reside en su propio elemento. Entonces, con Highcharts en este momento, así es como se ve:

Como puede ver, tiene un estilo personalizado usando useHTML para que coincida al 100% con nuestra información sobre herramientas anterior.

¿Hay alguna posibilidad de que Highcharts ofrezca una solución nativa para admitir este comportamiento de desbordamiento sin escribir mucho código personalizado?

Hola @jackyliang ,
En este momento, la solución solo está disponible como soluciones temporales.

@pawelfus Hola Pawel, también me gustaría saber qué posibilidades hay de que obtengamos una solución nativa aquí.
Elegimos Highcharts porque no queríamos implementar soluciones alternativas para cosas como esa, y parece que muchas personas se encuentran con este problema.
Dado que todas las soluciones mencionadas aquí parecen tener algunas desventajas, obtener una solución nativa limpia para esto parece ser el paso correcto para mí.

@sebastianbochan Es por eso que queremos saber qué posibilidades hay de que obtengamos una solución nativa. Creo que para una gran biblioteca es inaceptable tener una desventaja tan grande.

@jackyliang @robinv ¡ Gracias por las amables palabras! :)

@jackyliang @robinv : dada la popularidad del problema, necesitaremos resolverlo. No puedo establecer ninguna ETA en este momento.

Nota interna:
La solución podría ser separar la clase Tooltip de la clase Chart y representarla en un elemento independiente (¿cuerpo principal?). El problema aquí puede ser desacoplar las clases Tooltip y Chart/Pointer (es complicado, como lo intenté en la demostración de stock avanzado) + podemos interrumpir la exportación de información sobre herramientas a imágenes (a través tooltip.refresh() ). Aún así, sería bueno implementar esto para v7: podríamos usar iniciar la instancia de información sobre herramientas para los botones/elementos de menú de herramientas de stock y usarlo como deseemos. @TorsteinHonsi

Estoy muy a favor de lo que dijo @robinv porque esta es también una de las principales razones por las que cambiamos a Highcharts: queríamos evitar escribir demasiado código personalizado. Nuestros viejos gráficos d3 tenían muchas extensiones/mejoras personalizadas y se convirtió en un desastre y una pesadilla hacer cambios después de un tiempo. No digo que no queramos personalizar HC a nuestro gusto (personalización! = extensiones), principalmente hablando específicamente de extensiones; haciendo cosas que el HC predeterminado aún no admite.

Nuestro plan es llevar nuestra integración de HC a los clientes dentro de 2 a 3 semanas, y sabemos que los clientes se quejarán si la información sobre herramientas no aparece sobre otros elementos dom. Si lo mínimo que obtenemos es una ETA sobre cuándo se podría hacer esto, eso me satisfaría por ahora, ya que entonces podemos establecer si intentamos escribir una solución personalizada (por ahora) o esperar una solución nativa de Highcharts.

@sebastianbochan Quería señalar que la solución alternativa no es realmente una solución ya que el aspecto del posicionamiento es un poco inestable

Me encantaría ver una ETA para una implementación nativa o un complemento que emule el comportamiento (sin el posicionamiento/desplazamiento inestable, y permite usar HTML personalizado) de la información sobre herramientas actual con superposición de DOM

Gracias @pawelfus y @jackyliang.

Pawel, como mencionó Jacky, lanzaremos Highcharts a nuestros clientes en las próximas 2 o 3 semanas y este es uno de los principales obstáculos para nuestra implementación. Dado que se trata de un error, no de una función, ¿es algo que podemos planificar para solucionarlo en las próximas 2 o 3 semanas?

Hola, @pawelfus . Quería hacer un seguimiento de esto para ver si había más claridad sobre esto/¿cuándo podemos esperar saberlo? Esto es fundamental para nuestro proceso de planificación en este momento, por lo que estamos esperando más información. ¡Gracias!

Hola @wynnandrewj , actualizaremos este hilo una vez que se decida el ETA. Tenemos planes para lanzar v6.1.1 en las próximas 2-3 semanas, pero no puedo prometer que se incluya una solución para este problema.

Hola @pawelfus , solo quería hacer un seguimiento contigo y tu equipo con respecto a este problema. Estamos muy cerca del lanzamiento de Highcharts para los clientes (piense en 2-3 semanas como máximo para el primer lote de clientes), y esto definitivamente es un obstáculo. Entiendo totalmente que es difícil dar una fecha exacta, así que no pediré eso. Pero se agradecería cualquier información sobre si esto se abordará y tal vez un cronograma aproximado.

Básicamente, cualquier cosa que podamos entender internamente + comunicarnos con los clientes será increíble.

¡Gracias!

Gracias por su paciencia @jackyliang , trabajaré en este código hoy e intentaré obtener una descripción general de los problemas restantes.

Ahora tenemos un candidato que puede probar en http://jsfiddle.net/highcharts/fqx10th9/.

Creo que los problemas anteriores están solucionados, a saber, useHTML , parpadeando al mover el cursor hacia arriba y barras de desplazamiento que aparecen en páginas estrechas.

Por favor, pruebe este candidato. Si tiene éxito, lo haremos parte del lanzamiento de esta semana, Highcharts v6.1.1.

@TorsteinHonsi ¡muchas gracias! No puedo esperar para jugar con esto.

@TorsteinHonsi
Lo probé también, funciona en todos los escenarios.

Esto funcionó súper perfecto para nosotros y volver a agregarlo solo tomó como 30 minutos. ¡Muchas gracias por implementar esto tan rápido y perfectamente!

@TorsteinHonsi su violín ya no funciona porque https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js no existe. Supongo que la rama ha sido eliminada.

@BernardoFBBraga

Si tiene éxito, lo haremos parte del lanzamiento de esta semana, Highcharts v6.1.1.

y lo fue, así que hicimos eso. Puede usar Highcharts v6.1.1+ para usar la función
Referencia de la API: https://api.highcharts.com/highstock/tooltip.outside
Demostración: http://jsfiddle.net/BlackLabel/c70h1akL/1/