JavaFX LineChart SceneBuilderを使用

Question

私はいくつかのランダムな情報を持つ単純なラインチャートを作ろうとしていますが、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

あなたはLineChartをすでに作成していると、コード

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

であなたのFXMLファイル内の軸はこのチャートは、順番に国境ペインに追加されますFXMLLoader.load()メソッドから返され、シーンに配置されているグリッドペインに追加されます。あなたは、データを取り込むに進み

chart1 = new LineChart(xAxis, yAxis); 

：

しかし、あなたのinitialize()方法であなたは、に別の折れ線グラフを作成します。この新しい折れ線グラフは決してシーンに表示されないため、データは表示されません。また

、2つのグラフの間に相違がある注意：x軸としてAxis<String>あるCategoryAxisを有するFXMLで作成したものではなく、あなたが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); 
}