- 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 中的散點圖
在 JavaFX 中,散點圖由名為 ScatterChart 的類表示。此類屬於 javafx.scene.chart 包。透過例項化此類,您可以在 JavaFX 中建立 ScatterChart 節點。
要生成 JavaFX 中的散點圖,請按照以下步驟操作。
步驟 1:定義軸
定義面積圖的 X 軸和 Y 軸,並在 Application 類的 start() 方法中為其設定標籤。在我們的示例中,X 軸表示面積,Y 軸表示重量。
public class ClassName extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
//Defining the x axis
NumberAxis xAxis = new NumberAxis(0, 12, 3);
xAxis.setLabel("Area");
//Defining the y axis
NumberAxis yAxis = new NumberAxis(0, 16, 4);
yAxis.setLabel("Weight");
}
}
步驟 2:建立散點圖
透過例項化名為 ScatterChart 的類(屬於 javafx.scene.chart 包)來建立折線圖。將表示在上一步驟中建立的 X 軸和 Y 軸的物件傳遞給此類的建構函式。
//Creating the Scatter chart ScatterChart<String, Number> scatterChart = new ScatterChart(xAxis, yAxis);
步驟 3:準備資料
例項化 XYChart.Series 類並將資料(一系列 x 和 y 座標)新增到此類的 Observable 列表中,如下所示:
//Prepare XYChart.Series objects by setting data XYChart.Series series = new XYChart.Series(); series.getData().add(new XYChart.Data(8, 12)); series.getData().add(new XYChart.Data(4, 5.5)); series.getData().add(new XYChart.Data(11, 14)); series.getData().add(new XYChart.Data(4, 5)); series.getData().add(new XYChart.Data(3, 3.5)); series.getData().add(new XYChart.Data(6.5, 7));
步驟 4:將資料新增到散點圖
將上一步驟中準備好的資料系列新增到散點圖中,如下所示:
//Setting the data to scatter chart scatterChart.getData().addAll(series);
步驟 5:建立 Group 物件
在 start() 方法中,透過例項化名為 Group 的類來建立一個組物件。這屬於 javafx.scene 包。
將上一步驟中建立的 ScatterChart(節點)物件作為引數傳遞給 Group 類的建構函式。這應該這樣做是為了將其新增到組中,如下所示:
Group root = new Group(scatterChart);
步驟 6:啟動應用程式
最後,請按照以下步驟正確啟動應用程式:
首先,透過將 Group 物件作為引數值傳遞給其建構函式來例項化名為 Scene 的類。在此建構函式中,您還可以將應用程式螢幕的尺寸作為可選引數傳遞。
然後,使用 Stage 類的 setTitle() 方法設定舞臺的標題。
現在,使用名為 Stage 的類的 setScene() 方法將 Scene 物件新增到舞臺中。
使用名為 show() 的方法顯示場景的內容。
最後,應用程式在 launch() 方法的幫助下啟動。
示例
下表包含面積和重量之間繪製的樣本資料。
| 面積 | 重量 |
|---|---|
| 8 | 12 |
| 4 | 5.5 |
| 11 | 14 |
| 4 | 5 |
| 3 | 3.5 |
| 6.5 | 7 |
以下是一個 Java 程式,它使用 JavaFX 生成一個描繪上述資料的散點圖。
將此程式碼儲存在名為 ScatterChartExample.java 的檔案中。
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
public class ScatterChartExample extends Application {
@Override
public void start(Stage stage) {
//Defining the axes
NumberAxis xAxis = new NumberAxis(0, 12, 3);
xAxis.setLabel("Area");
NumberAxis yAxis = new NumberAxis(0, 16, 4);
yAxis.setLabel("Weight");
//Creating the Scatter chart
ScatterChart<String, Number> scatterChart =
new ScatterChart(xAxis, yAxis);
//Prepare XYChart.Series objects by setting data
XYChart.Series series = new XYChart.Series();
series.getData().add(new XYChart.Data(8, 12));
series.getData().add(new XYChart.Data(4, 5.5));
series.getData().add(new XYChart.Data(11, 14));
series.getData().add(new XYChart.Data(4, 5));
series.getData().add(new XYChart.Data(3, 3.5));
series.getData().add(new XYChart.Data(6.5, 7));
//Setting the data to scatter chart
scatterChart.getData().addAll(series);
//Creating a Group object
Group root = new Group(scatterChart);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting title to the Stage
stage.setTitle("Scatter 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 --module-path %PATH_TO_FX% --add-modules javafx.controls ScatterChartExample.java java --module-path %PATH_TO_FX% --add-modules javafx.controls ScatterChartExample
輸出
執行後,上述程式生成一個 JavaFX 視窗,其中顯示了一個散點圖,如下所示。
示例
下表說明了每月銷售的電子產品數量。
| 產品 | 銷售數量(每月) |
|---|---|
| 筆記型電腦 | 176 |
| 電視 | 30 |
| 手機 | 540 |
| 智慧手錶 | 250 |
| MacBook | 60 |
以下是一個 Java 程式,它使用 JavaFX 生成一個描繪上述資料的散點圖。
將此程式碼儲存在名為 ScatterChartSales.java 的檔案中。
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
public class ScatterChartExample extends Application {
@Override
public void start(Stage stage) {
//Defining the axes
CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("Items");
NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Sales (per month)");
//Creating the Scatter chart
ScatterChart scatterChart =
new ScatterChart(xAxis, yAxis);
//Prepare XYChart.Series objects by setting data
XYChart.Series series = new XYChart.Series();
series.setName("Items sold per month");
series.getData().add(new XYChart.Data("Laptop", 176));
series.getData().add(new XYChart.Data("TV", 30));
series.getData().add(new XYChart.Data("Mobile", 540));
series.getData().add(new XYChart.Data("Smart Watch", 250));
series.getData().add(new XYChart.Data("MacBook", 60));
//Setting the data to scatter chart
scatterChart.getData().addAll(series);
//Creating a Group object
Group root = new Group(scatterChart);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting title to the Stage
stage.setTitle("Scatter 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 --module-path %PATH_TO_FX% --add-modules javafx.controls ScatterChartSales.java java --module-path %PATH_TO_FX% --add-modules javafx.controls ScatterChartSales
輸出
執行後,上述程式生成一個 JavaFX 視窗,其中顯示了一個散點圖,如下所示。