- 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 - 繪製 SVG 路徑
- 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 - 遠光源特效
- JavaFX - 聚光燈特效
- JavaFX - 點光源特效
- JavaFX - 位移貼圖
- JavaFX - 透視變換
- JavaFX 動畫
- JavaFX - 動畫
- JavaFX - 旋轉過渡
- JavaFX - 縮放過渡
- JavaFX - 平移過渡
- JavaFX - 淡入淡出過渡
- JavaFX - 填充過渡
- JavaFX - 筆觸過渡
- JavaFX - 順序過渡
- JavaFX - 並行過渡
- JavaFX - 暫停過渡
- JavaFX - 路徑過渡
- JavaFX 圖片
- JavaFX - 圖片
- JavaFX 3D 形狀
- 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 中,線圖由名為 **LineChart** 的類表示。此類屬於 **javafx.scene.chart** 包。透過例項化此類,您可以在 JavaFX 中建立一個 LineChart 節點。
生成線圖的步驟
要在 JavaFX 中生成線圖,您應該按照以下步驟操作。
步驟 1:建立類
建立一個 Java 類並繼承 **javafx.application** 包的 **Application** 類。然後,您可以如下實現此類的 **start()** 方法。
public class ClassName extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}
步驟 2:定義軸
定義線圖的 X 軸和 Y 軸,併為其設定標籤。
在我們的示例中,X 軸代表從 1960 年到 2020 年的年份,每十年有一個主要刻度標記。
//Defining X axis
NumberAxis xAxis = new NumberAxis(1960, 2020, 10);
xAxis.setLabel("Years");
//Defining y axis
NumberAxis yAxis = new NumberAxis(0, 350, 50);
yAxis.setLabel("No.of schools");
步驟 3:建立線圖
透過例項化名為 **LineChart** 的類(屬於 **javafx.scene.chart** 包)來建立線圖。將表示在上一步中建立的 X 軸和 Y 軸的物件傳遞給此類的建構函式。
LineChart linechart = new LineChart(xAxis, yAxis);
步驟 4:準備資料
例項化 **XYChart.Series** 類。然後將資料(一系列 x 和 y 座標)新增到此類的 Observable 列表中,如下所示:
XYChart.Series series = new XYChart.Series();
series.setName("No of schools in an year");
series.getData().add(new XYChart.Data(1970, 15));
series.getData().add(new XYChart.Data(1980, 30));
series.getData().add(new XYChart.Data(1990, 60));
series.getData().add(new XYChart.Data(2000, 120));
series.getData().add(new XYChart.Data(2013, 240));
series.getData().add(new XYChart.Data(2014, 300));
步驟 5:將資料新增到線圖
將上一步中準備好的資料系列新增到線圖中,如下所示:
//Setting the data to Line chart linechart.getData().add(series);
步驟 6:建立 Group 物件
在 **start()** 方法中,透過例項化名為 **Group** 的類來建立一個組物件。這屬於 **javafx.scene** 包。
將上一步中建立的 LineChart(節點)物件作為引數傳遞給 Group 類的建構函式。這應該完成,以便將其新增到組中,如下所示:
Group root = new Group(linechart);
步驟 7:建立 Scene 物件
透過例項化名為 **Scene** 的類(屬於 **javafx.scene** 包)來建立一個場景。為此類傳遞上一步中建立的 Group 物件 (**root**)。
除了 root 物件外,您還可以傳遞兩個表示螢幕高度和寬度的雙精度引數以及 Group 類物件,如下所示。
Scene scene = new Scene(group ,600, 300);
步驟 8:設定舞臺標題
您可以使用 **Stage** 類的 **setTitle()** 方法來設定舞臺的標題。**primaryStage** 是一個 Stage 物件,它作為引數傳遞到場景類的 start 方法。
使用 **primaryStage** 物件,將場景的標題設定為 **示例應用程式**,如下所示。
primaryStage.setTitle("Sample Application");
步驟 9:將場景新增到舞臺
您可以使用名為 **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);
}
示例
下表顯示了 1970 年到 2014 年該地區學校的數量。
| 年份 | 學校數量 |
|---|---|
| 1970 | 15 |
| 1980 | 30 |
| 1990 | 60 |
| 2000 | 120 |
| 2013 | 240 |
| 2014 | 300 |
以下是一個 Java 程式,它使用 JavaFX 生成一個描繪上述資料的線圖。
將此程式碼儲存在名為 **LineChartExample.java** 的檔案中。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
public class LineChartExample extends Application {
@Override
public void start(Stage stage) {
//Defining the x axis
NumberAxis xAxis = new NumberAxis(1960, 2020, 10);
xAxis.setLabel("Years");
//Defining the y axis
NumberAxis yAxis = new NumberAxis (0, 350, 50);
yAxis.setLabel("No.of schools");
//Creating the line chart
LineChart linechart = new LineChart(xAxis, yAxis);
//Prepare XYChart.Series objects by setting data
XYChart.Series series = new XYChart.Series();
series.setName("No of schools in an year");
series.getData().add(new XYChart.Data(1970, 15));
series.getData().add(new XYChart.Data(1980, 30));
series.getData().add(new XYChart.Data(1990, 60));
series.getData().add(new XYChart.Data(2000, 120));
series.getData().add(new XYChart.Data(2013, 240));
series.getData().add(new XYChart.Data(2014, 300));
//Setting the data to Line chart
linechart.getData().add(series);
//Creating a Group object
Group root = new Group(linechart);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting title to the Stage
stage.setTitle("Line 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 LineChartExample.java java LineChartExample
執行後,上述程式將生成一個 JavaFX 視窗,顯示如下所示的線圖。