2016-04-08 8 views
-1

私はプロットしたチャートを使用しており、チャートの選択に基づいてイベントが発生しています。右のdivに追跡されたjavascriptイベントを特定します

https://plot.ly/javascript/zoom-events/

ので、この例では、そこにページ上の1つのdivがあるとplotlyチャートが描画されます。グラフで選択を行うと、plotly_relayoutイベントが発生します。このイベントでは、イベントデータを示すアラートがポップアップしています。

私の質問は次のとおりです。画面myDiv1とmyDiv2の2つのdivにそれぞれ異なるグラフが含まれているとします。

1つのチャートで選択すると、イベントが発生し、アラートにイベントデータが表示されます。イベントデータとともに、イベントが発生したdiv/chartの情報を追加するにはどうすればよいですか?

ありがとう、 アサナ

答えて

0

は残念ながら、この機能はplotly.jsイベントに焼かれていないと、あなたのクリックハンドラに自分自身を、これを追加する必要があります。例えば。

var plot1; // let's assume these are the plotly plots for now 
var plot2; 

plot1.on('plotly_click', function(e){ 
    myHandler('plot1', e); 
}); 

plot2.on('plotly_click', function(e){ 
    myHandler('plot2', e); 
}); 

function myHandler(id, e){ 
    console.log('Click data from ' + id + ':', e); 
} 
+0

これは私の問題を解決します。ありがとうございました!私に悩まされているもう一つのことがあります。私のページに多くの図表があり、それらの図表にある関数をバインドしたいとしたら、どうすればいいでしょうか?これらのdivのそれぞれにクラス名とIDがあるとします。次に、クラス名を使用して1つの関数を作成し、すべてのdivにバインドすることができます。しかしその場合、私はdivがクリックされたのと同じ問題に戻ります。そのdivのdiv idはどうやって取得できますか?どんな例であれ大いに役立ちます。 – asanas

+0

あなたが提供したシナリオでは、カスタムハンドラのDOM要素にアクセスできます。クラス名を使用してすべてのプロットを選択してから、ハンドラ内で指定の要素のIDを使用できますあなたが必要です - 例えば'node.id'ここで、' node'は 'document.getElementsByClassName( 'application-graph')'のような呼び出しによって返されるノードの1つです。 –

関連する問題