wake-up-neo.com

HighCharts: Beschriftungen über QuickInfos sichtbar

Beschriftungen in meinem Chart werden über Tooltip angezeigt, was nicht sehr schön aussieht. Ich habe versucht, mit zIndex zu spielen, aber zu keinem Ergebnis. Wie kann ich Tooltips 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>

javascriptjqueryhighchartstooltiplabels
16
Michal S

Sie können useHTML setzen und Ihre eigene QuickInfo ü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;
}
26
Sebastian Bochan

Wenn Sie tooltip.backgroundColor auf "rgba (255,255,255,1)" setzen, erhalten Sie einen QuickInfo mit "keine Transparenz".

Sie müssen useHTML: true in den Pie-Einstellungen entfernen.

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

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

Dokumentation auf Highchart

5
Kai-Rune

Ich hatte das gleiche Problem. Die Beschriftungen waren über dem Tooltip sichtbar. Das Entfernen von useHTML = true für die für mich funktionierenden Labels.

2
Sushil Mahajan

Ich hatte das gleiche Problem. Meine Lösung. Tooltip - useHTML = true. Tooltip - Formatter = HTML-Code dort mit einem div-Container. Hier ist der negative Wert in css wichtig.

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

und wenn Sie sich nicht mit den Problemen beschäftigen wollen, die es in useHTML gibt, können Sie dies im svg 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) {

  } 
 });
1
Cine

Für Highchart-QuickInfos im HTML-Format

Highchart Konfig

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

 Screenshot

0
SanS

Ich hatte immer noch Probleme mit einigen der Lösungen und stellte z-index ein: 999 auf .tooltip hatte aufgrund der verschiedenen Container-Divs keine Auswirkung. Aber ich habe festgestellt, dass dies gut funktioniert (wenn Legende und Tooltip HTML sind). Auch müssen keine anderen Z-Indizes gesetzt werden:

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

0
mr_than