Java实战之管家婆记账系统（17）——折线图展示数据界面及功能实现

本节概要

本节主要讲使用折线图展示数据。

 

创建界面

首先创建使用折线图展示数据的界面，在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】可获取本章的源码。