Les étiquettes de ma carte apparaissent par-dessus une info-bulle, qui n'a pas l'air très jolie. J'ai essayé de jouer avec zIndex
, mais sans résultat. Comment puis-je créer des info-bulles non transparentes? Voici mon jsFiddle: http://www.jsfiddle.net/4scfH/3/
$(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]
]
}]
});
});
});
<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>
Vous pouvez définir useHTML
et définir votre propre info-bulle via css:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,1)",
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;
}
Si vous définissez tooltip.backgroundColor sur "rgba (255,255,255,1)", vous obtiendrez une info-bulle avec "aucune transparence".
Vous devrez supprimer useHTML: true dans les paramètres du graphique.
Fork de votre jsfiddle: http://jsfiddle.net/kairs/Z3UZ8/1/
tooltip: {
backgroundColor: "rgba(255,255,255,1)"
}
J'ai eu le même problème. Les étiquettes étaient visibles sur l'info-bulle. Supprimer useHTML = true pour les étiquettes fonctionnait pour moi.
J'ai eu le même problème. Ma solution Tooltip - useHTML = true. Tooltip - Formatter = code HTML avec un conteneur div . Ici, la marge en valeur négative est importante en 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;
}
et si vous ne voulez pas régler les problèmes liés à useHTML, voici comment procéder:
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) {
}
});
Pour les info-bulles Highchart au 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;
}
J'avais toujours des problèmes avec certaines solutions autour de la définition de z-index: 999 sur .tooltip n'avait aucun effet en raison des divers divs de conteneur. Mais, j’ai trouvé que le réglage de cet outil fonctionne bien (lorsque la légende et l’info-bulle sont au format HTML). Pas besoin de définir d'autres index z soit:
.highcharts-legend {
z-index: -1;
}