7

这是我的问题,当您为数据标签设置 useHTML: true 时,标签文本似乎会覆盖工具提示背景。

您可以在这个简单的小提琴中看到行为:条形图

尝试在鼠标上方显示工具提示,您将在工具提示背景中看到数据标签的文本。

是否可以在数据标签上设置 z-index?

我试图在工具提示定义中添加它但没有成功:

style : {
    color: 'black',
    'z-index': 0
    },

我还尝试为数据标签和工具提示设置跨度类,然后将 z-index 添加到这些类的 css 属性中,但它仍然无法正常工作。

编辑:当我仍在寻找解决问题的方法时,有人可以指出将类添加到图表的条形(或数据标签)的方法吗?我的目标是在此类上调用特定的 onclick 事件。

4

3 回答 3

8

好的,这是我的问题的解决方法......这个想法是创建您自己的自定义工具提示。

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 类,我只需要在其上注册特定的鼠标事件即可。

于 2012-12-07T12:00:54.617 回答
4

6 年后,与 HC v6.1.1 一起,添加了一个新的工具提示选项,解决了这个问题。请参阅tooltip.outside

datalabels: {
    useHTML: true,
    formatter: function() {
        return ("<span class='datalabel'>" + this.y + "</span>");
    }
},

tooltip: {
    outside: true
}
于 2018-09-14T18:06:59.293 回答
-1

检查http://api.highcharts.com/highcharts#tooltip.backgroundColor工具提示背景颜色。

在highslide 论坛上用这个属性解决了同样的问题

于 2012-12-06T10:33:34.543 回答