HighCharts：标签在工具提示上可见

我的图表上的标签显示在工具提示上，看起来不太好。 我尝试使用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: '{point.y} Kč [{point.percentage}%]', percentageDecimals: 2, backgroundColor: "rgba(255,255,255,1)", formatter: function() { return this.point.name + '
' + '' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorWidth: 2, useHTML: true, formatter: function() { return '' + this.point.name + ''; } } } }, 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] ] }] }); }); }); 

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 '
' + this.point.name + '
' + '' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]
'; } }, 

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：true。

你的jsfiddle的叉子： http ： //jsfiddle.net/kairs/Z3UZ8/1/

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

高图上的文档

Answer 3

我有同样的问题。 我的解决方案 工具提示 – useHTML = true。 工具提示 – Formatter = HTML代码，有一个div容器。 这里的负值余量在css中很重要。

 tooltip: { backgroundColor: "rgba(255,255,255,1)", useHTML: true, formatter: function() { var html = []; html.push('Correlation to ' + this.point.p + '
'); 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 '
' + html.join('') + '
'; } 

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 = true用于为我工作的标签。

Answer 5

如果你不想在问题中使用HTML格式，那么这是在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

我仍然遇到一些解决方案的问题，在.tooltip上设置z-index：999因为各种容器div而没有任何影响。 但是，我发现设置很好（当图例和工具提示是HTML时）。 无需设置其他z索引：

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

Answer 7

对于具有html格式的Highchart工具提示

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