web-dev-qa-db-fra.com

Le débordement de l'infobulle des graphiques est masqué

Mon problème est que lorsque la zone de dessin du graphique est plus petite qu'une info-bulle de graphique en hauteur, une partie de l'infobulle est masquée là où elle déborde de la zone de dessin du graphique.

Je souhaite que l'infobulle soit visible en permanence, quelle que soit la taille de la zone de dessin du graphique.

Aucun paramètre CSS n'a aidé et aucun paramètre z-index supérieur n'a aidé non plus.

Voici mon exemple ... http://twitpic.com/9omgg5

Toute aide sera surtout appréciée.

Je vous remercie.

javascriptjquerytooltiphighcharts
35
AlexRebula

OK, désolé pour le retard. Je n'ai pas pu trouver de meilleure solution, mais j'ai trouvé une solution de contournement.

Voici ce que j'ai fait et ce que je suggère à chacun d'essayer:

Définissez la propriété tooltip.useHTML sur true (maintenant vous pouvez avoir plus de contrôle avec html et CSS). Comme ça:

tooltip: {
    useHTML: true    
}

Annuler toutes les propriétés des info-bulles par défaut qui peuvent avoir quelque chose à voir avec les fonctionnalités des info-bulles par défaut. Voici ce que j'ai fait...

tooltip: {                        
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

Assurez-vous que la propriété css de votre conteneur de graphique "overflow" est définie sur visible. Assurez-vous également que tous les éléments DOM (div, section, etc ....) qui contiennent votre conteneur de graphique ont également le css La propriété "overflow" est définie sur "visible". De cette façon, vous vous assurerez que votre info-bulle sera visible à tout moment car elle déborde de son parent et de ses autres "ancêtres" (Est-ce un terme correct? :)).

Personnalisez votre formateur d'infobulles comme vous le souhaitez, en utilisant un style CSS standard. Voici ce que j'ai fait:

tooltip.formatter: {
    < div class ="tooltipContainer"> Tooltip content here < /div >
}

Voici à quoi tout cela ressemble:

tooltip: {                        
    tooltip.formatter: {
        < div class ="tooltipContainer"> Tooltip content here < /div >
    },
    useHTML: true,
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

Si vous avez une meilleure solution, veuillez poster.

13
AlexRebula

Ce CSS m'a aidé:

.highcharts-container { overflow: visible !important; }
25
qasem

Une approche moderne (Highcharts 6.1.1 et plus récent) consiste à simplement utiliser tooltip.outside ( [[# # ~] api [~ # ~] ):

Indique s'il faut autoriser l'infobulle à s'afficher en dehors de la zone d'élément SVG du graphique. Par défaut (false), l'info-bulle est rendue dans l'élément SVG du graphique, ce qui entraîne l'alignement de l'info-bulle à l'intérieur de la zone du graphique. Pour les petits graphiques, cela peut entraîner un écrêtage ou un chevauchement. Lorsque true, un élément SVG distinct est créé et superposé sur la page, ce qui permet d'aligner l'info-bulle à l'intérieur de la page elle-même.

Cela signifie tout simplement de définir cette seule valeur sur true, par exemple:

Highcharts.chart('container', {
    // Your options...
    tooltip: {
        outside: true
    }
});

Voir cette démonstration JSFiddle comment la définition de cette valeur sur true résout les problèmes d'espace/d'écrêtage.

6
Halvor Holsten Strand

J'ai récemment eu le même problème, mais avec bootstrap container! (Bs3)

Aucune de ces solutions n'a fonctionné mais j'ai trouvé par moi-même.

C'est dû à bootstrap propriétés _normalizer

svg:not(:root) {
  overflow: hidden !important;
}

Alors ajoutez les deux:

.highcharts-container, svg:not(:root) {
    overflow: visible !important;
}
5
kesm0

Ajouter simplement ce CSS a fonctionné dans mon cas (mini-graphiques dans les cellules du tableau):

.highcharts-container svg {
    overflow: visible !important;
}

L'option info-bulle useHtml n'était pas requise:

tooltip: {
    useHTML: false
}

Fonctionne sur IE8/9 et FF33.1 (FF causait des problèmes).

5
Kloe2378231

Je sais que la question est ancienne mais je voulais juste partager ma solution, elle est basée sur les deux autres réponses mais je pense que vous obtenez un résultat plus beau avec ce code:

Options d'info-bulle:

tooltip: {
   useHTML: true,
   shared: false,
   borderRadius: 0,
   borderWidth: 0,
   shadow: false,
   enabled: true,
   backgroundColor: 'none',
   formatter: function() {
      return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
   }
}

CSS:

.highcharts-container { 
    overflow: visible !important; 
}

.highcharts-tooltip span>span {
    background-color:rgba(255,255,255,0.85);
    border:1px solid;
    padding: 2px 10px;
    border-radius: 2px;
}

#divContainerId .highcharts-container{
    z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
2
nsacerdote