JavaFX:在折线图的节点上设置单击监听器

Question

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

代码如下:

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

事件监听器的代码:

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

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

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

预先感谢您，最诚挚的问候

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);
    }
}

单击线条、两个不同的数据点，然后再次单击线条后的屏幕截图: