Highcharts info-bulle de débordement est caché

Mon problème est que lorsque le graphique de la zone de dessin de est plus petit qu'un highchart info-bulle, une partie de l'info-bulle est caché où elle déborde le graphique de la zone de dessin.

Je veux de l'info-bulle pour être visible tout le temps, peu importe la taille du graphique de la zone de dessin.

Pas de CSS réglage aidé et pas de z-index supérieur paramètre aidé non plus.

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

Toute aide sera surtout aprécié.

Merci.

  • Pourquoi n'est-ce pas la question marqué comme 'réponse'? Presque chaque réponse est la bonne.
InformationsquelleAutor AlexRebula | 2012-05-24
  1. 25

    Cette css qui m'a aidé:

    .highcharts-container { overflow: visible !important; }
    • vous devrez ajouter, que vous devez définir tooltip: { useHTML: true }, trop
    • Pas de travail pour moi, seule la mise en svg, css propriété visible travaillé
    • Les deux .highcharts-container { overflow: visible !important; } et svg { overflow: visible; } sont nécessaires.
    • c'est ce qui a fait le tour, merci!
    InformationsquelleAutor qasem
  2. 13

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

    Voici ce que j'ai fait et ce que je suggère à tous de l'essayer:

    Définir l'info-bulle.useHTML true à la propriété (maintenant vous pouvez avoir plus de contrôle avec html et CSS). Comme ceci:

    tooltip: {
    useHTML: true    
}

    Annuler tous les par défaut info-bulle peoperties qui peut avoir quelque chose à voir avec la valeur par défaut info-bulle fonctionnalités. Voici ce que j'ai fait...

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

    Assurez-vous que votre graphique conteneur de la propriété css overflow" est réglé sur visible. Assurez-vous également que tous les éléments du DOM (div, section, etc....) que retenez votre tableau contenant également de la css "dépassement de capacité" jeu de propriétés à "visible". De cette façon, vous vous assurez que votre info-bulle sera visible à tous les temps et qu'elle déborde de ses parents et de ses autres "ancêtres" (Est-ce un terme correct? :)).

    Personnaliser votre infobulle formateur que vous le souhaitez, en utilisant la norme CSS style. Voici ce que j'ai fait:

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

    C'est à quoi il 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, s'il vous plaît poster.

    • Devrait être la meilleure réponse, m'a beaucoup aidé.
    InformationsquelleAutor AlexRebula
  3. 5

    Ajoutant simplement ce CSS travaillé dans mon cas (minicharts dans les cellules de tableau):

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

    La bulle d'aide de l'option useHtml n'était pas nécessaire:

    tooltip: {
    useHTML: false
}

    Fonctionne à la fois sur IE8/9 & FF33.1 (FF a été la cause des problèmes).

    InformationsquelleAutor Kloe2378231
  4. 4

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

    Aucune de ces deux solutions n'a fonctionné, mais j'ai trouvé par mes propres moyens.

    Sa raison d'amorçage _normalizer propriétés

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

    Donc ajouter les deux :

    .highcharts-container, svg:not(:root) {
    overflow: visible !important;
}
    • Intéressant, je vais essayer cela.Il me semble highcharts devrait corriger cet
    InformationsquelleAutor kesm0
  5. 2

    Je sais que la question est vieux, mais je voulais juste partager ma solution, il est basé sur les deux autres réponses, mais je pense que vous obtenir un meilleur aspect avec ce code:

    Info-bulle options:

    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*/
}
    InformationsquelleAutor nsacerdote
  6. 2

    Une approche moderne (Highcharts 6.1.1 et plus récent) est d'utiliser simplement tooltip.outside (API):

    Que ce soit pour permettre l'info-bulle pour rendre à l'extérieur du graphique de l'élément SVG boîte. Par défaut (false), la bulle d'aide est affiché dans le graphique de l'élément SVG, qui résultats dans l'info-bulle en étant aligné à l'intérieur de la zone de graphique. Pour des petites cartes, il peut en résulter dans l'écrêtage ou qui se chevauchent. Lorsque true, un élément SVG est créée et insérée sur la page, ce qui permet l'info-bulle pour être aligné à l'intérieur de la page elle-même.

    Tout simplement, cela signifie que la définition de cette valeur de un à true, par exemple:

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

    Voir cette JSFiddle de démonstration de la façon dont la valeur true correctifs de l'espace/les problèmes de clipping.

    InformationsquelleAutor Halvor Holsten Strand