jQuery HighCharts：工具提示上方可见的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15130311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts: Labels visible over tooltip
提问by Michal S
Labels on my chart are showing over tooltip, which doesn't look very nice. I tried to play with zIndex, but to no result. How can I make tooltips not transparent? Here's my jsFiddle: http://www.jsfiddle.net/4scfH/3/
我的图表上的标签显示在工具提示上，看起来不太好。我试着玩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>回答by Sebastian Bochan
You can set .dataLabels.useHTML" rel="nofollow noreferrer">useHTMLand define your own tooltip via css:
您可以.dataLabels.useHTML" rel="nofollow noreferrer">useHTML通过 css设置和定义您自己的工具提示：
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
borderRadius: 0,
shadow: false,
useHTML: true,
percentageDecimals: 2,
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
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;
}
Explanation: when you set useHTMLto true, it displays the tooltip text as HTML on the HTML layer, but still draws an SVG shape in the highcharts display SVG for the box and arrow. You would end up with data labels looking like they were drawn on top of the tooltip, but the tooltip text itself on top of the data labels. The config options above effectively hide the SVG tooltip shape and build and style the tooltip purely with HTML/CSS. The only down-side is that you lose the little "arrow" pointer.
说明：当你设置useHTML为true时，它在HTML层上将工具提示文本显示为HTML，但仍然在highcharts中绘制一个SVG形状，显示SVG为框和箭头。您最终会看到数据标签看起来像是绘制在工具提示的顶部，但工具提示文本本身位于数据标签的顶部。上面的配置选项有效地隐藏了 SVG 工具提示形状，并纯粹使用 HTML/CSS 构建和设置工具提示的样式。唯一的缺点是您丢失了小“箭头”指针。
回答by Kai-Rune
If you set tooltip.backgroundColor to "rgba(255,255,255,1)" you'll get tooltip with "no transparency"
如果您将 tooltip.backgroundColor 设置为“rgba(255,255,255,1)”，您将获得“无透明度”的工具提示
You will have to remove useHTML: true in the pie settings.
您必须在饼图设置中删除 useHTML: true 。
Fork of your jsfiddle: http://jsfiddle.net/kairs/Z3UZ8/1/
分叉你的 jsfiddle：http: //jsfiddle.net/kairs/Z3UZ8/1/
tooltip: {
backgroundColor: "rgba(255,255,255,1)"
}
回答by Sushil Mahajan
I had the same problem. The Labels were visible over the tooltip. Removing useHTML=true for the labels worked for me.
我有同样的问题。标签在工具提示上可见。删除标签的 useHTML=true 对我有用。
回答by JPM
I had same issue. My solution. Tooltip - useHTML = true. Tooltip - Formatter = HTML code there with one div container. here margin in negative value is important in css.
我有同样的问题。我的解决方案。工具提示 - 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:
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;
}
回答by Cine
and if you dont want to daddle in the problems there are in useHTML, here is the way to do it in the svg:
如果你不想纠缠于 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) {
}
});
回答by mr_than
I still had issues with some of the solutions around, setting z-index: 999 on .tooltip wasn't having any effect because of the various container divs. But, I've found setting this works nicely (when legend and tooltip are HTML). No need for setting other z-indexes either:
我仍然遇到一些解决方案的问题，由于各种容器 div，在 .tooltip 上设置 z-index: 999 没有任何效果。但是，我发现设置这个效果很好（当图例和工具提示是 HTML 时）。也不需要设置其他 z-indexes：
.highcharts-legend {
z-index: -1;
}
.highcharts-legend {
z-index: -1;
}
回答by SanS
For Highchart tooltips with html format
对于 html 格式的 Highchart 工具提示
Highchart config
高图配置
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true
........
},
CSS:
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;
}
