如何製作交互式高圖工具提示

Question

我遇到了高圖工具提示，其中有可點擊的元素。問題是你不能可靠地點擊這些。

增加tooltip.hideDelay可以更容易點擊工具提示。這並不能完全解決問題。

我希望能夠懸停並單擊工具提示內部，只要我想。它應該只在鼠標指針離開工具提示時被解僱。

Answer 1

我的解決方案是設置一個很長的超時隱藏工具提示。在處理一些懸停邏輯時我自己將其解除。

Highcharts.chart('my_chart', { 
     tooltip: { 
      // Show the tooltip for a really long time 
      hideDelay: 9999999 
     }, 
     plotOptions: { 
      series: { 
       events: { 
        mouseOver: function() { 
         // Restore the tooltip after hiding 
         // that's done in mouseOut 
         if (this.chart.tooltip.label) { 
          var show = this.chart.tooltip.label.show 
            .bind(this.chart.tooltip.label); 
          show(); 
         } 
        }, 
        mouseOut: function() { 
         // Get a hold of the tooltip and hide it 
         // on "mouseout" 
         var label = this.chart.tooltip.label, 
          div = $(label.div), 
          hide = label.hide 
           .bind(label); 

         div.on('mouseenter', function() { 
          div.on('mouseleave', function() { 
           hide(); 
           div.off('mouseleave'); 
          }); 
         }); 
        } 
       } 
      } 
     } 
    }); 

我能想到的一個缺點是工具提示會粘住。除非你在任何時間點懸停。或者懸停另一個higchart系列。您可以在的任何工具提示之外點擊以將身邊的聽衆添加到正文以解除任何延遲的問題。

Answer 2

您還可以包裝runPointActions指針原型的功能，以防止在mouseOver上顯示工具提示，同時工具提示存在並在點擊時調用Tooltip.refresh功能。這樣工具提示不會顯示在圖表的不同位置，直到點擊特定點。

DOCS參考：
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

API參考：
http://api.highcharts.com/highcharts/plotOptions.series.point.events.click

實施例：
http://jsfiddle.net/0xvmLLfd/