Question

这是我的问题，当您为datalabels设置useHTML：true时，标签文本似乎将覆盖工具提示背景。

您可以在这个简单的小提琴中看到行为：bar chart

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

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

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

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

我还尝试为数据标签和工具提示设置span类，然后将z-index添加到这些类的css属性中，但它仍然无效。

编辑：由于我仍在寻找解决问题的方法，有人可以指出我在图表的条形图（或数据标签）中添加类的方法吗？我的目标是在这堂课上召集特定的onclick活动。

Answer 1

好的，所以这里是我的问题的解决方法......想法是创建自己的自定义工具提示。

解决方案在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类设置CSS规则（Highcharts使用它来呈现HTML工具提示）。

//CSS
.highcharts-tooltip span {
    background-color:white;
    z-index:9999!important;  
}

注意z-index属性，该属性允许工具提示在数据标签上呈现。

现在，您可以通过为“工具提示”类设置CSS规则来自定义工具提示。

有关完整的实例，请参阅此处的jsfiddle：Custom tooltip

注意：并非强制要求格式化程序中的datalabel类使此解决方案正常工作，我只需要这样就可以在其上注册特定的鼠标事件。

Answer 2

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

在highslide forum

处使用此属性解决了同类问题

Highcharts - HTML工具提示＆amp;数据标签呈现问题

2 个答案: