本節概要
本節主要講使用折線圖展示數據。
創建界面
首先創建使用折線圖展示數據的界面，在view包下創建lineChartFrame.fxml文件，使用Scene Builder設計界面，各個組件的屬性和事件方法參考下面的代碼：
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<AnchorPane prefHeight="800.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="AccountSystem.controller.LineChartFrameController">
<children>
<HBox alignment="CENTER" prefHeight="68.0" prefWidth="800.0">
<children>
<ComboBox fx:id="lineChart_comboBox" onAction="#lineChart_comboBoxEvent" promptText="請選擇日期"/>
</children>
</HBox>
<ScrollPane fitToHeight="true" fitToWidth="true" layoutY="74.0" pannable="true" prefHeight="725.0"
prefWidth="800.0">
<content>
<LineChart fx:id="lineChart">
<xAxis>
<CategoryAxis fx:id="categoryAxis" side="BOTTOM"/>
</xAxis>
<yAxis>
<NumberAxis fx:id="numberAxis" side="LEFT"/>
</yAxis>
</LineChart>
</content>
</ScrollPane>
</children>
</AnchorPane>
接着是在controller包下創建與之對應的控制器類LineChartFrameController.java，並從Scene Builder中複製本界面的控件對象和事件方法代碼到該控制器類中：
package AccountSystem.controller;
import AccountSystem.tools.ChartTools;
import AccountSystem.tools.PublicTools;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.control.ComboBox;
import java.util.Calendar;
/**
* 折線圖界面控制器
*
* @author lck100
*/
public class LineChartFrameController {
private PublicTools publicTools = new PublicTools();
private ChartTools chartTools = new ChartTools();
@FXML
private CategoryAxis categoryAxis;
@FXML
private ComboBox<?> lineChart_comboBox;
@FXML
private LineChart<?, ?> lineChart;
@FXML
private NumberAxis numberAxis;
/**
* 折線圖界面下拉列表框事件方法
*
* @param event 事件
*/
public void lineChart_comboBoxEvent(ActionEvent event) {
}
}
再接着是在MainApp.java中添加方法加載FXML資源文件：
/**
* 操作結果：“折線圖”查詢結果界面
*/
public Scene initLineChart() {
try {
Parent page = FXMLLoader.load(getClass().getResource("view/lineChartFrame.fxml"));
Stage mainFrameStage = new Stage();
mainFrameStage.setTitle("折線圖");
mainFrameStage.setResizable(true);
mainFrameStage.setAlwaysOnTop(false);
mainFrameStage.initModality(Modality.APPLICATION_MODAL);
mainFrameStage.initOwner(primaryStage);
Scene scene = new Scene(page);
mainFrameStage.setScene(scene);
mainFrameStage.showAndWait();
return scene;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
最後是在事件方法中調用該方法，即在MainPageController.java中：
/**
* “折線圖”菜單項的事件監聽器
*
* @param actionEvent 事件
*/
@FXML
public void lineChartMenuItemEvent(ActionEvent actionEvent) {
// 打開折線圖界面
mainApp.initLineChart();
}
運行項目，查看界面：
實現功能
實現功能就是通過選中不同的下拉列表框的選項來繪製不同的折線圖，和上一節的繪製條形圖類似。
首先初始化下拉列表框選項：
/**
* 初始化界面
*/
@FXML
public void initialize() {
// 初始化填充下拉列表框選項
String[] items = new String[]{"最近3天", "最近7天", "最近30天", "最近1年（12月）", "最近1年（4季度）"};
publicTools.public_addComboBoxItems(lineChart_comboBox, items);
}
接着是下拉列表框的事件處理，是調用了ChartTools中的方法，具體代碼不詳細說明，這裏只作調用：
/**
* 折線圖界面下拉列表框事件方法
*
* @param event 事件
*/
public void lineChart_comboBoxEvent(ActionEvent event) {
// 獲取下拉列表框選中項
String selectedCoboboxItem = (String) lineChart_comboBox.getSelectionModel().selectedItemProperty().getValue();
// 對選中項結果進行判斷處理
switch (selectedCoboboxItem) {
case "最近3天":
chartTools.public_setDayLineChartData(3, lineChart, categoryAxis, numberAxis);
break;
case "最近7天":
chartTools.public_setDayLineChartData(7, lineChart, categoryAxis, numberAxis);
break;
case "最近30天":
chartTools.public_setDayLineChartData(30, lineChart, categoryAxis, numberAxis);
break;
case "最近1年（12月）":
Calendar calendar = Calendar.getInstance();
int month = calendar.get(Calendar.MONDAY) + 1;
chartTools.public_setMonthLineChartData(month, lineChart, categoryAxis, numberAxis);
break;
case "最近1年（4季度）":
chartTools.public_setSeasonLineChartData(lineChart, categoryAxis, numberAxis);
break;
default:
break;
}
}
運行代碼，測試功能：
完成繪製折線圖。
可搜索微信公衆號【Java實例程序】或者掃描下方二維碼關注公衆號獲取更多。
注意：在公衆號後臺回覆【20200414】可獲取本章的源碼。
