JavaFX：在折线图的节点上设置单击侦听器

Question

我有一个 JavaFX 应用程序，它首先计算一些数据，然后在 LineChart 上添加数据点。我想在节点上添加一个 ClickListener，如果用户单击图表上的任何节点，相应的值将出现在 TableView 或其他内容中。但我无法检索节点的值。

代码如下：

lineChart.getData().add(series);
series.getNode().setOnMouseClicked(nodeClicked);

EventListener 的代码：

EventHandler<MouseEvent> nodeClicked = new EventHandler<MouseEvent>(){

        @Override
        public void handle(MouseEvent event) {
            System.out.println("clicked");
        }
};

我也尝试在 LineChart 上设置监听器，但在事件对象中找不到相应的节点信息，如值等。

提前谢谢你，最好的问候

Answer 1

您似乎正在将处理程序添加到与数据系列关联的节点。折线图中的这个节点就是折线本身，因此当您单击折线时应该会看到控制台输出。

要让侦听器自己响应对数据点的点击，您需要将侦听器添加到与各个 XYChart.Data 实例关联的节点。

请注意，这些节点仅在将数据添加到系列并且将系列添加到图表后创建；所以你必须小心，只有在这些发生后才添加事件处理程序。

这是一个 SSCCE：

import java.util.Random;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage;

public class LineChartWithEventHandlers extends Application {

    @Override
    public void start(Stage primaryStage) {

        LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis());
        Series<Number, Number> series = new Series<>();
        series.setName("Data");

        chart.getData().add(series);

        // handler for clicking on line:
        series.getNode().setOnMouseClicked(e -> System.out.println("Click on series"));

        Random rng = new Random();
        for (int x = 0 ; x <= 20 ; x++) {
            Data<Number, Number> data = new Data<>(x, rng.nextInt(100));
            series.getData().add(data);

            // handler for clicking on data point:
            data.getNode().setOnMouseClicked(e -> 
                System.out.printf("Click on data [%d, %d]%n", data.getXValue(), data.getYValue()));
        }

        Scene scene = new Scene(chart);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

点击线条后的屏幕截图，两个不同的数据点，再次点击线条：