时间戳

首页 > 解决方案 > 我们可以在 highcharts 哑铃图中显示标题悬停在 x 轴/y 轴文本上吗？

highcharts - 我们可以在 highcharts 哑铃图中显示标题悬停在 x 轴/y 轴文本上吗？

问题描述

我们显示标题（x轴标签名称的全称）如：[![textoverhoverofx-axis lebel][1]][1] 可以在Highcharts中实现吗？

新空间：[![Y-axixlebel][2]][2] [1]：https://i.stack.imgur.com/o6sjQ.png [2]：https://i.stack.imgur。 com/d0Os3.png

在第二个空间中，我们没有显示全名，而是希望在标签悬停时显示全名。

标签： highcharts

解决方案

您可以启用useHTML选项，对标签使用格式化程序函数以返回正确的 HTML 结构并通过 CSS 设置自定义工具提示的样式。

JS：

labels: {
  useHTML: true,
  formatter: function() {
    var shortText = this.value.toString().substring(0, 20) + '...';
    return `
        <div class="labelTooltip">${shortText}
            <span class="labelTooltipText">${this.value}</span>
        </div>
    `
    return this.value;
  }
}

CSS：

.labelTooltip {
  position: relative;
  display: inline-block;
}

.labelTooltip .labelTooltipText {
  visibility: hidden;
  border: 1px solid black;
  padding: 5px;
  left: 0;
  bottom: 100%;
  position: absolute;
}

.labelTooltip:hover .labelTooltipText {
  visibility: visible;
}

现场演示：http: //jsfiddle.net/BlackLabel/ytqjuozp/

API 参考： https ://api.highcharts.com/highcharts/xAxis.labels.formatter

推荐阅读