Highcharts: L'info-bulle est débordée par un autre élément DOM

_Solution de contournement_
Utilisez le code html personnalisé <div> et appliquez des styles CSS.

Démo :

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

solution de contournement

Il existe également une approche alternative, qui vous permet de conserver le petit pointeur de l'info-bulle d'origine. Il place l'info-bulle dans une boîte svg séparée : http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -boîte/.

@sebastianbochan merci, cela semble être une bonne approche, mais cela ne résout pas mon problème, car comme je l'ai dit, mon graphique est enveloppé dans une div avec overflow:scroll.
Vérifiez ce violon pour un problème http://jsfiddle.net/7wVDV/201/

L'autre solution de contournement fonctionne : http://jsfiddle.net/highcharts/7wVDV/202/

Merci, @TorsteinHonsi pour la solution de contournement, je vais l'essayer.
L'option 'appendToBody' est-elle quelque chose que vous avez hâte d'implémenter dans la future version ?

@TorsteinHonsi Il y a quelques problèmes avec la solution de contournement.

1. La barre de défilement apparaît sur le corps si l'info-bulle est créée sur un bord de l'écran. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (définissez la largeur de la fenêtre de démonstration sur 2 largeurs de graphiques et survolez d'abord pointe de droite)

2. Dans IE11, setSize (ligne JS 86) ne crée pas de boîte de vue plus petite. Par exemple, cette démo montre une info-bulle coupée dans Chrome et une info-bulle normale dans IE11. http://jsfiddle.net/Lguddypf/

3. Lors de l'affichage dans un tableau et que vous devez faire défiler pour voir un graphique, la position de l'info-bulle est incorrecte : http://jsfiddle.net/Lguddypf/1/ (faites défiler le site jusqu'au graphique et survolez un point pour voir que la position de l'info-bulle est déplacé vers la gauche.

Veuillez ouvrir http://jsfiddle.net/1jp9e4rw/3/show/ sur iPad ou sur Chrome . Les ancres des info-bulles apparaissant sous le point de données ne sont pas affichées :

C'est un problème avec l'étude de l'info-bulle hors de la boîte. Avec une implémentation standard, les info-bulles sont correctes.

Solution de contournement pour le problème ci-dessus : http://jsfiddle.net/1jp9e4rw/9/

@pawelfus Nous avons en fait essayé un travail similaire (H.wrap()) dans notre code, mais il s'avère que la solution de contournement ne résout jamais parfaitement le problème, par exemple dans notre cas, elle pourrait avoir des problèmes de performances et d'accessibilité , et même sur le navigateur Safari, la position de l'info-bulle n'est pas calculée de la même manière que sur le navigateur Chrome. Par conséquent, au lieu d'essayer de résoudre le bogue en utilisant le wrap côté consommateur, il serait très bien que highcharts corrige ce problème dans le code natif.

Je vois que ce bogue a été déposé plus d'un an. Existe-t-il un calendrier ou un plan pour corriger ce bogue ?

Je voudrais également un correctif natif pour ce bogue.
Copier le script jQuery ne semble pas fonctionner correctement, certains cas le rendent encore pire.

+1 pour le correctif natif également au lieu de s'appuyer sur une solution basée sur un plugin. Nous exécutons également ce problème dans notre application.

Voici la solution de contournement suggérée par Paweł, mais sans jQuery (et les mêmes calculs pour obtenir les tailles de fenêtre et de document sont utilisés) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

Pas une très bonne solution de contournement :(

Salut @MiroLiska
Devinant à partir du style des barres de défilement et de l'erreur du logo JSFiddle - c'est IE11.
Dans ce navigateur , la démo de Paweł a la même apparence - j'ai seulement supprimé la dépendance jQuery, rien n'a été amélioré dans le code/la logique.
BTW: c'est causé par le défilement

Celui-ci, ça va? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
Animation désactivée pour éviter le saut de la barre de défilement, mais vous pouvez envelopper l'animation de l'info-bulle pour vous assurer qu'elle s'anime uniquement sur l'espace disponible ou ne déclenchera aucune action de la barre de défilement.

@KacperMadej merci beaucoup pour ça ! Nous rencontrons un problème similaire dans notre application où nous avons besoin d'info-bulles pour se chevaucher sur d'autres éléments DOM. Votre nouvelle solution est bien meilleure. Cependant, une petite critique est que si vous avez des graphiques linéaires avec plusieurs séries, si vous survolez l'info-bulle pour accéder à une autre série, il y a un léger retard où rien ne se passe et l'expérience n'est pas géniale.

Je pense que le problème ici est que l'événement mouseOver n'est pas déclenché s'il survole une info-bulle. Mais ce n'est qu'une supposition

Un autre commentaire est également - nous devons formater et styliser cela avec useHTML . À ma connaissance, si vous utilisez ce plugin, vous ne pouvez pas utiliser useHTML et appliquer un formatage personnalisé, n'est-ce pas ?

Salut @jackyliang

Il y a longtemps, il y a eu un bogue avec mouseOver et une info-bulle flottante (autour de Highcharts v4.0) - cela ne devrait pas poser de problème puisque nous utilisons kd-tree pour rechercher les points les plus proches. C'est peut-être une régression ? Pourriez-vous recréer le problème dans jsFiddle et le partager ? Merci!

Concernant useHTML - oui, c'est une limitation.

Je pense que ce dont nous avons vraiment besoin ici, c'est d'une info-bulle autonome, qui n'est pas du tout liée au graphique. Par exemple, nous pouvons utiliser un simple <div> qui sera mis à jour au passage de la souris et caché au passage de la souris, démo : http://jsfiddle.net/BlackLabel/xctq42n8/1/ - maintenant nous pouvons écrire n'importe quoi dans l'info-bulle, la seule chose qui nécessite une amélioration est le positionnement (la démo utilise uniquement la position du point par rapport au graphique, il manque la position du graphique dans le document).

@pawelfus Salut Pawel. Nous sommes sur 6.1 en ce moment (juste vérifié). L'absence de useHTML est une sorte de gros problème même si nous pouvions lui permettre de déborder d'autres éléments DOM. Notre équipe a terminé à environ 95 % la migration de nos anciens graphiques d3 vers Highcharts (ce qui, rappelez-vous, a été une expérience agréable : D), mais traditionnellement, nos info-bulles débordent d'autres éléments dom puisque chaque graphique réside dans son propre élément. Donc, avec Highcharts en ce moment, voici à quoi cela ressemble :

Comme vous pouvez le constater, il a un style personnalisé utilisant useHTML pour correspondre à 100 % à nos anciennes info-bulles.

Existe-t-il des chances qu'il existe une solution native de Highcharts pour prendre en charge ce comportement de débordement sans écrire beaucoup de code personnalisé ?

Salut @jackyliang ,
Pour le moment, la solution n'est disponible que comme solution de contournement.

@pawelfus Salut Pawel, j'aimerais aussi savoir quelles sont les chances que nous obtenions une solution native ici ?
Nous avons choisi Highcharts parce que nous ne voulions pas implémenter des solutions de contournement pour des choses comme ça, et il semble que beaucoup de gens rencontrent ce problème.
Étant donné que toutes les solutions de contournement mentionnées ici semblent avoir des inconvénients, obtenir une solution native propre pour cela semble être la bonne étape pour moi.

@sebastianbochan C'est pourquoi nous voulons savoir quelles sont les chances d'obtenir une solution native. Je pense que pour une si grande bibliothèque, il est inacceptable d'avoir un si gros inconvénient.

@jackyliang @robinv Merci pour les gentils mots ! :)

@jackyliang @robinv - étant donné la popularité du problème, nous devrons résoudre ce problème. Je ne peux pas définir d'ETA pour le moment.

Remarque interne :
La solution pourrait être de séparer la classe Tooltip de la classe Chart et de la rendre dans un élément indépendant (corps principal ?). Le problème ici peut être le découplage des classes Tooltip et Chart/Pointer (c'est délicat comme j'ai essayé dans la démo de stock avancé) + nous pouvons casser l'exportation de l'info-bulle vers les images (via tooltip.refresh() ). Néanmoins, il serait bon de l'implémenter pour la v7 : nous pourrions utiliser l'instance d'initiation de l'info-bulle pour les boutons/éléments de menu des outils de stock et l'utiliser comme nous le souhaitons. @TorsteinHonsi

Je suis très favorable à ce que @robinv a dit car c'est aussi l'une des principales raisons pour lesquelles nous sommes passés à Highcharts - nous voulions éviter d'écrire trop de code personnalisé. Nos anciens graphiques d3 avaient beaucoup d'extensions/améliorations personnalisées et c'est devenu un gâchis et un cauchemar d'apporter des modifications après un certain temps. Je ne dis pas que nous ne voulons pas personnaliser HC à notre goût (personnalisation != extensions), en parlant principalement d'extensions ; faire des choses que HC par défaut ne prend pas encore en charge.

Notre plan est de déployer notre intégration HC aux clients dans un délai de 2 à 3 semaines, et nous savons que les clients se plaindront si les info-bulles n'apparaissent pas sur d'autres éléments dom. Si le minimum que nous obtenons est un ETA sur le moment où cela pourrait être fait, cela me satisferait pour l'instant, puisque nous pouvons alors déterminer si nous essayons d'écrire une solution personnalisée (pour l'instant) ou attendons une solution native par Highcharts.

@sebastianbochan Je voulais noter que la solution de contournement n'est pas vraiment une solution car l'aspect positionnement est un peu bancal

Je serais très heureux de voir un ETA pour une implémentation native ou un plugin qui émule le comportement (sans le positionnement/survol, et permet d'utiliser du HTML personnalisé) de l'info-bulle actuelle avec chevauchement DOM

Merci @pawelfus et @jackyliang.

Pawel, comme Jacky l'a mentionné, nous lançons Highcharts à nos clients dans les 2-3 prochaines semaines et c'est l'un des principaux obstacles à notre mise en œuvre. Étant donné qu'il s'agit d'un bogue et non d'une fonctionnalité, pouvons-nous prévoir de le résoudre dans les 2 à 3 prochaines semaines ?

Salut @pawelfus, je voulais faire un suivi à ce sujet pour voir s'il y avait plus de clarté à ce sujet/quand pouvons-nous nous attendre à le savoir ? Ceci est essentiel à notre processus de planification en ce moment, nous attendons donc plus d'informations. Merci!

Salut @wynnandrewj , nous mettrons à jour ce fil une fois que l'ETA sera décidée. Nous prévoyons de publier la v6.1.1 dans les 2 à 3 prochaines semaines, mais je ne peux pas promettre que le correctif pour ce problème soit inclus.

Salut @pawelfus , je voulais juste faire un suivi avec vous et votre équipe concernant ce problème. Nous sommes très proches du lancement de Highcharts pour les clients (pensez à 2-3 semaines maximum pour le premier lot de clients), et c'est définitivement un blocage. Je comprends tout à fait qu'il est difficile de donner une date exacte, donc je ne demanderai pas cela. Mais toute information indiquant si cela sera abordé, et peut-être un calendrier approximatif, serait appréciée.

Fondamentalement, tout ce que nous pouvons comprendre en interne + communiquer avec les clients sera génial.

Merci!

Merci pour votre patience @jackyliang , je vais travailler sur ce code aujourd'hui et essayer d'avoir un aperçu des problèmes restants.

Nous avons maintenant un candidat que vous pouvez tester sur http://jsfiddle.net/highcharts/fqx10th9/.

Je crois que les problèmes ci-dessus sont résolus, à savoir useHTML , clignotant lors du déplacement du curseur vers le haut et des barres de défilement apparaissant sur des pages étroites.

Veuillez tester ce candidat. En cas de succès, nous l'intégrerons à la version de cette semaine, Highcharts v6.1.1.

@TorsteinHonsi merci beaucoup ! J'ai hâte de jouer avec ça.

@TorsteinHonsi
Je l'ai testé aussi, fonctionne dans tous les scénarios.

Cela a fonctionné parfaitement pour nous et le rajouter n'a pris que 30 minutes. Merci beaucoup d'avoir mis cela en œuvre si rapidement et parfaitement !

@TorsteinHonsi votre violon ne fonctionne plus car https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js n'existe pas. je suppose que la branche a été supprimée

@BernardoFBBraga

En cas de succès, nous l'intégrerons à la version de cette semaine, Highcharts v6.1.1.

et c'était le cas, alors nous l'avons fait. Vous pouvez utiliser Highcharts v6.1.1+ pour utiliser la fonctionnalité
Référence API : https://api.highcharts.com/highstock/tooltip.outside
Démo : http://jsfiddle.net/BlackLabel/c70h1akL/1/