HighCharts：标签上看到提示(HighCharts: Labels visible over

我的图表上标签显示在工具提示，这看起来并不很漂亮。我试着玩zIndex ，但都没有结果。我怎样才能让提示不是透明？这里是我的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:

您可以设置useHTML并通过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 2:

如果设置tooltip.backgroundColor为“RGBA（255,255,255,1）”，你会得到提示“无透明度”

你将不得不删除useHTML：真正的馅饼设置。

您的jsfiddle的叉： http://jsfiddle.net/kairs/Z3UZ8/1/

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

在highchart文档

Answer 3:

我有同样的问题。我的解决办法。工具提示 - useHTML =真。工具提示 - 格式化= HTML代码中有一个DIV容器。这里利润率负值是在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:

我有同样的问题。将标签在工具提示可见。删除useHTML =真正的标签为我工作。

Answer 5:

如果你不想在那里是useHTML的问题daddle，这里是做在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 6:

我仍然有问题，与周围的一些解决方案，设置的z-index：999 .tooltip是没有，因为不同的div容器有任何影响。但是，我发现这个设置很好地工作（当传说和提示是HTML）。无需设置其他Z-指标之一：

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

Answer 7:

对于Highchart工具提示使用HTML格式

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