Question

如何在highcharts中的x轴标签上添加工具提示？

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

目前，工具提示仅显示在图表中的点上，我希望用户在悬停在x轴上的标签上时也能看到工具提示/自定义描述。那可能吗？感谢

Answer 1

一般情况下，Highcharts不支持标签上的工具提示。

但是你有两个解决方案：

使用Custom-events插件，在标签上添加事件：https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events（演示有点击，鼠标悬停应该相同，以显示自定义工具提示）
使用一些插件（Tooltipsy等），如下所示：http://jsfiddle.net/gW4p6/196/

Answer 2

您可以使用formatter将标签设为div。你可以写自己的jquery museoOver活动吧。

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

我希望这会对你有所帮助

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!"});
});

示例还说明了如何向标题添加工具提示！

如何在highcharts中的x轴标签上添加工具提示？

3 个答案: