HighCharts: les Étiquettes visibles sur info-bulle

Étiquettes sur mon tableau montrent que les plus d'info-bulle, qui n'a pas l'air très agréable. J'ai essayé de jouer avec zIndex, mais à aucun résultat. Comment puis-je faire les info-bulles qui n'est pas transparent? Voici mon jsFiddle: http://www.jsfiddle.net/4scfH/3/

JS:

$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graf1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
margin: 40,
text: 'Podíl všech potřeb'
},
tooltip: {
//pointFormat: '<b>{point.y} Kč [{point.percentage}%]</b>',
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,1)",
formatter: function() {
return this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b>';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorWidth: 2,
useHTML: true,
formatter: function() {
return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
}
}
}
},
series: [{
type: 'pie',
name: 'Potřeba',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>

InformationsquelleAutor Michal S | 2013-02-28
  1. 28

    Vous pouvez définir .dataLabels.useHTML" >useHTML et de définir votre propre info-bulle via css:

    http://jsfiddle.net/4scfH/4/

    tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
formatter: function () {
return '<div class="tooltip">' + this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
}
},

    CSS

    .label {
z-index: 1 !important;
}
.highcharts-tooltip span {
background-color: white;
border:1 px solid green;
opacity: 1;
z-index: 9999 !important;
}
.tooltip {
padding: 5px;
}

    Explication: lorsque vous définissez useHTML de vrai, il affiche l'info-bulle de texte au format HTML dans le code HTML de la couche, mais tire encore une SVG de forme dans la highcharts affichage SVG pour la boîte et la flèche. Vous vous retrouvez avec des étiquettes de données à la recherche comme ils étaient dessinés sur le haut de la bulle d'aide, mais le texte d'info-bulle au-dessus des étiquettes de données. Les options de configuration ci-dessus revient à masquer le SVG info-bulle de la forme et de construire et le style de l'info-bulle purement en HTML/CSS. Le seul inconvénient est que vous perdez la petite "flèche" pointeur.

    • Très bien, merci 😉
    • C'est ce qui m'a aidé: .highcharts-tooltip span { z-index: 9999 !important; }. Merci beaucoup!
    • Cette solution est utile lorsque vous n'utilisez pas le zoom de l'option. Sinon, l'info-bulle se couvrir la touche "Reset". Est-il un moyen facile de résoudre ce problème?
    • Avez-vous une démonstration ?
    • Elle est ici: jsfiddle.net/ube5grw2/1 Essayer de grossir un peu et vous verrez que l'info-bulle couvre la "réinitialisation du zoom" bouton.
    • Quel navigateur utilisez-vous? Parce que j'ai testé sur Chrome et ne peut observer que les questions.
    • est-ce un bug?! le site officiel ne peut pas le résoudre?!
    • Le useHTML trompé moi, comme lorsque vous attribuez la valeur true, il affiche l'info-bulle de texte au format HTML dans le code HTML de la couche, mais dessine un SVG forme dans la highcharts affichage SVG. J'ai eu étiquettes de données à la recherche comme ils étaient dessinés sur le haut de la bulle d'aide, mais le texte d'info-bulle elle-même était au-dessus de l'étiquette de données. Les options de configuration ci-dessus revient à masquer le SVG info-bulle forme et j'ai maintenant de construire et le style de l'info-bulle purement en HTML/CSS.
    • vous définissez backgroundColor dans l'info-bulle à deux reprises!

    InformationsquelleAutor Sebastian Bochan
  2. 5

    Si vous définissez une info-bulle.backgroundColor à "rgba(255,255,255,1)" vous bénéficierez d'info-bulle "manque de transparence"

    Vous devez enlever les useHTML: true dans la tarte paramètres.

    Fourche de votre jsfiddle: http://jsfiddle.net/kairs/Z3UZ8/1/

    tooltip: {
backgroundColor: "rgba(255,255,255,1)"
}

    Documentation sur highchart

    • Le problème est lors de l'utilisation dataLabels: { useHTML:true,
    InformationsquelleAutor Kai-Rune
  3. 2

    J'ai eu même problème. Ma solution.
    Info - bulle useHTML = true.
    Info-bulle - Formateur = code HTML avec une div conteneur.
    ici, la marge en valeur négative est important dans le css.

    tooltip: {
backgroundColor: "rgba(255,255,255,1)",
useHTML: true,
formatter: function() {
var html = [];
html.push('<b>Correlation to ' + this.point.p + '</b><br>');
if (null != this.point.associatedPoints 
&& typeof this.point.associatedPoints != 'undefined' 
&& this.point.associatedPoints.length > 0) {
$.each(this.point.associatedPoints, function(i, associatedPoint) {
html.push('Responses: ' + associatedPoint.nFormatted);
});
}
return '<div class="tooltip-body">' + html.join('') + '</div>';
}

    CSS:

    .highcharts-tooltip span {
z-index: 9999 !important;
top:2px !important;
left:2px !important;
}
.highcharts-tooltip span .tooltip-body{
background-color:white;
padding:6px; 
z-index:9999 !important;
margin-bottom:-14px;
margin-right:-14px;
}
    • Bienvenue. Veuillez expliquer en quoi cette réponse s'ajoute à la mesure actuellement sélectionnée, et l'autre déjà existant.
    InformationsquelleAutor JPM
  4. 2

    J'ai eu le même problème. Les Étiquettes étaient visibles sur l'info-bulle. Retrait useHTML=true pour les étiquettes travaillé pour moi.

    • J'ai eu une situation similaire à celle de l'interlocuteur, mais avec un partage d'info-bulle. Réglage useHTML: false dans le legend élément, comme @Sushil noté, a fait le tour exactement. Il est apparu que le fait d'avoir useHTML: true définir à la fois la légende et l'info-bulle causé indésirables bizarreries.
    InformationsquelleAutor Sushil Mahajan
  5. 1

    et si vous ne voulez pas daddle dans les problèmes il y a dans useHTML, voici la façon de le faire dans le svg:

     Highcharts.wrap(Highcharts.Chart.prototype, 'redraw', function(proceed, animation) {
proceed.call(this, animation);
try {
if (this.legend.options.floating) {
var z = this.legend.group.element, zzz = z.parentNode;
zzz.removeChild(z);
zzz.appendChild(z); //zindex in svg is determined by element order
}
} catch(e) {
} 
});
    • veuillez fournir jsfiddle
    InformationsquelleAutor Cine
  6. 0

    J'ai toujours eu des problèmes avec certaines des solutions autour de, réglage de z-index: 999 sur .info-bulle n'avait pas d'effet, en raison des différents conteneur de divs. Mais, j'ai trouvé la mise cela fonctionne bien (quand la légende et l'info-bulle HTML). Pas besoin de mise autres z-index, soit:

    .highcharts-legend {
    z-index: -1;
    }

    InformationsquelleAutor mr_than
  7. 0

    Pour Highchart des info-bulles avec format html

    Highchart config

    tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true
........
},

    CSS:

    .highcharts-tooltip>span {
background-color: #fff;
border: 1px solid #172F8F;
border-radius: 5px;
opacity: 1;
z-index: 9999!important;
padding: .8em;
left: 0!important;
top: 0!important;
}

    HighCharts: les Étiquettes visibles sur info-bulle

    InformationsquelleAutor SanS