【JavaFx教程】第六部分:統計圖
第6部分的主題
- 建立一個統計圖顯示生日的分佈。
生日統計
在AddressApp中所有人員都有生日。當我們人員慶祝他們生日的時候,如果有一些生日的統計不是會更好。
我們使用柱狀圖,包含每個月的一個條形。每個條形顯示在指定月份中有多少人需要過生日。
統計FXML檢視
-
在
ch.makery.address.view
包中我們開始建立一個BirthdayStatistics.fxml
(*右擊包|New|other..|New FXML Document*) -
在Scene Builder中開啟
BirthdayStatistics.fxml
檔案。 -
選擇根節點
AnchorPane
-
新增
BarChart
到AnchorPane
中。 -
右擊
BarChart
並且選擇*Fit to Parent*。 -
儲存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); } }
控制器如何工作
-
控制器需要從FXML檔案中訪問兩個元素:
barChar
:它有String
和Integer
型別。String
用於x軸上的月份,Integer
用於指定月份中人員的數量。xAxis
:我們使用它新增月字串
-
initialize()
方法使用所有月的列表填充x-axis
。 -
setPersonData(…)
方法將由MainApp
訪問,設定人員資料。它遍歷所有人員,統計出每個月生日的人數。然後它為每個月新增XYChart.Data
到資料序列中。每個XYChart.Data
物件在圖表中表示一個條形。
連線檢視和控制器
-
在Scene Builder中開啟
BirthdayStatistics.fxml
。 -
在Controller組中設定
BirthdayStatisticsController
為控制器。 -
選擇
BarChart
,並且選擇barChar
作為fx:id屬性(在*Code*組中) -
選擇
CategoryAxis
,並且選擇xAxis
作為fx:id屬性。 -
你可以新增一個標題給
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.
下一步做什麼?
在最後的教程第7部分 中,我們將最後部署我們的應用(例如:打包並且釋出應用到我們的使用者)
歡迎關注公眾號:
相關推薦
【JavaFx教程】第六部分:統計圖
第6部分的主題 建立一個統計圖顯示生日的分佈。 生日統計 在AddressApp中所有人員都有生日。當我們人員慶祝他們生日的時候,如果有一些生日的統計不是會更好。 我們使用柱狀圖,包含每個月的一個條形。每個條形顯示在指定月份中有多少人需要過生日。 統計FXML檢視
【JavaFx教程】第四部分:CSS 樣式
第4部分主題 CSS樣式表 新增應用程式圖示 CSS樣式表 在JavaFX中,你能使用層疊樣式表修飾你的使用者介面。這非常好!自定義Java應用介面從來不是件簡單的事情。 在本教程中,我們將建立一個*DarkTheme*主題,靈感來自於Windows 8 Metr
【JavaFx教程】第五部分:將資料用 XML 格式儲存
第5部分的主題 持久化資料為XML 使用JavaFX的FileChooser 使用JavaFX的選單 在使用者設定中儲存最後開啟的檔案路徑。 現在我們的地址應用程式的資料只儲存在記憶體中。每次我們關閉應用程式,資料將丟失,因此是時候開始考慮持久化儲存資料了。 儲
【JavaFx教程】第三部分:與使用者的互動
第3部分的主題: 在表中反應選擇的改變(TableView中)。 增加增加,編輯和刪除按鈕的功能。 建立自定義彈出對話方塊編輯人員。 驗證使用者輸入。 響應表的選擇 顯然,我們還沒有使用應用程式的右邊。想法是當用戶選擇表中的人員時,在右邊顯示人員的詳情。 首先
【JavaFx教程】第七部分:部署
我想已經寫到本教程系列的最後一部分了,應該教你如何部署(例如:打包和釋出)AddressApp 第7部分的主題 使用e(fx)clipse本地包(Native Package)部署我們的JavaFX應用程式。 什麼是部署 部署是打包和釋出軟體給使用者的過程。這是軟體
【演算法筆記】第六章:C++標準模板庫(STL)介紹
【演算法筆記】第六章:C++標準模板庫(STL)介紹 標籤(空格分隔):【演算法筆記】 第六章:C++標準模板庫(STL)介紹 第六章:C++標準模板庫(STL)介紹 6.1 vector的常見用法詳解
【設計模式】第六篇:來康康介面卡模式
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a73dba64615d49249969470f7b2d52b3~tplv-k3u1fbpfcp-zoom-1.image) # 一 引言 設計模式就是一種思想,一種設計方式,他可以幫助我們對於一些
【JavaFx教程】第一部分:Scene Builder
第一部分的主題 開始瞭解 JavaFX 。 建立並執行一個 JavaFX 專案。 使用 Scene Builder 來設計使用者介面。 使用 模型 - 檢視 - 控制器(MVC)模式 構造基礎的應用。 你需要準備 最新的 Java JDK 8 (包含 JavaF
【機器學習系列文章】第1部分:為什麼機器學習很重要 ?
目錄 路線圖 關於作者 簡單,簡單的解釋,附有數學,程式碼和現實世界的例子。 這個系列是一本完整的電子書!在這裡下載。免費下載,貢獻讚賞(paypal.me/ml4h) 路線圖 第1部分:為什麼機器學習很重要。人工智慧和機器學習的大
【機器學習系列文章】第6部分:最好的機器學習資源
目錄 基金會 程式設計 線性代數 概率與統計 微積分 機器學習 培訓 教科書 深度學習 培訓 專案 閱讀 強化學習 培訓 專案 閱讀 人工智慧 簡訊 別人的建議 製作人工智慧,機器學習和深度學習課程的資源彙編。 關於制定課
【機器學習系列文章】第5部分:強化學習
目錄 你做到了! 結束思考 探索和開發。馬爾可夫決策過程。Q-learning,政策學習和深度強化學習。 “我只吃了一些巧克力來完成最後一節。” 在有監督的學習中,訓練資料帶有來自某些神聖的“主管”的答案。如果只有這樣的生活! 在強化學
【翻譯】第六章節:透明度(關於混合)
轉載地址:http://www.omuying.com/article/94.aspx 原文連結:http://en.wikibooks.org/wiki/Cg_Programming/Unity/Transparency 具體的說,本篇文章關於渲染透明物件,例如:透明的
【SpringCloud Greenwich版本】第六章:智慧路由(zuul)
一、SpringCloud版本 本文介紹的Springboot版本為2.1.1.RELEASE,SpringCloud版本為Greenwich.RC1,JDK版本為1.8,整合環境為IntelliJ IDEA 二、zuul介紹 路由在微服務體系結構的一個組成部分。例如,/可以對映
【屌絲程式的口才逆襲演講稿50篇】第六篇:兩個年輕人掙錢的故事 【張振華.Jack】
騏驥一躍,不能十步。駑馬十駕,功在不捨。讓我們一起來見證堅持的力量。不知道自己能堅持多久,但我相信堅持就是力量。Java高階交流群:240619787; 演講稿主題:《兩個年輕人掙錢的故事》
【滲透課程】第六篇-上傳漏洞之解析漏洞
文件的 配置文件 密碼 3.1 安裝目錄 ppa xxx 表單 圖片 上傳漏洞,我們為什麽要上傳?因為我們說過。在網站服務器上 肯定有一個Web容器,它裏面裝的就是Web應用程序 。某些腳本具有一定的執行和修改權限。這些權限可以說是服務器給客戶端訪問時提供的服務的同時提供的
【第一組】第六次沖刺例會
高斯模糊 osi log api 9.png 做了 設計 成員 position 開發小組:Neu Old Driver 沖刺經理:何圖 小組成員:李白洋、王彬宇、李恒雨、黃文睿、安迪 1、昨天做了什麽: 黃文睿:高斯模糊的2D效果
Node入門教程(8)第六章:path 模塊詳解
format QQ 調用 保留 微軟 posix interface join 結果 path 模塊詳解 path 模塊提供了一些工具函數,用於處理文件與目錄的路徑。由於windows和其他系統之間路徑不統一,path模塊還專門做了相關處理,屏蔽了彼此之間的差異。 可移
【藍橋杯】第六屆國賽C語言B組 2.完美正方形(dfs)
spa else img IT bool break main LG fill 如果一些邊長互不相同的正方形,可以恰好拼出一個更大的正方形,則稱其為完美正方形。 歷史上,人們花了很久才找到了若幹完美正方形。比如:如下邊長的22個正方形2 3 4 6 7 8 12 13 14
【藍橋杯】第六屆國賽C語言B組 1.積分之迷(水題)
水題 urn class %d names 風鈴 需要 藍橋 std 小明開了個網上商店,賣風鈴。共有3個品牌:A,B,C。為了促銷,每件商品都會返固定的積分。 小明開業第一天收到了三筆訂單:第一筆:3個A + 7個B + 1個C,共返積分:315第二筆:4個A + 10個
【leetcode 簡單】 第六十題 反轉鏈表
示例 reverse bsp tno sel leetcode rev lis div 反轉一個單鏈表。 示例: 輸入: 1->2->3->4->5->NULL 輸出: 5->4->3->2->1->NULL 進