JavaFX LineChart - 单击图例时在前面移动一条线

Question

这是界面代码:

@Override
public void start(Stage primaryStage){

    NumberAxis xAxis = new NumberAxis();
    xAxis.setLabel("XX");

    NumberAxis yAxis = new NumberAxis();
    yAxis.setLabel("YY");

    LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
    lineChart.setLegendVisible(false);

    XYChart.Series<Number, Number> series1 = new XYChart.Series<>();
    series1.setName("Line1");
    series1.getData().add(new XYChart.Data<>(1, 1));
    series1.getData().add(new XYChart.Data<>(2, 2));
    series1.getData().add(new XYChart.Data<>(3, 2));
    series1.getData().add(new XYChart.Data<>(4, 1));

    XYChart.Series<Number, Number> series2 = new XYChart.Series<>();
    series2.setName("Line2");
    series2.getData().add(new XYChart.Data<>(2, 2));
    series2.getData().add(new XYChart.Data<>(3, 2));
    series2.getData().add(new XYChart.Data<>(4, 2));

    XYChart.Series<Number, Number> series3 = new XYChart.Series<>();
    series3.setName("Line3");
    series3.getData().add(new XYChart.Data<>(1, 3));
    series3.getData().add(new XYChart.Data<>(2, 2));
    series3.getData().add(new XYChart.Data<>(3, 1));
    series3.getData().add(new XYChart.Data<>(3, 2));

    List<XYChart.Series<Number, Number>> seriesList = Arrays.asList(series1, series2, series3);

    lineChart.getData().addAll(seriesList);

    HBox legendBox = new HBox();
    legendBox.setStyle("-fx-alignment: center; -fx-padding: 10;");

    Insets insets = new Insets(0, 10, 0, 10);

    for(Node legend : lineChart.lookupAll(".chart-legend-item")){

        Label label = (Label)legend;

        label.setOnMouseClicked(e -> {

            XYChart.Series<Number, Number> toFront = seriesList.stream()
                                                                .filter(e1 -> e1.getName().equals(label.getText()))
                                                                .findFirst().get();

            System.out.println(toFront);


            //put series toFront over all other series
            //i don't know how//

            /*I have tried this
            Platform.runLater(() -> {

                lineChart.getData().remove(toFront);
                lineChart.getData().add(toFront); //first time click: Duplicate, after only NullPointer

            });*/

        });

        legendBox.getChildren().add(label);
        HBox.setMargin(label, insets);

    }

    BorderPane borderPane = new BorderPane();
    borderPane.setCenter(lineChart);
    borderPane.setBottom(legendBox);

    primaryStage.setScene(new Scene(borderPane));
    primaryStage.sizeToScene();
    primaryStage.centerOnScreen();

    primaryStage.show();

}

这是界面的外观:

如图所示，您无法知道 Line1 和 Line2 的确切路径。

我想在图例上放置一个EventHandler。当您单击图例之一时，将图例行放在图表前面，位于所有其他行之上。

如您所见，带有EventHandler的代码已编写。系列确定后我不知道该怎么办。我尝试从图表中删除并再次添加:

Platform.runLater(() -> {

    lineChart.getData().remove(toFront);
    lineChart.getData().add(toFront);

});

仅删除行和结果错误:

1. First click: "Duplicate series added" //at line with add
2. Next clicks: "NullPointerException" //at line with add

Answer 1

我已经明白了。

我的代码很好:

 Platform.runLater(() -> {

    lineChart.getData().remove(toFront);
    lineChart.getData().add(toFront);

});

问题出在移除时的动画。

为了解决这个问题，我设置了:lineChart.setAnimated(false);

更新

我找到了一个更好的解决方案，不会影响setAnimated

除了删除系列并再次添加它之外，您还可以简单地使用 Node 类具有的方法 toFront() 。

这是替换上面代码的代码。

toFront.getNode().toFront();
toFront.getData().forEach(e1 -> e1.getNode().toFront());

如果您更改系列的颜色，此代码也会更好。如果删除-添加，您需要重新着色移到前面的行，但如果 Node#toFront 您不需要。