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

删除系列并重新添加它，您可以简单地使用toFront() 类具有它的方法Node。

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

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

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