Question

我正在尝试使用一些随机信息创建一个简单的LineChart，但是当我尝试通过SceneBuilder使用fxml文件时，图表显示但永远不会被填充。每当我手动创建vbox，线图和场景时，一切正常。我很困惑使用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，它是一个Axis<String>作为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);
}

使用SceneBuilder的JavaFX LineChart

1 个答案: