如何在highcharts中的x軸標簽上添加工具提示？

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

示例還顯示了如何向標題添加工具提示！