- JavaFX 教程
- JavaFX - 首頁
- JavaFX - 概述
- JavaFX 安裝和架構
- JavaFX - 環境
- JavaFX - 使用 NetBeans 安裝
- JavaFX - 使用 Eclipse 安裝
- JavaFX - 使用 Visual Studio Code 安裝
- JavaFX - 架構
- JavaFX - 應用程式
- JavaFX 二維形狀
- JavaFX - 二維形狀
- JavaFX - 繪製直線
- JavaFX - 繪製矩形
- JavaFX - 繪製圓角矩形
- JavaFX - 繪製圓形
- JavaFX - 繪製橢圓
- JavaFX - 繪製多邊形
- JavaFX - 繪製折線
- JavaFX - 繪製三次貝塞爾曲線
- JavaFX - 繪製二次貝塞爾曲線
- JavaFX - 繪製弧形
- JavaFX - 繪製 SVG 路徑
- JavaFX 二維物件的屬性
- JavaFX - 描邊型別屬性
- JavaFX - 描邊寬度屬性
- JavaFX - 描邊填充屬性
- JavaFX - 描邊屬性
- JavaFX - 描邊線連線屬性
- JavaFX - 描邊斜接限制屬性
- JavaFX - 描邊線端點屬性
- JavaFX - 平滑屬性
- JavaFX 路徑物件
- JavaFX - 路徑物件
- JavaFX - LineTo 路徑物件
- JavaFX - HLineTo 路徑物件
- JavaFX - VLineTo 路徑物件
- JavaFX - QuadCurveTo 路徑物件
- JavaFX - CubicCurveTo 路徑物件
- JavaFX - ArcTo 路徑物件
- JavaFX 顏色和紋理
- JavaFX - 顏色
- JavaFX - 線性漸變圖案
- JavaFX - 徑向漸變圖案
- JavaFX 文字
- JavaFX - 文字
- JavaFX 特效
- JavaFX - 特效
- JavaFX - 顏色調整特效
- JavaFX - 顏色輸入特效
- JavaFX - 圖片輸入特效
- JavaFX - 混合特效
- JavaFX - 輝光特效
- JavaFX - 發光特效
- JavaFX - 方框模糊特效
- JavaFX - 高斯模糊特效
- JavaFX - 運動模糊特效
- JavaFX - 反射特效
- JavaFX - 棕褐色特效
- JavaFX - 陰影特效
- JavaFX - 投影陰影特效
- JavaFX - 內陰影特效
- JavaFX - 光照特效
- JavaFX - 遠光源特效
- JavaFX - 聚光燈特效
- JavaFX - 點光源特效
- JavaFX - 位移貼圖
- JavaFX - 透視變換
- JavaFX 動畫
- JavaFX - 動畫
- JavaFX - 旋轉動畫
- JavaFX - 縮放動畫
- JavaFX - 平移動畫
- JavaFX - 淡入淡出動畫
- JavaFX - 填充動畫
- JavaFX - 描邊動畫
- JavaFX - 順序動畫
- JavaFX - 並行動畫
- JavaFX - 暫停動畫
- JavaFX - 路徑動畫
- JavaFX 圖片
- JavaFX - 圖片
- JavaFX 三維形狀
- JavaFX - 三維形狀
- JavaFX - 建立長方體
- JavaFX - 建立圓柱體
- JavaFX - 建立球體
- JavaFX 事件處理
- JavaFX - 事件處理
- JavaFX - 使用便捷方法
- JavaFX - 事件過濾器
- JavaFX - 事件處理器
- JavaFX UI 控制元件
- JavaFX - UI 控制元件
- JavaFX - 列表檢視
- JavaFX - 手風琴
- JavaFX - 按鈕欄
- JavaFX - 選擇框
- JavaFX - HTML 編輯器
- JavaFX - 選單欄
- JavaFX - 分頁
- JavaFX - 進度指示器
- JavaFX - 滾動窗格
- JavaFX - 分隔符
- JavaFX - 滑塊
- JavaFX - 微調器
- JavaFX - 分割窗格
- JavaFX - 表格檢視
- JavaFX - 標籤頁窗格
- JavaFX - 工具欄
- JavaFX - 樹檢視
- JavaFX - 標籤
- JavaFX - 複選框
- JavaFX - 單選按鈕
- JavaFX - 文字欄位
- JavaFX - 密碼欄位
- JavaFX - 檔案選擇器
- JavaFX - 超連結
- JavaFX - 工具提示
- JavaFX - 警報框
- JavaFX - 日期選擇器
- JavaFX - 文字區域
- JavaFX 圖表
- JavaFX - 圖表
- JavaFX - 建立餅圖
- JavaFX - 建立折線圖
- JavaFX - 建立面積圖
- JavaFX - 建立條形圖
- JavaFX - 建立氣泡圖
- JavaFX - 建立散點圖
- JavaFX - 建立堆疊面積圖
- JavaFX - 建立堆疊條形圖
- JavaFX 佈局面板
- JavaFX - 佈局面板
- JavaFX - HBox 佈局
- JavaFX - VBox 佈局
- JavaFX - BorderPane 佈局
- JavaFX - StackPane 佈局
- JavaFX - TextFlow 佈局
- JavaFX - AnchorPane 佈局
- JavaFX - TilePane 佈局
- JavaFX - GridPane 佈局
- JavaFX - FlowPane 佈局
- JavaFX CSS
- JavaFX - CSS
- JavaFX 多媒體
- JavaFX - 處理多媒體
- JavaFX - 播放影片
- JavaFX 有用資源
- JavaFX - 快速指南
- JavaFX - 有用資源
- JavaFX - 討論
JavaFX - 堆疊條形圖
堆疊條形圖是條形圖的一種變體,它繪製條形圖以指示某一類別的數值。條形圖可以是垂直的或水平的,這取決於哪個軸是類別軸。每個系列的條形圖都堆疊在之前的系列之上。
下面是一個堆疊條形圖,它描述了人口增長。
在 JavaFX 中,堆疊條形圖由名為 **StackedBarChart** 的類表示。此類屬於 **javafx.scene.chart** 包。透過例項化此類,您可以在 JavaFX 中建立 StackedBarChart 節點。
生成堆疊條形圖的步驟
要在 JavaFX 中生成堆疊條形圖,請按照以下步驟操作。
步驟 1:建立類
建立一個 Java 類並繼承 **javafx.application** 包的 **Application** 類。然後,您可以按如下方式實現此類的 **start()** 方法。
public class ClassName extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}
步驟 2:定義軸
定義堆疊條形圖的 X 軸和 Y 軸,併為其設定標籤。在我們的示例中,X 軸表示大洲,Y 軸表示以百萬為單位的人口。
//Defining the x axis
CategoryAxis xAxis = new CategoryAxis();
xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList
("Africa", "America", "Asia", "Europe", "Oceania")));
xAxis.setLabel("category");
//Defining the y axis
NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Population (In millions)");
步驟 3:建立堆疊條形圖
透過例項化 **javafx.scene.chart** 包中名為 **StackedBarChart** 的類來建立折線圖。將表示在上一步中建立的 X 軸和 Y 軸的物件傳遞給此類的建構函式。
//Creating the Bar chart
StackedBarChart<String, Number> stackedBarChart =
new StackedBarChart<>(xAxis, yAxis);
stackedBarChart.setTitle("Historic World Population by Region");
步驟 4:準備資料
例項化 **XYChart.Series** 類並將資料(一系列 x 和 y 座標)新增到此類的 Observable 列表中,如下所示:
//Prepare XYChart.Series objects by setting data
XYChart.Series<String, Number> series1 = new XYChart.Series<>();
series1.setName("1800");
series1.getData().add(new XYChart.Data<>("Africa", 107));
series1.getData().add(new XYChart.Data<>("America", 31));
series1.getData().add(new XYChart.Data<>("Asia", 635));
series1.getData().add(new XYChart.Data<>("Europe", 203));
series1.getData().add(new XYChart.Data<>("Oceania", 2));
XYChart.Series<String, Number> series2 = new XYChart.Series<>();
series2.setName("1900");
series2.getData().add(new XYChart.Data<>("Africa", 133));
series2.getData().add(new XYChart.Data<>("America", 156));
series2.getData().add(new XYChart.Data<>("Asia", 947));
series2.getData().add(new XYChart.Data<>("Europe", 408));
series1.getData().add(new XYChart.Data<>("Oceania", 6));
XYChart.Series<String, Number> series3 = new XYChart.Series<>();
series3.setName("2008");
series3.getData().add(new XYChart.Data<>("Africa", 973));
series3.getData().add(new XYChart.Data<>("America", 914));
series3.getData().add(new XYChart.Data<>("Asia", 4054));
series3.getData().add(new XYChart.Data<>("Europe", 732));
series1.getData().add(new XYChart.Data<>("Oceania", 34));
步驟 5:將資料新增到堆疊條形圖
將上一步中準備好的資料系列新增到條形圖中,如下所示:
//Setting the data to bar chart stackedBarChart.getData().addAll(series1, series2, series3);
步驟 6:建立 Group 物件
在 **start()** 方法中,透過例項化名為 **Group** 的類來建立一個 group 物件。這屬於 **javafx.scene** 包。
將上一步中建立的 StackedBarChart(節點)物件作為引數傳遞給 Group 類的建構函式。這應該這樣完成,以便將其新增到組中,如下所示:
Group root = new Group(stackedBarChart);
步驟 7:建立 Scene 物件
透過例項化名為 **Scene** 的類(屬於 **javafx.scene** 包)來建立一個 Scene。為此類傳遞上一步中建立的 Group 物件(根物件)。
除了根物件之外,您還可以傳遞兩個表示螢幕高度和寬度的雙精度引數,以及 Group 類的物件,如下所示。
Scene scene = new Scene(group ,600, 300);
步驟 8:設定舞臺的標題
您可以使用 **Stage** 類的 **setTitle()** 方法來設定舞臺的標題。此 **primaryStage** 是一個 Stage 物件,它作為引數傳遞給 scene 類的 start 方法。
使用 **primaryStage** 物件,將場景的標題設定為 **示例應用程式**,如下所示。
primaryStage.setTitle("Sample Application");
步驟 9:將 Scene 新增到 Stage
您可以使用名為 Stage 的類的 **setScene()** 方法將 Scene 物件新增到舞臺。使用此方法新增上一步中準備的 Scene 物件,如下所示。
primaryStage.setScene(scene);
步驟 10:顯示舞臺的內容
使用 **Stage** 類的名為 **show()** 的方法顯示場景的內容,如下所示。
primaryStage.show();
步驟 11:啟動應用程式
從 main 方法呼叫 **Application** 類的靜態方法 **launch()** 來啟動 JavaFX 應用程式,如下所示。
public static void main(String args[]){
launch(args);
}
示例
下表列出了 1800 年、1900 年和 2008 年各大陸的人口。
| 非洲 | 美洲 | 亞洲 | 歐洲 | 大洋洲 | |
|---|---|---|---|---|---|
| 1800 | 107 | 31 | 635 | 203 | 2 |
| 1900 | 133 | 156 | 947 | 408 | 6 |
| 2008 | 973 | 914 | 4054 | 732 | 34 |
下面是一個 Java 程式,它使用 JavaFX 生成一個堆疊條形圖來描述上述資料。
將此程式碼儲存到名為 **StackedBarChartExample.java** 的檔案中。
import java.util.Arrays;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedBarChart;
import javafx.scene.chart.XYChart;
public class StackedBarChartExample extends Application {
@Override
public void start(Stage stage) {
//Defining the axes
CategoryAxis xAxis = new CategoryAxis();
xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList
("Africa", "America", "Asia", "Europe", "Oceania")));
xAxis.setLabel("category");
NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Population (In millions)");
//Creating the Bar chart
StackedBarChart<String, Number> stackedBarChart =
new StackedBarChart<>(xAxis, yAxis);
stackedBarChart.setTitle("Historic World Population by Region");
//Prepare XYChart.Series objects by setting data
XYChart.Series<String, Number> series1 = new XYChart.Series<>();
series1.setName("1800");
series1.getData().add(new XYChart.Data<>("Africa", 107));
series1.getData().add(new XYChart.Data<>("America", 31));
series1.getData().add(new XYChart.Data<>("Asia", 635));
series1.getData().add(new XYChart.Data<>("Europe", 203));
series1.getData().add(new XYChart.Data<>("Oceania", 2));
XYChart.Series<String, Number> series2 = new XYChart.Series<>();
series2.setName("1900");
series2.getData().add(new XYChart.Data<>("Africa", 133));
series2.getData().add(new XYChart.Data<>("America", 156));
series2.getData().add(new XYChart.Data<>("Asia", 947));
series2.getData().add(new XYChart.Data<>("Europe", 408));
series1.getData().add(new XYChart.Data<>("Oceania", 6));
XYChart.Series<String, Number> series3 = new XYChart.Series<>();
series3.setName("2008");
series3.getData().add(new XYChart.Data<>("Africa", 973));
series3.getData().add(new XYChart.Data<>("America", 914));
series3.getData().add(new XYChart.Data<>("Asia", 4054));
series3.getData().add(new XYChart.Data<>("Europe", 732));
series1.getData().add(new XYChart.Data<>("Oceania", 34));
//Setting the data to bar chart
stackedBarChart.getData().addAll(series1, series2, series3);
//Creating a Group object
Group root = new Group(stackedBarChart);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting title to the Stage
stage.setTitle("stackedBarChart");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
使用以下命令從命令提示符編譯並執行儲存的 java 檔案。
javac StackedBarChartExample.java java StackedBarChartExample
執行後,上述程式將生成一個 JavaFX 視窗,顯示如下所示的面積圖。