インタラクティブなハイチャートのツールチップの作成方法

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'); 
          }); 
         }); 
        } 
       } 
      } 
     } 
    }); 

私が考えることができる欠点の1つは、ツールチップが固執することです。いつかあなたがそれを動かさない限り。または、別のハイチャートシリーズを表示します。本文にリスナーを追加するには、をクリックして、残りのツールヒントをすべて解除します。

Answer 2

runPointActionsポインタープロトタイプをラップして、ツールチップが存在する間にツールチップを表示しないようにすることができます。また、ツールチップが存在し、ポイントクリックで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/