HighCharts: Etiketten über Tooltip sichtbar

Question

Labels auf meinem Diagramm zeigen über Tooltip, die nicht sehr schön aussieht. Ich habe versucht, mit zIndex zu spielen, aber zu keinem Ergebnis. Wie kann ich Tooltipps nicht transparent machen? Hier ist mein 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>

Answer 1

Sie können useHTML gesetzt und eigene Tooltip über CSS definieren:

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

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; 
} 

Answer 2

und wenn Sie nicht wollen, in den Problemen daddle gibt es in useHTML, hier ist, wie es in der svg zu tun:

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) { 

    } 
}); 

Answer 3

Wenn Sie tooltip.backgroundColor auf „rgba (255,255,255,1 gesetzt) "Sie erhalten Tooltip mit" keine Transparenz "

Sie müssen useHTML: True in den Kuchen Einstellungen entfernen.

Gabel Ihrer jsfiddle: http://jsfiddle.net/kairs/Z3UZ8/1/

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

Documentation on highchart

Answer 4

hatte ich gleiches Problem. Meine Lösung. Tooltipp - useHTML = true. Tooltip - Formatter = HTML-Code dort mit einem Div-Container. hier Rand in negativen Wert ist wichtig in 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; 
} 

Answer 5

ich noch um mit einigen der Lösungen Probleme hatte, das Setzen von z-index: 999 auf .tooltip nicht wurde, weil der verschiedenen Container Divs jede Wirkung. Aber ich habe festgestellt, dass dies funktioniert (wenn Legende und QuickInfo HTML sind). Keine Notwendigkeit für anderen Einstellung Z-Indizes entweder:

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

Answer 6

Ich hatte das gleiche Problem. Die Labels waren über dem Tooltip sichtbar. Entfernen Sie useHTML = true für die Etiketten, die für mich gearbeitet haben.

Answer 7

Für Highchart Tooltips mit html-Format

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; 
}