- JavaFX 教程
- JavaFX - 首頁
- JavaFX - 概述
- JavaFX 安裝和架構
- JavaFX - 環境
- JavaFX - 使用 Netbeans 安裝
- JavaFX - 使用 Eclipse 安裝
- JavaFX - 使用 Visual Studio Code 安裝
- JavaFX - 架構
- JavaFX - 應用程式
- JavaFX 2D 形狀
- JavaFX - 2D 形狀
- JavaFX - 繪製直線
- JavaFX - 繪製矩形
- JavaFX - 繪製圓角矩形
- JavaFX - 繪製圓形
- JavaFX - 繪製橢圓
- JavaFX - 繪製多邊形
- JavaFX - 繪製折線
- JavaFX - 繪製三次貝塞爾曲線
- JavaFX - 繪製二次貝塞爾曲線
- JavaFX - 繪製弧形
- JavaFX - 繪製 SVGPath
- JavaFX 2D 物件的屬性
- 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 - Light.Distant 特效
- JavaFX - Light.Spot 特效
- JavaFX - Point.Spot 特效
- JavaFX - 位移對映
- JavaFX - 透視變換
- JavaFX 動畫
- JavaFX - 動畫
- JavaFX - 旋轉過渡
- JavaFX - 縮放過渡
- JavaFX - 平移過渡
- JavaFX - 淡入淡出過渡
- JavaFX - 填充過渡
- JavaFX - 描邊過渡
- JavaFX - 順序過渡
- JavaFX - 並行過渡
- JavaFX - 暫停過渡
- JavaFX - 路徑過渡
- JavaFX 影像
- JavaFX - 影像
- JavaFX 3D 形狀
- JavaFX - 3D 形狀
- JavaFX - 建立立方體
- JavaFX - 建立圓柱體
- JavaFX - 建立球體
- 3D 物件的屬性
- 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 中,氣泡圖由名為 BubbleChart 的類表示。此類屬於 javafx.scene.chart 包。透過例項化此類,您可以在 JavaFX 中建立氣泡圖節點。
生成氣泡圖的步驟
要在 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
NumberAxis xAxis = new NumberAxis(0, 100, 10);
xAxis.setLabel("Age");
//Defining Y axis
NumberAxis yAxis = new NumberAxis(20, 100, 10);
yAxis.setLabel("Weight");
步驟 3:建立氣泡圖
透過例項化 javafx.scene.chart 包中名為 BubbleChart 的類來建立氣泡圖。在該類的建構函式中,傳遞表示在先前步驟中建立的 X 軸和 Y 軸的物件。
//Creating the Bubble chart BubbleChart bubbleChart = new BubbleChart(xAxis, yAxis);
步驟 4:準備資料
例項化 XYChart.Series 類,並將資料(一系列 x 和 y 座標)新增到該類的 Observable 列表中,如下所示:
//Prepare XYChart.Series objects by setting data
XYChart.Series series = new XYChart.Series();
series.setName("work");
series.getData().add(new XYChart.Data(10,30,4));
series.getData().add(new XYChart.Data(25,40,5));
series.getData().add(new XYChart.Data(40,50,9));
series.getData().add(new XYChart.Data(55,60,7));
series.getData().add(new XYChart.Data(70,70,9));
series.getData().add(new XYChart.Data(85,80,6));
步驟 5:將資料新增到氣泡圖
將先前步驟中準備的資料系列新增到氣泡圖中,如下所示:
//Setting the data to bar chart bubbleChart.getData().add(series);
步驟 6:建立 Group 物件
在 start() 方法中,透過例項化名為 Group 的類來建立一個 Group 物件。這屬於 javafx.scene 包。
將先前步驟中建立的氣泡圖(節點)物件作為引數傳遞給 Group 類的建構函式。應執行此操作以將其新增到組中,如下所示:
Group root = new Group(bubbleChart);
步驟 7:建立 Scene 物件
透過例項化名為 Scene 的類來建立一個 Scene,該類屬於 javafx.scene 包。在此類中,傳遞先前步驟中建立的 Group 物件 (root)。
除了根物件之外,您還可以傳遞兩個表示螢幕高度和寬度的雙精度引數,以及 Group 類的物件,如下所示。
Scene scene = new Scene(group ,600, 300);
步驟 8:設定 Stage 的標題
您可以使用 Stage 類的 setTitle() 方法設定 Stage 的標題。primaryStage 是一個 Stage 物件,它作為引數傳遞給 Scene 類的 start 方法。
使用 primaryStage 物件,將 Scene 的標題設定為 Sample Application,如下所示。
primaryStage.setTitle("Sample Application");
步驟 9:將 Scene 新增到 Stage
您可以使用名為 Stage 的類的 setScene() 方法將 Scene 物件新增到 Stage。使用以下方法新增在先前步驟中準備的 Scene 物件。
primaryStage.setScene(scene);
步驟 10:顯示 Stage 的內容
使用名為 Stage 類的 show() 方法顯示 Scene 的內容,如下所示。
primaryStage.show();
步驟 11:啟動應用程式
透過從 main 方法呼叫 Application 類的靜態方法 launch() 來啟動 JavaFX 應用程式,如下所示。
public static void main(String args[]){
launch(args);
}
示例
讓我們考慮不同的人以及他們的年齡、體重和工作能力。工作能力可以視為以圖表中的氣泡形式繪製的小時數。
| 體重 | ||||||||
|---|---|---|---|---|---|---|---|---|
| 年齡 | ||||||||
| 30 | 40 | 50 | 60 | 70 | 80 | |||
| 10 | 4 | 工作 | ||||||
| 25 | 5 | |||||||
| 40 | 6 | |||||||
| 55 | 8 | |||||||
| 70 | 9 | |||||||
| 85 | 15 | |||||||
以下是一個 Java 程式,它使用 JavaFX 生成一個氣泡圖,描繪了以上資料。
將此程式碼儲存在名為 BubbleChartExample.java 的檔案中。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.BubbleChart;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
public class BubbleChartExample extends Application {
@Override
public void start(Stage stage) {
//Defining the axes
NumberAxis xAxis = new NumberAxis(0, 100, 10);
xAxis.setLabel("Age");
NumberAxis yAxis = new NumberAxis(20, 100, 10);
yAxis.setLabel("Weight");
//Creating the Bubble chart
BubbleChart bubbleChart = new BubbleChart(xAxis, yAxis);
//Prepare XYChart.Series objects by setting data
XYChart.Series series = new XYChart.Series();
series.setName("work");
series.getData().add(new XYChart.Data(10,30,4));
series.getData().add(new XYChart.Data(25,40,5));
series.getData().add(new XYChart.Data(40,50,9));
series.getData().add(new XYChart.Data(55,60,7));
series.getData().add(new XYChart.Data(70,70,9));
series.getData().add(new XYChart.Data(85,80,6));
//Setting the data to bar chart
bubbleChart.getData().add(series);
//Creating a Group object
Group root = new Group(bubbleChart);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting title to the Stage
stage.setTitle("Bubble Chart");
//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 BubbleChartExample.java java BubbleChartExample
執行後,上述程式將生成一個 JavaFX 視窗,顯示如下所示的氣泡圖。