jquery 饼图 java 饼图

本节概要

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

 

创建界面

首先创建使用饼图展示数据的界面，在view包下创建pieChartFrame.fxml文件，使用Scene Builder设计界面，各个组件的属性和事件方法参考下面的代码：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.PieChart?>
<?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.PieChartFrameController">
    <children>
        <HBox alignment="CENTER" prefHeight="68.0" prefWidth="800.0">
            <children>
                <ComboBox fx:id="pieChart_comboBox" onAction="#pieChart_comboBoxEvent" promptText="请选择日期"/>
            </children>
        </HBox>
        <ScrollPane fitToHeight="true" fitToWidth="true" layoutY="74.0" pannable="true" prefHeight="725.0"
                    prefWidth="800.0">
            <content>
                <PieChart fx:id="pieChart"/>
            </content>
        </ScrollPane>
    </children>
</AnchorPane>

接着是在controller包下创建与之对应的控制器类PieChartFrameController.java，并从Scene Builder中复制本界面的控件对象和事件方法代码到该控制器类中：

package AccountSystem.controller;

import AccountSystem.bean.Session;
import AccountSystem.tools.ChartTools;
import AccountSystem.tools.DateTools;
import AccountSystem.tools.PublicTools;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.chart.PieChart;
import javafx.scene.control.ComboBox;

import java.util.Calendar;
import java.util.Date;

/**
 * 饼图界面控制器
 *
 * @author lck100
 */
public class PieChartFrameController {
    private ChartTools chartTools = new ChartTools();
    private PublicTools publicTools = new PublicTools();
    private DateTools dateTools = new DateTools();

    @FXML
    private ComboBox<?> pieChart_comboBox;

    @FXML
    private PieChart pieChart;

    /**
     * 饼图界面的下拉列表框的监听器方法
     *
     * @param event 事件
     */
    @FXML
    public void pieChart_comboBoxEvent(ActionEvent event) {
      
    }
}

再接着是在MainApp.java中添加方法加载FXML资源文件：

/**
     * 操作结果：”饼图“查询结果界面
     */
    public Scene initPieChart() {
        try {
            Parent page = FXMLLoader.load(getClass().getResource("view/pieChartFrame.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 pieChartMenuItemEvent(ActionEvent actionEvent) {
        // 打开饼图界面
        mainApp.initPieChart();
    }

运行项目，查看界面：

 

实现功能

实现功能就是通过选中不同的下拉列表框的选项来绘制不同的折线图，和上一节的绘制折线图类似。

首先初始化下拉列表框选项：

/**
     * 初始化界面
     */
    public void initialize() {
        // 初始化填充下拉列表框选项
        String[] items = new String[]{"今天", "昨天", "最近1周收入", "最近1周支出", "最近1年支出（按月份）", "最近1年收入（按月份）", "最近1年支出（按季度）", "最近1年收入（按季度）"};
        publicTools.public_addComboBoxItems(pieChart_comboBox, items);
    }

接着是下拉列表框的事件处理，是调用了ChartTools中的方法，具体代码不详细说明，这里只作调用：

/**
     * 饼图界面的下拉列表框的监听器方法
     *
     * @param event 事件
     */
    @FXML
    public void pieChart_comboBoxEvent(ActionEvent event) {
        //只处理选中的状态
        String selectedCoboboxItem = (String) pieChart_comboBox.getSelectionModel().selectedItemProperty().getValue();
        switch (selectedCoboboxItem) {
            case "今天":
                chartTools.public_setDayPieChartData(Session.getUser(), pieChart, new Date(), new Date());
                break;
            case "昨天":
                chartTools.public_setDayPieChartData(Session.getUser(), pieChart, dateTools.getYesterdayDate(),
                        dateTools.getYesterdayDate());
                break;
            case "最近1周支出":
                chartTools.public_setWeekPieChartData(Session.getUser(), 7, pieChart, "支出");
                break;
            case "最近1周收入":
                chartTools.public_setWeekPieChartData(Session.getUser(), 7, pieChart, "收入");
                break;
            case "最近1年支出（按月份）": {
                Calendar calendar = Calendar.getInstance();
                int month = calendar.get(Calendar.MONDAY) + 1;
                chartTools.public_setMonthPieChartData(Session.getUser(), month, pieChart, "支出");
                break;
            }
            case "最近1年收入（按月份）": {
                Calendar calendar = Calendar.getInstance();
                int month = calendar.get(Calendar.MONDAY) + 1;
                chartTools.public_setMonthPieChartData(Session.getUser(), month, pieChart, "收入");
                break;
            }
            case "最近1年支出（按季度）":
                chartTools.public_setSeasonPieChartData(Session.getUser(), pieChart, "支出");
                break;
            case "最近1年收入（按季度）":
                chartTools.public_setSeasonPieChartData(Session.getUser(), pieChart, "收入");
                break;
            default:
                break;
        }

    }

运行代码，测试功能：

完成绘制饼图。