好的,这是我的问题的解决方法......这个想法是创建您自己的自定义工具提示。
Highcharts 论坛上给出了解决方案:Highcharts 论坛帖子
为此,请在数据标签和工具提示上设置“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 类设置 CSS 规则(Highcharts 使用它来呈现 HTML 工具提示)。
//CSS
.highcharts-tooltip span {
background-color:white;
z-index:9999!important;
}
请注意 z-index 属性,该属性将允许工具提示在数据标签上呈现。
现在,您可以通过为“工具提示”类设置 CSS 规则来自定义工具提示。
有关完整的实时示例,请参阅此处的 jsfiddle:自定义工具提示
注意:为了使该解决方案有效,不必在格式化程序中指定 datalabel 类,我只需要在其上注册特定的鼠标事件即可。