javascript Highcharts - HTML 工具提示和数据标签呈现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13740200/
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 - HTML tooltip & datalabels render issue
提问by Tony
here is my problem, when you set useHTML: true for datalabels, it seems that the label text will override the tooltip background.
这是我的问题，当您为数据标签设置 useHTML: true 时，标签文本似乎会覆盖工具提示背景。
You can see the behaviour in this simple fiddle: bar chart
您可以在这个简单的小提琴中看到行为：条形图
Try to display a tooltip on mouse over a bar, and you will see the text of the datalabel in the tooltip background.
尝试将鼠标悬停在栏上时显示工具提示，您将在工具提示背景中看到数据标签的文本。
Is it possible to set a z-index on the data labels?
是否可以在数据标签上设置 z-index？
I've tried to add this in the tooltip definition but without success:
我试图在工具提示定义中添加它，但没有成功：
style : {
color: 'black',
'z-index': 0
},
I've also tried to set up span classes for data labels and tooltips, then add a z-index into css properties for these classes, but it's still not working.
我还尝试为数据标签和工具提示设置跨度类，然后将 z-index 添加到这些类的 css 属性中，但它仍然无法正常工作。
Edit: As I'm still searching for a solution to my problem, can someone could point me the way to add a class to the bars (or the datalabels) of the charts? My aim is to call a specific onclick event on this class.
编辑：由于我仍在寻找我的问题的解决方案，有人可以指出我向图表的条形（或数据标签）添加类的方法吗？我的目标是在这个类上调用一个特定的 onclick 事件。
回答by Tony
Ok, so here is a workaround for my problem... The idea is to create your own custom tooltip.
好的，这里是我的问题的解决方法......这个想法是创建自己的自定义工具提示。
The solution was given on the Highcharts forum: Highcharts forum post
Highcharts 论坛上给出了解决方案：Highcharts forum post
To do so, set the 'useHTML' property on both datalabels and tooltips, remove some defaults properties of the tooltips and setup the CSS classes in the formatters functions:
为此，请在数据标签和工具提示上设置“useHTML”属性，删除工具提示的一些默认属性并在格式化程序函数中设置 CSS 类：
//JS
datalabels: {
...
useHTML: true,
formatter: function() {
return ("<span class='datalabel'>" + this.y + "</span>");
}
}
tooltip: {
...
borderWidth:0,
borderRadius:0,
shadow:false,
useHTML: true,
formatter: function() {
return ("<div class='tooltip'>" + this.y + "</div>");
}
}
The final step (the most important) is to set up the CSS rules for the highcharts-tooltip span class (which is used by Highcharts to render HTML tooltips).
最后一步（最重要的）是为 highcharts-tooltip span 类（Highcharts 使用它来呈现 HTML 工具提示）设置 CSS 规则。
//CSS
.highcharts-tooltip span {
background-color:white;
z-index:9999!important;
}
Notice the z-index property, which is the property that will allow the tooltip to render over the datalabel.
请注意 z-index 属性，该属性将允许工具提示在数据标签上呈现。
Now you can just custom your tooltip by setting CSS rules for the 'tooltip' class.
现在，您可以通过为“工具提示”类设置 CSS 规则来自定义您的工具提示。
For a full live example, see the jsfiddle here: Custom tooltip
有关完整的实时示例，请参阅此处的 jsfiddle：自定义工具提示
Note: It is not mandatory to specificy the datalabel class in the formatter for this solution to works, I just need so I can register a specific mouse event on it.
注意：不需要在格式化程序中指定数据标签类以使此解决方案起作用，我只需要这样我就可以在其上注册特定的鼠标事件。
回答by Damiano
6 years later, along with HC v6.1.1, a new tooltip option has been added, which solves this problem. See tooltip.outside
6 年后，随着 HC v6.1.1 的出现，增加了一个新的工具提示选项，解决了这个问题。见tooltip.outside
datalabels: {
useHTML: true,
formatter: function() {
return ("<span class='datalabel'>" + this.y + "</span>");
}
},
tooltip: {
outside: true
}
回答by arunes
Check http://api.highcharts.com/highcharts#tooltip.backgroundColorfor tooltip background color.
检查http://api.highcharts.com/highcharts#tooltip.backgroundColor以获得工具提示背景颜色。
Same kind problem was solved with this property at highslide forum
在highslide 论坛上使用此属性解决了同类问题
