使用 SceneBuilder 的 JavaFX 折线图

Question

我正在尝试使用一些随机信息制作一个简单的折线图，但是当我尝试使用 fxml 文件通过 SceneBuilder 执行此操作时，图表显示但从未被填充。每当我手动创建 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 折线图

JavaFX LineChart using SceneBuilder

linechart

scenebuilder

javafx-8