在JavaFX中显示图表

时间:2015-04-02 22:26:33

标签: charts javafx

我尝试重写和简化图表的oracle教程,这样你就有了一个控制器类,你可以使用fxml。 由于某种原因,它无法正常工作。

这是我的代码: 主要课程:

public class BarChartSample extends Application {

    Stage primaryStage;

    public void start(Stage primaryStage) {
        this.primaryStage = primaryStage;
        primaryStage.setTitle("Bar Chart Sample");

        showPage();
    }

    public void showPage(){
        try {
            FXMLLoader loader = new FXMLLoader();
        loader.setLocation(BarChartSample.class.getResource("ChartPage.fxml"));
            AnchorPane pane = loader.load();

            Scene scene  = new Scene(pane);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

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

控制器:

public class Controller {
    final static String performance = "Performance:";

    @FXML
    NumberAxis xAxis = new NumberAxis();
    @FXML
    CategoryAxis yAxis = new CategoryAxis();

    @FXML
    BarChart<Number,String> bc;

    public void initialize(){
        xAxis.setLabel("Percent");  
        xAxis.setTickLabelRotation(90);
        yAxis.setLabel("Performance");

        bc = new BarChart<Number,String>(xAxis,yAxis);

        XYChart.Series series1 = new XYChart.Series();     
        series1.getData().add(new XYChart.Data(80, performance));
        bc.getData().add(series1);
    }
}

FXML:

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

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

<AnchorPane prefHeight="393.0" prefWidth="419.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller">
   <children>
      <BarChart fx:id="bc" layoutX="-40.0" layoutY="-3.0" prefHeight="205.0" prefWidth="409.0" AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0">
        <xAxis>
          <CategoryAxis fx:id="yAxis" side="BOTTOM" />
        </xAxis>
        <yAxis>
          <NumberAxis side="LEFT" fx:id="xAxis" />
        </yAxis>
      </BarChart>
     <TextArea layoutX="103.0" layoutY="14.0" maxHeight="100.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.leftAnchor="21.0"AnchorPane.rightAnchor="21.0" AnchorPane.topAnchor="5.0" />
        </children>
      </AnchorPane>

它无法正确显示图表,只是画了几行。为什么?谢谢!

1 个答案:

答案 0 :(得分:2)

initialize()

中删除此行
bc = new BarChart<Number,String>(xAxis,yAxis);

您不应重新初始化已在FXML中定义并已通过@FXML注释集成到控制器中的任何控件。

出于上述原因,您还需要替换以下行

@FXML
NumberAxis xAxis = new NumberAxis();
@FXML
CategoryAxis yAxis = new CategoryAxis();

@FXML
NumberAxis xAxis;
@FXML
CategoryAxis yAxis;

同样,您需要正确定义BarChart。在FXML中,您已将xAxis声明为CategoryAxis并将yAxis声明为NumberAxis。但是在控制器中,您已经定义了BarChart<Number,String>

public class Controller {
    final static String performance = "Performance:";

    @FXML
    NumberAxis xAxis;
    @FXML
    CategoryAxis yAxis;

    @FXML
    BarChart<String, Number> bc;

    public void initialize(){
        xAxis.setLabel("Percent");
        xAxis.setTickLabelRotation(90);
        yAxis.setLabel("Performance");

        XYChart.Series<String, Number> series1 = new XYChart.Series();
        series1.getData().add(new XYChart.Data( performance, 80));
        bc.getData().add(series1);
    }
}