第6部分的主題

• 創建一個統計圖顯示生日的分布。

---

生日統計

在AddressApp中所有人員都有生日。當我們人員慶祝他們生日的時候，如果有一些生日的統計不是會更好。

我們使用柱狀圖，包含每個月的一個條形。每個條形顯示在指定月份中有多少人需要過生日。

統計FXML視圖

1. 在ch.makery.address.view包中我們開始創建一個BirthdayStatistics.fxml(右擊包|New|other..|New FXML Document) 

2. 在Scene Builder中打開BirthdayStatistics.fxml文件。

3. 選擇根節點AnchorPane。在Layout組中設置Pref Width為620，Pref Height為450。

4. 添加BarChart到AnchorPane中。

5. 右擊BarChart並且選擇Fit to Parent。

6. 保存fxml文件，進入到Eclipse中，F5刷新項目。

在我們返回到Scene Builder之前，我們首先創建控製器，並且在我們的MainApp中準備好一切。

統計控製器

在view包 ch.makery.address.view中創建一個Java類，稱為BirthdayStatisticsController.java。

在開始解釋之前，讓我們看下整個控製器類。

BirthdayStatisticsController.java

package ch.makery.address.view;

import java.text.DateFormatSymbols;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.XYChart;
import ch.makery.address.model.Person;

/**
 * The controller for the birthday statistics view.
 * 
 * @author Marco Jakob
 */
public class BirthdayStatisticsController {

    @FXML
    private BarChart<String, Integer> barChart;

    @FXML
    private CategoryAxis xAxis;

    private ObservableList<String> monthNames = FXCollections.observableArrayList();

    /**
     * Initializes the controller class. This method is automatically called
     * after the fxml file has been loaded.
     */
    @FXML
    private void initialize() {
        // Get an array with the English month names.
        String[] months = DateFormatSymbols.getInstance(Locale.ENGLISH).getMonths();
        // Convert it to a list and add it to our ObservableList of months.
        monthNames.addAll(Arrays.asList(months));

        // Assign the month names as categories for the horizontal axis.
        xAxis.setCategories(monthNames);
    }

    /**
     * Sets the persons to show the statistics for.
     * 
     * @param persons
     */
    public void setPersonData(List<Person> persons) {
        // Count the number of people having their birthday in a specific month.
        int[] monthCounter = new int[12];
        for (Person p : persons) {
            int month = p.getBirthday().getMonthValue() - 1;
            monthCounter[month]++;
        }

        XYChart.Series<String, Integer> series = new XYChart.Series<>();

        // Create a XYChart.Data object for each month. Add it to the series.
        for (int i = 0; i < monthCounter.length; i++) {
            series.getData().add(new XYChart.Data<>(monthNames.get(i), monthCounter[i]));
        }

        barChart.getData().add(series);
    }
}

控製器如何工作

1. 控製器需要從FXML文件中訪問兩個元素:

   • barChar：它有String和Integer類型。String用於x軸上的月份，Integer用於指定月份中人員的數量。
   • xAxis：我們使用它添加月字符串

2. initialize() 方法使用所有月的列表填充x-axis。

3. setPersonData(…)方法將由MainApp訪問，設置人員數據。它遍曆所有人員，統計出每個月生日的人數。然後它為每個月添加XYChart.Data到數據序列中。每個XYChart.Data對象在圖表中表示一個條形。

---

連接視圖和控製器

1. 在Scene Builder中打開BirthdayStatistics.fxml。

2. 在Controller組中設置BirthdayStatisticsController為控製器。

3. 選擇BarChart，並且選擇barChar作為fx:id屬性(在Code組中)

4. 選擇CategoryAxis，並且選擇xAxis作為fx:id屬性。
   

5. 你可以添加一個標題給BarChar(在Properties組中)進一步修飾。

---

連接View/Controller和MainApp

我們為生日統計使用與編輯人員對話框相同的機製，一個簡單的彈出對話框。

添加下麵的方法到MainApp類中

/**
 * Opens a dialog to show birthday statistics.
 */
public void showBirthdayStatistics() {
    try {
        // Load the fxml file and create a new stage for the popup.
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("view/BirthdayStatistics.fxml"));
        AnchorPane page = (AnchorPane) loader.load();
        Stage dialogStage = new Stage();
        dialogStage.setTitle("Birthday Statistics");
        dialogStage.initModality(Modality.WINDOW_MODAL);
        dialogStage.initOwner(primaryStage);
        Scene scene = new Scene(page);
        dialogStage.setScene(scene);

        // Set the persons into the controller.
        BirthdayStatisticsController controller = loader.getController();
        controller.setPersonData(personData);

        dialogStage.show();

    } catch (IOException e) {
        e.printStackTrace();
    }
}

一切設置完畢，但是我們冇有任何東西實際上調用新的showBirthdayStatistics()方法。幸運的是我們已經在RootLayout.fxml中有一個菜單，它可以用於這個目的。

顯示生日統計菜單

在RootLayoutController中添加下麵的方法，它將處理顯示生日統計菜單項的用戶點擊。

/**
 * Opens the birthday statistics.
 */
@FXML
private void handleShowBirthdayStatistics() {
  mainApp.showBirthdayStatistics();
}

現在，使用Scene Builder打開RootLayout.fxml文件。創建Staticstic 菜單，帶有一個Show Statistcs MenuItem:

選擇Show Statistics MenuItem，並且選擇handleShowBirthdayStatistics作為On Action(在Code組中)。

進入到Eclipse，刷新項目，測試它。

---

JavaFX Chart的更多信息

更多信息的一個好地方是官方Oracle教學，使用JavaFX Chart.