HighCharts：通过工具提示可见的标签

我的图表上的标签显示在工具提示上，看起来不太好。我试图玩zIndex，但没有结果。我如何使工具提示不透明？这里是我的jsfiddle：http://www.jsfiddle.net/4scfH/3/HighCharts：通过工具提示可见的标签

$(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>

来源

2013-02-28 Michal S

这里是一个非常好的解决方案通过tevfik6 https：//开头github上。 com/highcharts/highcharts/issues/2528＃issuecomment-283177513 – Rachmaninoff 2017-07-11 13:15:47

您可以设置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; 
}

来源

2013-02-28 10:00:36

非常好，谢谢;） – 2013-02-28 10:24:08

这是什么帮助我：'。highcharts-tooltip span {0} {0} {0} z-index：9999！important; }'。非常感谢！ – silkfire 2014-05-23 09:29:09

@ sebastian-bochan当您不使用缩放选项时，此解决方案很有用。否则，工具提示将覆盖“重置按钮”。有没有简单的方法来解决它？ – sherlock85 2015-08-06 12:45:13

，如果你不想在问题daddle有在useHTML，这里是做在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) { 

    } 
});

来源

2013-12-11 06:40:31 Cine

请提供jsfiddle – 2016-05-22 17:31:27

如果设置tooltip.backgroundColor为“RGBA（255,255,255,1 ）“你会得到”不透明“的工具提示

你必须在馅饼设置中删除useHTML：true。

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

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

Documentation on highchart

来源

2014-01-08 12:01:37

问题是，当使用'dataLabels：{useHTML：true，' – 2016-05-22 17:27:49

我有同样的问题。我的解决方案 Tooltip - useHTML = true。工具提示 - 格式器=带有一个div容器的HTML代码。这里的负值边缘在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; 
}

来源

2015-04-29 19:53:26 JPM

欢迎。请解释这个答案是如何增加到当前选择的，而另一个已经存在。 – mins 2015-04-29 20:14:54

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

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

来源

2016-02-11 04:51:07

我有同样的问题。标签在工具提示中可见。正在为我工作的标签移除useHTML = true。

来源

2016-06-16 11:51:34

我与提问者有类似的情况，但有一个共享工具提示。像@Sushil指出的那样，在'legend'元素中设置'useHTML：false'，完全可以做到这一点。似乎在图例*和*中设置了'useHTML：true'，工具提示会导致不良的怪癖。 – 2017-07-26 17:19:17

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

来源

2017-02-08 20:04:16 SanS

HighCharts：通过工具提示可见的标签

回答

相关问题