SceneBuilder JavaFX 折线图

3

这里是问题,我正在尝试编写一个GUI,以在折线图上显示实时数据。

目前为止,我能够让折线图正常工作,但无法将其嵌入GUI中。

使用SceneBuilder,我创建了一个带有LineChart对象的视图,以便将其与生成的图表链接起来。但由于某种原因,在我的mainApp中使用此代码似乎无法正常工作。

public void showSes() {
    try {
        // Load the fxml file and set into the center of the main layout
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("view/Session.fxml"));

        AnchorPane Session = (AnchorPane) loader.load();
        rootLayout.setCenter(Session);

        SessionController controller = loader.getController();
        controller.setMainApp(this);
        controller.initGraph();

    } catch (IOException e) {
        // Exception gets thrown if the fxml file could not be loaded
        e.printStackTrace();
    }
}

这只是显示一个空的折线图视图。

我知道图表应该知道,因为我可以使用它来创建场景,并将其显示到GUI中,但我在SceneBuilder中制作的视图还有其他一些字段我想要展示...

有人有想法吗?

FXML

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

<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.chart.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="900.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.view.SessionController">
   <children>
      <Pane prefHeight="900.0" prefWidth="1280.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <LineChart fx:id="linechart" layoutX="29.0" layoutY="194.0" prefHeight="416.0" prefWidth="1222.0" title="Temperature of session">
              <xAxis>
                <CategoryAxis label="Time (s)" fx:id="xAxis" />
              </xAxis>
              <yAxis>
                <NumberAxis fx:id="yAxis" label="Temperature (°C)" side="LEFT" upperBound="160.0" />
              </yAxis>
            </LineChart>
            <GridPane layoutX="254.0" layoutY="87.0" prefHeight="150.0" prefWidth="771.0">
              <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" maxWidth="274.0" minWidth="10.0" prefWidth="274.0" />
                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="273.0" minWidth="10.0" prefWidth="273.0" />
                <ColumnConstraints hgrow="SOMETIMES" maxWidth="273.0" minWidth="10.0" prefWidth="273.0" />
              </columnConstraints>
              <rowConstraints>
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              </rowConstraints>
               <children>
                  <Label prefHeight="53.0" prefWidth="153.0" text="Temperature fluid:" GridPane.halignment="CENTER" GridPane.valignment="TOP">
                     <font>
                        <Font size="16.0" />
                     </font>
                  </Label>
                  <Label prefHeight="52.0" prefWidth="181.0" text="Temperature vapor:" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="TOP">
                     <font>
                        <Font size="16.0" />
                     </font>
                  </Label>
                  <TextField fx:id="fluidT" editable="false" />
                  <TextField fx:id="gasT" editable="false" GridPane.columnIndex="2" />
               </children>
            </GridPane>
            <Label layoutX="474.0" layoutY="14.0" text="TempTracker">
               <font>
                  <Font size="50.0" />
               </font>
            </Label>
            <TextArea editable="false" layoutX="190.0" layoutY="638.0" prefHeight="160.0" prefWidth="900.0" promptText="&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;------Warning log------- " wrapText="true" />
            <Button layoutX="540.0" layoutY="808.0" mnemonicParsing="false" onAction="#handleStop" prefHeight="65.0" prefWidth="200.0" text="STOP">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
         </children></Pane>
   </children>
</AnchorPane>

控制器

    private static final int MAX_DATA_POINTS = 50;
    private String xSeriesData = "";
    private XYChart.Series series1;
    private XYChart.Series series2;
    private ExecutorService executor;
    private BlockingQueue<Number> dataQ1 = new ArrayBlockingQueue<Number>(1024);
    private BlockingQueue<Number> dataQ2 = new ArrayBlockingQueue<Number>(1024);

    @FXML
    private CategoryAxis xAxis = new CategoryAxis();
    @FXML
    final NumberAxis yAxis = new NumberAxis();
    @FXML
    final LineChart<String, Number> linechart = new LineChart<String, Number>(xAxis, yAxis);


public void initGraph(){
    xAxis.setAutoRanging(false);

    xAxis.setTickLabelsVisible(false);
    xAxis.setTickMarkVisible(false);

    NumberAxis yAxis = new NumberAxis();
    yAxis.setAutoRanging(true);

    //Graph
    final LineChart<String, Number> lc = new LineChart<String, Number>(xAxis, yAxis){
            @Override 
            protected void dataItemAdded(Series<String, Number> series, int itemIndex, Data<String, Number> item){}
            };
    lc.setAnimated(false);
    lc.setId("liveLineChart");
    lc.setTitle("Animated Line Chart");

    //Graph Series
    series1 = new XYChart.Series<Number, Number>();
    series2 = new XYChart.Series<Number, Number>();
    linechart.getData().addAll(series1, series2);

    series1.setName("T1");
    series2.setName("T2");

    fluidT.setText("0000");
    gasT.setText("0000");

    prepareTimeline();

    Runnable con = new Consumer(this);
    Thread c = new Thread(con);
    c.start();

}

错误在你没有展示的代码/fxml中。请提供一个 mcve - jewelsea
我稍微更新了一下,我认为我已经把所有相关的代码都包含进去了。 - Wouter
1个回答

3

不要为@FXML注入的成员创建新对象

永远不要在@FXML与new结合使用,即永远不要写:

@FXML 
private CategoryAxis xAxis = new CategoryAxis();

相反,只需写下以下内容:
@FXML 
private CategoryAxis xAxis;
FXMLLoader 会自动为 FXML 文件中的每个元素生成(即创建)一个新对象,并将该对象的引用注入到您提供 @FXML 注释的控制器中。因此,如果您在控制器中重置 @FXML 成员引用以创建一个新对象,则该对象与加载程序创建的对象之间将没有关联。
另外,在 initGraph() 函数中不要再创建一个新的 LineChart。您已经通过 FXMLLoader 创建了一个 LineChart,请引用它。对于使用 @FXML 注入的 NumberAxis 和其他元素也是一样。 如果使用 @FXML 注释,请同时使用 <fx:id> 您有:
@FXML
private CategoryAxis xAxis;

所以在你的fxml文件中,你应该定义:
<xAxis fx:id="xAxis">

否则,FXMLLoader 将无法注入到您在 FXML 中定义的轴的引用。 附言 您的代码中可能存在其他错误(例如并发和线程问题)。因此,以上内容可能不是您所有错误的全部。一般来说,在创建 MCVE 时,请尝试消除与问题无关的任何内容(例如线程代码和 FXML 的非线图部分),但包括任何人都可以使用以复制、粘贴您的代码以编译和运行它以复制您的问题的所有内容。 注意:Ensemble 示例应用程序包含一个示例程序,该程序基于音频谱输入数据实时更新图形。

嗯,你确实修复了连接,但是图表仍然无法实时显示。只有当我将图表设置为场景时才能实现实时显示。有什么想法吗? 我不能完全公开我的源代码以进行复制,因为它基于由Arduino Yun生成的输入...您可以尝试使用随机数据,但由于单独的图表有效,所以我认为问题不在那里。 - Wouter
我认为(希望)你的原始问题(在SceneBuilder中向你定义的图形添加一些数据)已经得到了回答。你可以提出一个新问题,关于实时更新图形数据。如果你创建一个新问题,请提供一个mcve,不需要或不希望提供完整的源代码 - 只需提供最小的可执行代码来复制该问题。真正地将你的线程代码和JavaFX UI相关代码分开 - 我想不出任何好的理由,为什么有人会在JavaFX控制器内部生成新线程并声明BlockingQueues。 - jewelsea

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接