这是我的问题,当您为数据标签设置 useHTML: true 时,标签文本似乎会覆盖工具提示背景。
您可以在这个简单的 fiddle 中看到行为:bar chart
尝试在鼠标悬停在栏上时显示工具提示,您将在工具提示背景中看到数据标签的文本。
是否可以在数据标签上设置 z-index?
我试图在工具提示定义中添加它但没有成功:
style : {
color: 'black',
'z-index': 0
},
我还尝试为数据标签和工具提示设置跨度类,然后将 z-index 添加到这些类的 css 属性中,但它仍然无法正常工作。
编辑:由于我仍在寻找问题的解决方案,有人可以指出向图表的条形图(或数据标签)添加类的方法吗?我的目标是调用此类的特定 onclick 事件。
最佳答案
好的,这是解决我的问题的方法...我的想法是创建您自己的自定义工具提示。
解决方案在 Highcharts 论坛上给出:Highcharts forum post
为此,在数据标签和工具提示上设置“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>");
}
}
最后一步(最重要的一步)是为 highcharts-tooltip span 类(Highcharts 使用它来呈现 HTML 工具提示)设置 CSS 规则。
//CSS
.highcharts-tooltip span {
background-color:white;
z-index:9999!important;
}
注意 z-index 属性,该属性将允许工具提示在数据标签上呈现。
现在您可以通过为“tooltip”类设置 CSS 规则来自定义您的工具提示。
有关完整的实例,请参阅此处的 jsfiddle:Custom tooltip
注意:为了使此解决方案起作用,不必在格式化程序中指定数据标签类,我只需要这样我就可以在其上注册特定的鼠标事件。
关于javascript - Highcharts - HTML 工具提示和数据标签呈现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13740200/