如何在Highcharts中为x轴标签添加工具提示？

Question

如何在Highcharts中为x轴标签添加工具提示？

xAxis: {
  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
  labels: {
    x: 5,
    useHTML: true,
    formatter: function () {
      return categoryImgs[this.value];
    }
  }
}

目前，图表上只有点才会显示工具提示，我希望用户在悬停在x轴标签上时也能看到工具提示/自定义描述。这是否可能？谢谢。

- maximumride

Answer 1

通常情况下，Highcharts不支持在标签上显示工具提示。

但是你有两个解决方案：

• 使用“Custom-events”插件，在标签上添加事件：https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events（示例中有点击事件，鼠标悬停应该也可以显示自定义工具提示）
• 使用一些插件（如Tooltipsy等），像这样：http://jsfiddle.net/gW4p6/196/

- Paweł Fus

---

它可以工作，只是演示中的tooltipsy是从github加载的，而github在一段时间前禁用了直接从存储库加载js。请参见使用脚本标记加载tooltipsy的演示：http://jsfiddle.net/gW4p6/272/ - Paweł Fus

@PawełFus somedirection 的意思是第一个插件Custom-events在网站上已经不再可用。 - tnkh

我建议不要使用任何来自Black Label的东西，因为现在大多数东西都不受支持，并且它与Highcharts v6及以上版本非常笨重（如果能工作的话）。特别是如果你正在使用@typings。 - SovietFrontier

嗨@SovietFrontier，感谢您的留言。整个Highcharts以及一些Black Label插件正在进行迁移过程，以便完全支持TypeScript。如果您在使用插件或核心Highcharts时遇到任何障碍或有任何意见，如果您能提供这些信息，我们将不胜感激，以便我们可以改进和准备更符合客户需求的产品。 - Grzegorz Blachliński

Answer 2

您可以使用格式化程序将标签转换为div。您可以编写自己的jQuery museOver事件。

formatter: function(){
    return "<div class='myClass'> " + this.value + "</div>"
}

我希望这能对您有所帮助。

- Strikers

---

谢谢，这个也可以，但是Pawel的插件似乎也提供了很多有用的功能！ - maximumride

这是一个非常强大的答案。 - Rooster

Answer 3

我认为我找到了一个更简单的解决方案，它只涉及Bootstrap和JQuery。

请查看http://jsfiddle.net/key2xanadu/zfsfz0c9/。

这个解决方案涉及将小狗标记为ID，然后在底部添加工具提示：

$('document').ready(function () { 
    $("#text_title").tooltip({placement: 'bottom', title:"HELLO TITLE!"});
    $("#label_one").tooltip({placement: 'bottom', title:"HELLO ONE!"});
    $("#label_two").tooltip({placement: 'bottom', title:"HELLO TWO!"});
});

示例还演示了如何将工具提示添加到标题中！

- xke