Plotly.jsを右クリックして表示するカスタムメニュー

Question

ユーザがデフォルトチャートではなくプロットチャートを右クリックすると、カスタムサブメニューを表示できますか？

Answer 1

あなたはcontextmenu plotlyコンテナにイベントを追加することができます。 https://developer.mozilla.org/en/docs/Web/Events/contextmenu

あなたは、ブラウザのデフォルトのコンテキストメニューがあなたと重ならないように、コンテキストメニューのデフォルトの動作を防ぐ必要があります - ここで

はcontextmenuドキュメントへの参照です。

あなたはコールバック関数では、この

document.querySelector('#plotly-container').addEventListender('contextmenu', function(event) { 
    event.preventDefault(); 

    // Your code here 
}); 

を使用することができ、あなたはevent.clientXとevent.clientYとマウスの位置を特定し、それらの座標で、絶対にコンテナを配置する必要があります。

この質問を参照すると、マウスの位置の横にdivコンテナを作成する方法を理解することができます。

How do I position a div next to a mouse click using JQuery?

あなたはcontextmenuイベントをバインドする方法の詳細を理解するために、この質問を参照することができます。

How can I capture the right-click event in JavaScript?