javascript - font - HighCharts: Etiquetas visibles sobre la información sobre herramientas

set title highchart

Question

Las etiquetas en mi tabla se muestran sobre la información sobre herramientas, que no se ve muy bien. Intenté jugar con zIndex , pero sin resultado. ¿Cómo puedo hacer que los tooltips no sean transparentes? Aquí está mi 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

y si no quieres padecer los problemas que hay en usoHTML, esta es la manera de hacerlo en 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) {

  } 
 });

Answer 2

Si configuras tooltip.backgroundColor en "rgba (255,255,255,1)" obtendrás información sobre herramientas con "sin transparencia"

Deberá eliminar useHTML: true en la configuración circular.

Tenedor de su jsfiddle: http://jsfiddle.net/kairs/Z3UZ8/1/

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

Documentación en Highchart

Answer 3

Tuve el mismo problema. Mi solución. Información sobre herramientas - useHTML = true. Tooltip - Formatter = código HTML allí con un contenedor div. aquí el margen en valor negativo es 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;
}

Answer 4

Puede establecer useHTML y definir su propia información sobre herramientas mediante css:

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 5

Todavía tenía problemas con algunas de las soluciones existentes, estableciendo z-index: 999 en .tooltip no estaba teniendo ningún efecto debido a los diversos divs de contenedor. Pero, he encontrado que la configuración funciona bien (cuando la leyenda y la información sobre herramientas son HTML). No es necesario configurar otros índices z tampoco:

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

Answer 6

Yo tuve el mismo problema. Las etiquetas fueron visibles en la información sobre herramientas. Eliminando useHTML = true para las etiquetas trabajadas para mí.

Answer 7

Para información sobre herramientas de Highchart con formato html

Configuración de Highchart

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