JavaFXのチャートのデータにクリックイベントを追加したい

Question

###前提・実現したいこと
JavaFXでチャートを描画しています。
チャート・・・例えばScatterChartに描画したデータ点に何らかの形でクリックイベントを追加したいです。

###発生している問題・エラーメッセージ
ToolTipを表示する例があったので、ContextMenuも同様に表示できるかと思ったのですがうまくいっていません。

###該当のソースコード
今手元にソースがないですが、ToolTipを表示する例は以下で見つけました。
http://bitwalk.blogspot.jp/2015/06/javafx-scatterchart.html

###試したこと
ContextMenuで似たようなことができないか試しましたが、不慣れなためうまく書けていません。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

ScatterChart上でプロットされるデータの点はXYChart.Dataクラスで表されますが、XYChar.Dataクラスには画面上へその点を表現するためのnodeプロパティーが用意されています。これはNodeクラスの派生クラスなのでsetOnMouseClickedでマウスクリックイベントを設定できます。

たとえばチャートに表示するデータ列(XYChar.Series)を生成するときに次のようにするとマウスクリックイベントを設定できると思います。

ポイントはXYChar.Dataを作ったばかりのときはまだ画面表示用のnodeプロパティーが未設定という点です。自分でチャートの表現をカスタマイズする際には自前のNodeを生成してXYChar.Dataのnodeプロパティーへ設定してやればいいので、その際にNode#setOnMouseClickedを使ってハンドラーを登録すればいいのですが、JavaFXが自動で設定してくれるデフォルトのXYChar.Data用のNodeを使いたい場合は最初からマウスイベントのハンドラーを設定できません（いつそのNodeが追加されるかわからないので）。
そうした場合にはnodeプロパティーのChangeListenerを使って「nodeプロパティーへ実際のNodeが設定されたときにハンドラーを登録する」という戦略を用いるとよいと思います。

class Foo ... {
  ...
  XYChart.Series<Double, Double> createSeries() {
    Series<Double, Double> series = new Series<>();
    series.setName("series 1");

    for (int i = 0; i < 50; i++) {
      XYChart.Data<Double, Double> p = new XYChart.Data(X座標, Y座標);
      p.nodeProperty().addListener((ob, oldNode, newNode) -> {
        if (newNode != null) {
          newNode.setOnMouseClicked(this::onChartDataClicked);
        }
      });
      series.getData().add(p);
    }
    return series;
  }

  void onChartDataClicked(MouseEvent ev) {
    ...
  }
}

---

訂正：
上の回答に「いつそのNodeが追加されるかわからないので」と書きましたが、ご質問にあるページのサンプルを見るとstartメソッドでnodeプロパティーにtooltipをインストールするコードが書いてありますね・・・
実際にやってみるとチャートへデータ系列をsetDataするときにNodeが追加されるみたいです。自分の回答の方法でも動きはしますが、わざわざChangeListenerを使わなくてもよさそうです。
チャートへデータ列を設定した後でデータ列を走査してハンドラーを登録すればいいんですね。以下はサンプルコードの抜粋ですがtooptipのかわりにマウスクリックイベントのハンドラーを登録する例です。

//質問にあるページのサンプルコードの抜粋
scatterData.stream().forEach((series) -> {
  series.getData().stream().forEach(point -> {
    point.getNode().setOnClicked(this::onChartDataClicked);
  });
});

Comments

[oscikonome]

scatterData.stream().forEach((series) -> {
series.getData().stream().forEach(point -> {
point.getNode().setOnMouseClicked((MouseEvent)->{
onChartDataClicked();
});
});
});
こんな感じですかね。思うとおりに実現できました。ありがとうございます。