- 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 - ListView
- JavaFX - Accordion
- JavaFX - ButtonBar
- JavaFX - ChoiceBox
- JavaFX - HTMLEditor
- JavaFX - MenuBar
- JavaFX - Pagination
- JavaFX - ProgressIndicator
- JavaFX - ScrollPane
- JavaFX - Separator
- JavaFX - Slider
- JavaFX - Spinner
- JavaFX - SplitPane
- JavaFX - TableView
- JavaFX - TabPane
- JavaFX - ToolBar
- JavaFX - TreeView
- JavaFX - Label
- JavaFX - CheckBox
- JavaFX - RadioButton
- JavaFX - TextField
- JavaFX - PasswordField
- JavaFX - FileChooser
- JavaFX - Hyperlink
- JavaFX - Tooltip
- JavaFX - Alert
- JavaFX - DatePicker
- JavaFX - TextArea
- 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 中,餅圖由名為 **PieChart** 的類表示。此類屬於 **javafx.scene.chart** 包。
透過例項化此類,您可以在 JavaFX 中建立一個 PieChart 節點。
此類具有 5 個屬性,如下所示:
**clockwise** - 這是一個布林運算子;將此運算子設定為 true 時,餅圖中的資料切片將從餅圖的起始角度開始順時針排列。
**data** - 這表示一個 **ObservableList** 物件,其中包含餅圖的資料。
**labelLineLength** - 一個整數運算子,表示連線標籤和餅圖切片的線的長度。
**labelsVisible** - 這是一個布林運算子;將此運算子設定為 true 時,將繪製餅圖的標籤。預設情況下,此運算子設定為 true。
**startAngle** - 這是一個雙精度型別運算子,表示第一個餅圖切片的起始角度。
要生成餅圖,請準備一個 ObservableList 物件,如以下程式碼塊所示:
//Preparing ObservbleList object
ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList(
new PieChart.Data("Iphone 5S", 13),
new PieChart.Data("Samsung Grand", 25),
new PieChart.Data("MOTO G", 10),
new PieChart.Data("Nokia Lumia", 22));
準備 **ObservableList** 物件後,將其作為引數傳遞給 **PieChart** 類的建構函式,如下所示:
//Creating a Pie chart PieChart pieChart = new PieChart(pieChartData);
或者,使用名為 **setData()** 的方法,該方法屬於 **javafx.scene.chart** 包中的 **PieChart** 類。
pieChart.setData(pieChartData);
生成餅圖的步驟
要在 JavaFX 中生成 **PieChart**,請按照以下步驟操作。
步驟 1:建立類
建立一個 Java 類並繼承 **javafx.application** 包中的 **Application** 類,並實現此類的 **start()** 方法,如下所示。
public class ClassName extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}
步驟 2:準備 ObservableList 物件
透過傳遞餅圖的資料來準備 **ObservableList** 介面的物件,如下所示:
ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList(
new PieChart.Data("Iphone 5S", 13),
new PieChart.Data("Samsung Grand", 25),
new PieChart.Data("MOTO G", 10),
new PieChart.Data("Nokia Lumia", 22));
步驟 3:建立 PieChart 物件
透過傳遞 **ObservableList** 物件來建立 **PieChart**,如下所示。
//Creating a Pie chart PieChart pieChart = new PieChart(pieChartData);
步驟 4:設定餅圖的標題
使用 **PieChart** 類的 **setTitle()** 方法設定餅圖的標題。這屬於 **javafx.scene.chart** 包:
//Setting the title of the Pie chart
pieChart.setTitle("Mobile Sales");
步驟 5:將切片設定為順時針方向
將餅圖的切片設定為順時針方向。這是透過將布林值 true 傳遞給 **PieChart** 類的 **setClockwise()** 方法來完成的。這屬於 **javafx.scene.chart** 包:
//setting the direction to arrange the data pieChart.setClockwise(true);
步驟 6:設定標籤線的長度
使用 **PieChart** 類的 **setLabelLineLength()** 方法設定標籤線的長度,該方法屬於 **javafx.scene.chart** 包,如下所示:
//Setting the length of the label line pieChart.setLabelLineLength(50);
步驟 7:設定標籤可見
透過將布林值 **true** 傳遞給 **PieChart** 類的 **setLabelsVisible()** 方法,將餅圖的標籤設定為可見。這屬於 **javafx.scene.chart** 包:
//Setting the labels of the pie chart visible pieChart.setLabelsVisible(true);
步驟 8:設定餅圖的起始角度
使用 **PieChart** 類的 **setStartAngle()** 方法設定餅圖的起始角度。這屬於 **javafx.scene.chart** 包:
//Setting the start angle of the pie chart pieChart.setStartAngle(180);
步驟 9:建立 Group 物件
在 **start()** 方法中,透過例項化名為 Group 的類來建立一個 group 物件。這屬於 **javafx.scene** 包。
將上一步中建立的 PieChart(節點)物件作為引數傳遞給 Group 類的建構函式。這應該為了將其新增到組中,如下所示:
Group root = new Group(piechart);
步驟 10:建立 Scene 物件
透過例項化名為 **Scene** 的類來建立一個 Scene,該類屬於 **javafx.scene** 包。為此類傳遞上一步中建立的 Group 物件(**root**)。
除了 root 物件之外,您還可以傳遞兩個雙精度引數,分別表示螢幕的高度和寬度,以及 Group 類的物件,如下所示。
Scene scene = new Scene(group ,600, 300);
步驟 11:設定 Stage 的標題
您可以使用 **Stage** 類的 **setTitle()** 方法設定 Stage 的標題。**primaryStage** 是一個 Stage 物件,它作為引數傳遞給場景類的 start 方法。
使用 **primaryStage** 物件,將場景的標題設定為 **Sample Application**,如下所示。
primaryStage.setTitle("Sample Application");
步驟 12:將 Scene 新增到 Stage
您可以使用名為 **Stage** 類的 **setScene()** 方法將 Scene 物件新增到 Stage。使用此方法新增上一步中準備的 Scene 物件,如下所示。
primaryStage.setScene(scene);
步驟 13:顯示 Stage 的內容
使用名為 **Stage** 類的 **show()** 方法顯示場景的內容,如下所示。
primaryStage.show();
步驟 14:啟動應用程式
從 main 方法中呼叫 **Application** 類的靜態方法 **launch()** 來啟動 JavaFX 應用程式,如下所示。
public static void main(String args[]){
launch(args);
}
示例
下表使用餅圖描述了手機銷量。下表列出了不同的手機品牌及其銷量(每天的銷量單位)。
| 序號 | 手機品牌 | 銷量(每天的單位) |
|---|---|---|
| 1 | Iphone 5S | 20 |
| 2 | 三星 Grand | 20 |
| 3 | 摩托羅拉 G | 40 |
| 4 | 諾基亞 Lumia | 10 |
以下是一個 Java 程式,它使用 JavaFX 生成一個餅圖,描繪了上述資料。將此程式碼儲存在名為 **PieChartExample.java** 的檔案中。
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.chart.PieChart;
public class PieChartExample extends Application {
@Override
public void start(Stage stage) {
//Preparing ObservbleList object
ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList(
new PieChart.Data("Iphone 5S", 13),
new PieChart.Data("Samsung Grand", 25),
new PieChart.Data("MOTO G", 10),
new PieChart.Data("Nokia Lumia", 22));
//Creating a Pie chart
PieChart pieChart = new PieChart(pieChartData);
//Setting the title of the Pie chart
pieChart.setTitle("Mobile Sales");
//setting the direction to arrange the data
pieChart.setClockwise(true);
//Setting the length of the label line
pieChart.setLabelLineLength(50);
//Setting the labels of the pie chart visible
pieChart.setLabelsVisible(true);
//Setting the start angle of the pie chart
pieChart.setStartAngle(180);
//Creating a Group object
Group root = new Group(pieChart);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting title to the Stage
stage.setTitle("Pie 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 PieChartExample.java java PieChartExample
執行後,上述程式將生成一個 JavaFX 視窗,顯示如下所示的餅圖。