Highcharts - HTML提示框和数据标签渲染问题

Question

我的问题是，当你在数据标签中设置 useHTML: true 时，标签文本似乎会覆盖工具提示的背景。

您可以在这个简单的示例中看到这种行为：柱状图

尝试在鼠标悬停在柱形上时显示工具提示，您会发现数据标签的文本出现在工具提示的背景中。

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

我已经尝试将其添加到工具提示定义中，但没有成功：

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

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

编辑：由于我仍在寻找解决方案，有人可以指导我如何向图表的柱形（或数据标签）添加类吗？我的目标是在此类上调用特定的onclick事件。

- Tony

---

你把''放在了z-index周围，而应该放在0周围。 - dsgriffin

不，我也尝试过z-index：'0'，它会抛出JavaScript错误。似乎它不喜欢z-index中的“-”字符。 - Tony

Answer 1

好的，这里有一个解决方案来解决我的问题...思路是创建自己的自定义工具提示。

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属性，该属性将允许工具提示在数据标签上呈现。

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

有关完整的实时示例，请参见此处的jsfiddle：自定义工具提示。

注意：不需要在格式化程序中指定datalabel类别以使此解决方案起作用，我只是需要这样做以便可以在其上注册特定的鼠标事件。

- Tony

Answer 2

6年后，随着HC v6.1.1的推出，新增了一个新的工具提示选项，解决了这个问题。请参见tooltip.outside

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

tooltip: {
    outside: true
}

- Damiano

Answer 3

查看http://api.highcharts.com/highcharts#tooltip.backgroundColor以获取提示框背景色。

同类问题可以在highslide论坛中使用该属性解决。

- arunes

---

嘿，我2个小时前找到了这个。我已经尝试过了，但它并没有解决我的问题，因为发布此内容的用户没有使用HTML数据标签。 - Tony