使用SceneBuilder的JavaFX LineChart

Question

我试图用一些随机信息创建一个简单的LineChart，但当我试图通过SceneBuilder使用fxml文件创建时，图表显示了但从未填充。每当我手动创建vbox、linechart和scene时，一切工作都很好。我真的很困惑，在使用fxml文件时，图表代码应该去哪里。

public class Main extends Application {
    LineChart chart1;

    @Override
    public void start(Stage primaryStage) throws Exception {
        //Through FXML
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Chart Test");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();

        //Manually
//        LineChart chart1;
//        XYChart.Series series1 = new XYChart.Series();
//        NumberAxis xAxis = new NumberAxis();
//        NumberAxis yAxis = new NumberAxis();
//        xAxis.setLabel("X Axis");
//        yAxis.setLabel("Y Axis");
//        series1.setName("Series 1");
//        chart1 = new LineChart(xAxis, yAxis);
//        series1.getData().add(new XYChart.Data<>(1, 20));
//        series1.getData().add(new XYChart.Data<>(2, 100));
//        series1.getData().add(new XYChart.Data<>(3, 80));
//        series1.getData().add(new XYChart.Data<>(4, 180));
//        series1.getData().add(new XYChart.Data<>(5, 20));
//        series1.getData().add(new XYChart.Data<>(6, -10));
//        chart1.getData().add(series1);
//        VBox vbox=new VBox(chart1);
//        Scene scene=new Scene(vbox,600,400);
//        primaryStage.setScene(scene);
//        primaryStage.show();
    }

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

public class Controller implements Initializable {

    @FXML
    LineChart chart1;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        XYChart.Series series1 = new XYChart.Series();
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("X Axis");
        yAxis.setLabel("Y Axis");
        series1.setName("Series 1");
        chart1 = new LineChart(xAxis, yAxis);
        series1.getData().add(new XYChart.Data<>(1, 20));
        series1.getData().add(new XYChart.Data<>(2, 100));
        series1.getData().add(new XYChart.Data<>(3, 80));
        series1.getData().add(new XYChart.Data<>(4, 180));
        series1.getData().add(new XYChart.Data<>(5, 20));
        series1.getData().add(new XYChart.Data<>(6, -10));
        chart1.getData().add(series1);
    }

}

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane alignment="center" hgap="10" vgap="10" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <columnConstraints>
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
   </rowConstraints>
   <children>
      <BorderPane prefHeight="298.0" prefWidth="356.0">
         <center>
            <LineChart fx:id="chart1" title="Chart Test" BorderPane.alignment="CENTER">
              <xAxis>
                <CategoryAxis side="BOTTOM" />
              </xAxis>
              <yAxis>
                <NumberAxis side="LEFT" />
              </yAxis>
            </LineChart>
         </center>
      </BorderPane>
   </children>
</GridPane>

Answer 1

您已经使用代码在FXML文件中创建了linechart和轴

<LineChart fx:id="chart1" title="Chart Test" BorderPane.alignment="CENTER">
  <xAxis>
    <CategoryAxis side="BOTTOM" />
  </xAxis>
  <yAxis>
    <NumberAxis side="LEFT" />
  </yAxis>
</LineChart>

此图表被添加到边框窗格中，而边框窗格又被添加到从FXMLLoader.Load()方法返回并放置在场景中的网格窗格中。

但是，在initialize()方法中，可以创建另一个折线图：

chart1 = new LineChart(xAxis, yAxis);

另外，请注意，这两个图表之间有一个差异：在FXML中创建的图表中，您有一个categoryAxis，它是一个轴 作为X轴，但在控制器中创建的图表中，您使用一个numberAxis作为X轴。您可能需要numberaxis，因此更改fxml：

<LineChart fx:id="chart1" title="Chart Test" BorderPane.alignment="CENTER">
  <xAxis>
    <NumberAxis side="BOTTOM" />
  </xAxis>
  <yAxis>
    <NumberAxis side="LEFT" />
  </yAxis>
</LineChart>

然后简单地删除第二个折线图（和第二组轴）的创建：

@FXML
LineChart<Number, Number> chart1;

@Override
public void initialize(URL location, ResourceBundle resources) {
    XYChart.Series<Number, Number> series1 = new XYChart.Series<>();
    series1.setName("Series 1");
    series1.getData().add(new XYChart.Data<>(1, 20));
    series1.getData().add(new XYChart.Data<>(2, 100));
    series1.getData().add(new XYChart.Data<>(3, 80));
    series1.getData().add(new XYChart.Data<>(4, 180));
    series1.getData().add(new XYChart.Data<>(5, 20));
    series1.getData().add(new XYChart.Data<>(6, -10));
    chart1.getData().add(series1);
}