chart.jsでツールチップが閉じるタイミングを検出する方法は？

Question

私はWebプロジェクトのためにchart.jsを使用しています。しかし、私には1つの質問があります。私はn個のデータポイントを持つ折れ線グラフをn個のHTML divのリストに接続しようとしています。ユーザーがデータポイント2の上を移動すると、div 2がハイライトされ、関数が呼び出されます。それはうまくいく。しかし、ユーザーがデータポイント2を表示しない場合、div 2はそのスタイルをデフォルトのスタイルに戻す必要があります。

私の質問は、データポイント上でmouseoutイベントを検出するにはどうすればいいですか？

これは、データポイントがホバリングされたときの動作を定義する方法です。

myChart = new Chart(ctx, { 
    type: 'line', 
    data: chartData, 
    options: { 
     title: { 
     ... 
     }, 
     tooltips: { 
     enabled: true, 
     custom: function(tooltip) { 
      if (!tooltip) { 
       return; 
      } 

      if(tooltip.dataPoints != null) { 
      // here, the function that highlights the respective div is called, and it works fine 
      } 
     } 
     } 
    } 
}); 

このようなものがありますか？私は、グローバルなイベント - > mousoutオプションがあることを知りましたが、私はそれをどのように使用するのか把握しておらず、チャート全体を参照しているとも思います。

ありがとうございました！

Answer 1

これが役立つかどうかはわかりませんが、スタックされた棒グラフでも同様の問題がありました。バーの上部に値を表示したかったのですが、ツールチップが開いていると値がツールチップの上に表示され、両方を読むことができなくなりました。私は、ツールチップが表示されていない場合（およびツールチップが開いている場合はレンダリングされなかった場合）にのみ値を表示することにしました。

私はツールチップの不透明度設定を使用して、ツールチップが表示されているかどうかを判断できます。これは非常に過剰に簡略化されるが、これは私が思い付いたものです：

 options: { 
      tooltips: { 
       custom: function(tooltip) { 
        if(tooltip.opacity > 0) { 
         console.log("Tooltip is showing"); 
        } else { 
         console.log("Tooltip is hidden"); 
        } 
        return; 
       } 
      } 
     } 

はそれを働いたので、私はその後、私はツールチップが表示されたかどうかを確認するために他の場所でテストすることができ、グローバル変数を保存することができました。