Web实例_报表开发01-基于HTML进行报表呈现

news2024/12/24 0:00:08

Web实例_报表开发01-基于HTML进行报表呈现

报表开发是一种在利用了软件的基础上, 针对不同类型的报表, 进行开放的工作。

而以报表的方式, 将相关的内容、数值呈现出来的话, 则会起到更好的概况作用。

再加上, 报表开发工作是依托于计算机来完成的, 因此在效率、完整性等方面, 表现的也很不错。

报表开发的特点:

  1. 报表开发需要合理地进行分类, 至于分类的依据, 可以从样式这方面入手, 让不同样式的报表, 可以条理清晰地表现出工作内容。

  2. 报表越多的情况下, 数据库的内容也会随之丰富起来, 因此报表开发应当具备一定的相关结构, 这样才能让数据库显得更连贯。

报表开发的价值:

  1. 借助于报表开发, 可以对数据进行细致化处理, 而这个过程中运用到了计算机, 所以效率会比较高, 节省了人力上的成本。

  2. 有数据报表的情况下, 结合相关的数据内容, 可以在更好的程度上进行决策分析, 从而让企业获得更具价值魅力的前景。

报表开发已经在很多做管理体系的公司当中, 得到了充分的使用, 发挥了自身的特点以及价值。

报表开发流程

  1. 数据录入 (a. 数据填报, b. 数据清洗, c. 载入SQL数据库)

  2. 数据权限 (根据组织架构设计不同账号类型能够涉及到的数据权限)

  3. 数据呈现 (a. 按需提取SQL数据库的数据, b. 按需进行数据计算, c. 按需进行数据呈现)

  4. 外观设计

本例所处流程: 属于 3. 数据呈现 中的 c. 按需进行数据呈现 部分。

(因为第 3. 数据呈现 中的 c. 按需进行数据呈现 部分非常便于快速理解 报表开发 所要达到的目标, 所以放在前面做实例演示)

实例数据

现有一份XX集团2023年中秋国庆积分抵现明细表, 已经过数据脱敏处理。

CSV数据_XX集团2023年中秋国庆积分抵现明细表(已脱敏)-2024-03-31.zip

数据包含四川, 西安, 云南三个省2023年09月29日至2023年10月06日共8日积分抵现的明细记录。

数据如下:

图01

实例需求

  • 能够直观的呈现各省由近到远(日期)的每日积分抵现合计金额。

  • 能够直观的呈现各省由近到远(日期)的每日积分抵现平均金额。

  • 能够直观的呈现各省由近到远(日期)的每日积分抵现增长幅度。

  • 能够对每日低于三省平均积分抵现金额的省份进行预警。

需求梳理 - 设计需求 & 沟通需求

需求(1): 能够直观的呈现各省由近到远(日期)的每日积分抵现合计金额。

使用 Microsoft Office Excel 2016 设计呈现效果。

使用数据透视表可以快速聚合数值, 排布行列:

图02

需求(2): 能够直观的呈现各省由近到远(日期)的每日积分抵现平均金额。

使用 Microsoft Office Excel 2016 设计呈现效果。

使用数据透视表可以快速聚合数值, 排布行列:

图03

需求(3): 能够直观的呈现各省由近到远(日期)的每日积分抵现增长幅度。

使用 Microsoft Office Excel 2016 设计呈现效果。

使用数据透视表可以快速聚合数值, 排布行列:

图04

需求(4): 能够对每日低于三省平均积分抵现金额的省份进行预警。

使用 Microsoft Office Excel 2016 设计呈现效果 (将需要预警的省份名称标红)。

使用数据透视表可以快速聚合数值, 排布行列:

图05

创建数据视图(View) - 为需求编写 SQL 语句

  • 将报表所需的 “各省每日积分抵现合计金额”, “各省每日积分抵现平均金额”, “各省每日积分抵现增长幅度” 等尽量一次性计算为数据视图(View)。

效果如下:

图06

↓ \downarrow ↓

图07

附 MySQL 的 SQL 语句:

CREATE OR REPLACE VIEW report_xxgroup_2023_zq_gq_points_deduction AS

WITH Drive_Aggregate_by_Date AS (
    SELECT
        日期,
        SUM(冲抵金额) AS 按日冲抵金额总计,
        AVG(冲抵金额) AS 按日冲抵金额平均
    FROM
        view_xxgroup_2023_zq_gq_points_deduction
    GROUP BY
        日期
)

, Drive_Aggregate_by_Province AS (
    SELECT
        省,
        SUM(冲抵金额) AS 按省冲抵金额总计,
        AVG(冲抵金额) AS 按省冲抵金额平均
    FROM
        view_xxgroup_2023_zq_gq_points_deduction
    GROUP BY
        省
)

, Drive_Aggregate_by_Date_and_Province AS (
    SELECT
        日期,
        省,
        SUM(冲抵金额) AS 明细冲抵金额总计,
        AVG(冲抵金额) AS 明细冲抵金额平均
    FROM
        view_xxgroup_2023_zq_gq_points_deduction
    GROUP BY
        日期,
        省
)

, Drive_OLAP_by_Date AS (
    SELECT
        日期,
        按日冲抵金额总计,
        按日冲抵金额平均,
        LEAD(按日冲抵金额总计, 1) OVER (ORDER BY 日期 DESC) AS 按日冲抵金额总计上日数据
    FROM
        Drive_Aggregate_by_Date
)

, Drive_OLAP_by_Date_and_Province AS (
    SELECT
        日期,
        省,
        明细冲抵金额总计,
        明细冲抵金额平均,
        LEAD(明细冲抵金额总计, 1) OVER (PARTITION BY 省 ORDER BY 日期 DESC) AS 明细冲抵金额总计上日数据
    FROM
        Drive_Aggregate_by_Date_and_Province
)

, Drive_Join_Table_Part_1 AS (
    SELECT
        T1.日期,
        T1.省,
        T1.明细冲抵金额总计,
        T1.明细冲抵金额平均,
        T2.按日冲抵金额平均,
        IF(T1.明细冲抵金额总计上日数据 IS NOT NULL, ((T1.明细冲抵金额总计 - T1.明细冲抵金额总计上日数据) / T1.明细冲抵金额总计上日数据), 0.0) AS 明细增长幅度,
        IF(T2.按日冲抵金额总计上日数据 IS NOT NULL, ((T2.按日冲抵金额总计 - T2.按日冲抵金额总计上日数据) / T2.按日冲抵金额总计上日数据), 0.0) AS 按日增长幅度
    FROM
        Drive_OLAP_by_Date_and_Province AS T1 LEFT JOIN Drive_OLAP_by_Date AS T2
    ON
        T1.日期 = T2.日期
)

SELECT
    T1.日期,
    DATE_FORMAT(T1.日期, "%m月%d日") AS 月日,
    T1.省,
    T1.明细冲抵金额总计,
    T1.明细冲抵金额平均,
    T1.明细增长幅度,
    T1.按日增长幅度,
    T1.按日冲抵金额平均,
    T2.按省冲抵金额平均
FROM
    Drive_Join_Table_Part_1 AS T1 LEFT JOIN Drive_Aggregate_by_Province AS T2
ON
    T1.省 = T2.省;

纯 HTML 实现 - 理解 Web 表格的构建形式

HTML 表格标签 <table>, <tr>, <th>, <td> 说明:

<table>: Table / 定义了 HTML 表格 (HTML 表格由 <table> 元素和 1 个或多个 <tr>, <th> 和 <td> 元素组成。

<tr>: Table Row / 表格中的一行。

<th>: Table Header Cell / 表格中的表头。

<td>: Table Data Cell / 表格中的一个单元格。

以 “需求(1): 能够直观的呈现各省由近到远(日期)的每日积分抵现合计金额” 为例, 构建 Web 表格。

效果如下:

图08

↓ \downarrow ↓

图09

附 HTML 代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body style="background-color: #EFF3F5;">
    <div class="table-container">
        <!-- 表格标签 -->
        <table class="table-style" border="1" align="left" cellpadding="10" cellspacing="0">
            <!-- 表格标题标签 -->
            <caption><b>XX集团各省由近到远(日期)的每日积分抵现合计金额</b></caption>
            <!-- 表格行标签 -->
            <tr>
                <!-- 表格表头标签 -->
                <th>省</th>
                <th>10月06日</th>
                <th>10月05日</th>
                <th>10月04日</th>
                <th>10月03日</th>
                <th>10月02日</th>
                <th>10月01日</th>
                <th>09月30日</th>
                <th>09月29日</th>
                <th>总计</th>
            </tr>
            <tr>
                <!-- 表格单元格标签 -->
                <td align="center">四川</td>
                <td align="center">111831</td>
                <td align="center">91333</td>
                <td align="center">84645</td>
                <td align="center">85928</td>
                <td align="center">119526</td>
                <td align="center">169005</td>
                <td align="center">143583</td>
                <td align="center">297034</td>
                <td align="center">1102885</td>
            </tr>
            <tr>
                <td align="center">西安</td>
                <td align="center">273485</td>
                <td align="center">162851</td>
                <td align="center">119523</td>
                <td align="center">170458</td>
                <td align="center">174650</td>
                <td align="center">225007</td>
                <td align="center">247525</td>
                <td align="center">572872</td>
                <td align="center">1946371</td>
            </tr>
            <tr>
                <td align="center">云南</td>
                <td align="center">229005</td>
                <td align="center">150066</td>
                <td align="center">139779</td>
                <td align="center">146863</td>
                <td align="center">174553</td>
                <td align="center">296661</td>
                <td align="center">217093</td>
                <td align="center">398506</td>
                <td align="center">1752526</td>
            </tr>
            <tr>
                <td align="center"><b>总计</b></td>
                <td align="center"><b>614321</b></td>
                <td align="center"><b>404250</b></td>
                <td align="center"><b>343947</b></td>
                <td align="center"><b>403249</b></td>
                <td align="center"><b>468729</b></td>
                <td align="center"><b>690673</b></td>
                <td align="center"><b>608201</b></td>
                <td align="center"><b>1268412</b></td>
                <td align="center"><b>4801782</b></td>
            </tr>
        </table>
    </div>
</body>
</html>

动态生成 HTML 标记语言 - 实时调取数据库数据 (以 PHP 脚本为例)

这里为了方便演示, 使用了简单的 PHP语言 实现, 使用 ASP语言, Java, JavaScript脚本语言, Python 的 Django Web框架 等, 都可实现同样效果。

以 “需求(2): 能够直观的呈现各省由近到远(日期)的每日积分抵现平均金额” 为例, 动态生成 HTML 标记语言, 构建 Web 表格。

需要注意的是, 在实现 需求(2) 的时候, 各省份最右边行尾的 各省总体平均值 不能简单的将该行的数据平均, 因为 先按日期分组平均再加总平均 与 直接按省份总体平均 的结果会有差异, 因为每组数据的数量不一样, 需要先在数据库计算好。

效果如下:

图10

↓ \downarrow ↓

图11

附 需求(2) 在 index.php 中 PHP 的函数调用代码:

<div class="table-container">
    <table class="table-style" border="1" align="left" cellpadding="10" cellspacing="0">
    <caption><b>XX集团各省由近到远(日期)的每日积分抵现平均金额</b></caption>
        <?php
        /* 通过 PDO 初始化 MySQL 连接 */
        $pdo = Func_Init_MySQL_Connect_by_PDO($Arg_Host="127.0.0.1", $Arg_UserName="goufeng");
        
        /* 将 "按省平均" 的数据查询出来, 并保存在 数组(Array) 中 */
        $sql__sc_avg = "SELECT DISTINCT 按省冲抵金额平均 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '四川'";
        $sql__xa_avg = "SELECT DISTINCT 按省冲抵金额平均 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '西安'";
        $sql__yn_avg = "SELECT DISTINCT 按省冲抵金额平均 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '云南'";
        $sql_all_avg = "SELECT AVG(冲抵金额) FROM view_xxgroup_2023_zq_gq_points_deduction;";
        $arr__sc_avg = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql__sc_avg );
        $arr__xa_avg = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql__xa_avg );
        $arr__yn_avg = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql__yn_avg );
        $arr_all_avg = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql_all_avg );
        
        /* 调用 PHP 函数, 构建 表格表头(Table Header) */
        $sql = "SELECT DISTINCT 月日 FROM report_xxgroup_2023_zq_gq_points_deduction";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Header($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="省", $Arg_DIY_Tail_of_Row="平均");
        
        /* 调用 PHP 函数, 构建 表格行(Table Row) */
        $sql = "SELECT 明细冲抵金额平均 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '四川'";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Row($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="四川", $Arg_DIY_Tail_of_Row=$arr__sc_avg[0]); // "按省平均" 的数据放在行尾。
        
        /* 调用 PHP 函数, 构建 表格行(Table Row) */
        $sql = "SELECT 明细冲抵金额平均 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '西安'";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Row($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="西安", $Arg_DIY_Tail_of_Row=$arr__xa_avg[0]); // "按省平均" 的数据放在行尾。
        
        /* 调用 PHP 函数, 构建 表格行(Table Row) */
        $sql = "SELECT 明细冲抵金额平均 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '云南'";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Row($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="云南", $Arg_DIY_Tail_of_Row=$arr__yn_avg[0]); // "按省平均" 的数据放在行尾。
        
        /* 调用 PHP 函数, 构建 表格总结行(Table Summary Row) */
        $sql = "SELECT 按日冲抵金额平均 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '四川'"; // 随便指定一个省, 因为数据库聚合数据是左连接指定的。
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Header($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="平均", $Arg_DIY_Tail_of_Row=$arr_all_avg[0]); // "按省平均" 的数据放在行尾。
        ?>
    </table>
</div>

以 “需求(3): 能够直观的呈现各省由近到远(日期)的每日积分抵现增长幅度” 为例, 动态生成 HTML 标记语言, 构建 Web 表格。

效果如下:

图12

↓ \downarrow ↓

图13

附 需求(3) 在 index.php 中 PHP 的函数调用代码:

<div class="table-container">
    <table class="table-style" border="1" align="left" cellpadding="10" cellspacing="0">
    <caption><b>XX集团各省由近到远(日期)的每日积分抵现增长幅度</b></caption>
        <?php
        /* 调用 PHP 函数, 构建 表格表头(Table Header) */
        $sql = "SELECT DISTINCT 月日 FROM report_xxgroup_2023_zq_gq_points_deduction";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Header($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="省", $Arg_DIY_Tail_of_Row="合计增长");
        
        /* 调用 PHP 函数, 构建 表格行(Table Row) */
        $sql = "SELECT 明细增长幅度 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '四川'";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Row($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="四川", $Arg_DIY_Tail_of_Row="SUM"); // 调用函数内的 "求和(Sum)" 功能。
        
        /* 调用 PHP 函数, 构建 表格行(Table Row) */
        $sql = "SELECT 明细增长幅度 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '西安'";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Row($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="西安", $Arg_DIY_Tail_of_Row="SUM"); // 调用函数内的 "求和(Sum)" 功能。
        
        /* 调用 PHP 函数, 构建 表格行(Table Row) */
        $sql = "SELECT 明细增长幅度 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '云南'";
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Row($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="云南", $Arg_DIY_Tail_of_Row="SUM"); // 调用函数内的 "求和(Sum)" 功能。
        
        /* 调用 PHP 函数, 构建 表格总结行(Table Summary Row) */
        $sql = "SELECT 按日增长幅度 FROM report_xxgroup_2023_zq_gq_points_deduction WHERE 省 = '四川'"; // 随便指定一个省, 因为数据库聚合数据是左连接指定的。
        $arr = Func_Exec_MySQL_Select_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO=$pdo, $Arg_SQL_SELECT_Stmt=$sql);
        Func_Read_1D_Array_to_HTML_Table_Header($Arg_1D_Array=$arr, $Arg_DIY_Head_of_Row="总计", $Arg_DIY_Tail_of_Row="SUM"); // 调用函数内的 "求和(Sum)" 功能。
        ?>
    </table>
</div>

附 PHP 连接 MySQL 函数定义代码 (PDO 函数):

/*
 * Create By GF 2024-03-29
 */

/* 初始化 MySQL 连接函数 - 通过 PDO 初始化 MySQL 连接 */
function Func_Init_MySQL_Connect_by_PDO($Arg_Host="127.0.0.1", $Arg_UserName="anonymous", $Arg_Password="12345678", $Arg_Database="gf_demo") {

   /*
    * PDO 连接关闭方法 1. 设置 PDO 连接的 PDO::ATTR_PERSISTENT 属性为 false。
    *                     在 PDO 的构造函数中, 可以设置第四个参数为 false 来关闭连接。
    *                     例如, $pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password', array(PDO::ATTR_PERSISTENT => false));。
    *
    * PDO 连接关闭方法 2. 使用 null 来关闭 PDO 连接。
    *                     可以将 PDO 对象设置为 null 来关闭连接。
    *                     例如, $pdo = null;, 这会释放连接资源, 并确保数据库连接在不需要时不会一直占用系统资源。
    * 
    * 当脚本执行完成或调用了 exit() 函数时, PDO 会自动关闭数据库连接。在大多数情况下, 不需要显式地关闭连接。
    */
    
    $Inr_Host = $Arg_Host;
    $Inr_UserName = $Arg_UserName;
    $Inr_Password = $Arg_Password;
    $Inr_Database = $Arg_Database;
    
    try {

        /* -------------------------------------- */
        /* 创建 mysql_connect 数据库连接 */
        $dsn = "mysql:host=".$Inr_Host.";port=3306;charset=utf8;dbname=".$Inr_Database;
		/* ...................................... */
        $pdo = new PDO($dsn, $Inr_UserName, $Inr_Password);
        /* ...................................... */
        return $pdo;
    } catch (PDOException $e) {

        /* -------------------------------------- */
        /* MySQL 连接失败时显示错误信息 */
        die ("Database Connection Error: ".$e->getMessage()."<br>");
    }
}

/* 执行 MySQL SELECT 语句函数 - 通过 PDO 提取单个字段到 1 维 数组(Array) */
function Func_Exec_MySQL_SELECT_Stmt_Extract_Field_to_1D_Array_by_PDO($Arg_PDO, $Arg_SQL_SELECT_Stmt) {

    $Inr_PDO = $Arg_PDO;
    /* .......................................... */
    /* 从 参数(Arguments) 传递 SQL 的 SELECT 语句 */
	$Inr_SQL_Statements = $Arg_SQL_SELECT_Stmt;
    
    /* ------------------------------------------ */
    /* 验证 SQL 的 SELECT 语句是否只包含 1 个字段 */
    preg_match("/SELECT .* FROM/i", $Inr_SQL_Statements, $matches);
    /* .......................................... */
    $Part_SELECT_of_SQL_Stmt = $matches[0];
    /* .......................................... */
    $Part_SELECT_of_SQL_Stmt = str_ireplace(array("SELECT ", "SELECT DISTINCT ", " FROM"), "", $Part_SELECT_of_SQL_Stmt);
    /* .......................................... */
    $Part_SELECT_of_SQL_Stmt = preg_split("/,/i", $Part_SELECT_of_SQL_Stmt);
    /* .......................................... */
    if (count($Part_SELECT_of_SQL_Stmt) > 1) {
        /* 如果 SQL 的 SELECT 语句包含多个字段, 则终止函数运行 */
        echo "[Caution] Function ( Func_Exec_MySQL_SELECT_Stmt_Extract_Field_to_1D_Array_by_PDO ) Running Error: SQL SELECT Statement Contains Multiple Fields.";
        exit();
    }

    /* ------------------------------------------ */
    try {

        /* -------------------------------------- */
        /* 查询(SELECT) 语句执行成功后提取数据到数组(Array) */
        $Rtn_Array = array();

        /* -------------------------------------- */
        /* 执行查询语句 */
        $Result = $Inr_PDO->query($Inr_SQL_Statements);
        /* ...................................... */
        /* 返回值是一个嵌套数组, 每一行为一个数组 (键为行号, 值为行的数组), 每一行里面又包含每个 "字段=>值" 的数组 (键为字段，值为字段的值) */
        $Data = $Result->fetchAll(PDO::FETCH_ASSOC);
        /* ...................................... */
        foreach ($Data as $Num => $Line) {
            //echo "This is The ".$Num." Line.";
            foreach ($Line as $Field => $Value) {
                /*
                 * PHP 数组(Array) 添加元素示例:
                 * $array = array(1, 2, 3);                 // -> 声明 数组(Array) 并赋值 1, 2, 3。
                 * array_push($array, 4);                   // -> 向 数组(Array) 添加单个元素。
                 * array_push($array, 5, 6);                // -> 向 数组(Array) 添加多个元素。
                 * $array[] = 4;                            // -> 将 4 添加到 数组(Array) 末尾。
                 * $array[0] = 0;                           // -> 将 0 添加到 数组(Array) 指定下标位置。
                 * $newArray = array(4);                    // -> 声明一个新的 数组(Array) 并赋值 4。
                 * $array = array_merge($array, $newArray); // -> 使用 array_merge() 函数将包含新元素的 数组(Array) 合并到原 数组(Array) 末尾。
                 * array_splice($array, 1, 0, $newArray);   // -> 使用 array_splice() 函数将包含新元素的 数组(Array) 插入到指定下标位置。
                 */
                array_push($Rtn_Array, $Value);
            }
        }
        /* ...................................... */
        return $Rtn_Array;
    } catch (PDOException $e) {

        /* MySQL 查询失败时显示错误信息 */
        die ("[Caution] Database Query Error: ".$e->getMessage()."<br>");
    }
}

附 PHP 输出 表格行(Table Row) 函数定义代码:

/*
 * Create By GF 2024-03-29
 */

/* 数组(Array) 操作函数 - 对 1D Array 中的数字求和 */
function Func_Numeric_in_1D_Array_Sum($Arg_1D_Array) {

    $Inr_1D_Array = $Arg_1D_Array;
    
    /* ------------------------------------------ */
    /* 获取 1 维 数组(Array) 的长度 */
    $Inr_1D_Array_Length = count($Inr_1D_Array);
    
    /* ------------------------------------------ */
    if ($Inr_1D_Array_Length == 0) {
        
        return NULL;
    } else {

        $Calc_Sum = 0;
        
        /* -------------------------------------- */
        for($i=0; $i < $Inr_1D_Array_Length; $i++)
            if (is_numeric($Inr_1D_Array[$i]) == true)
                $Calc_Sum += $Inr_1D_Array[$i];
        
        /* -------------------------------------- */
        return $Calc_Sum;
    }
}

/* 数组(Array) 操作函数 - 对 1D Array 中的数字求平均 */
function Func_Numeric_in_1D_Array_Avg($Arg_1D_Array) {
    
    $Inr_1D_Array = $Arg_1D_Array;
    
    /* ------------------------------------------ */
    /* 获取 1 维 数组(Array) 的长度 */
    $Inr_1D_Array_Length = count($Inr_1D_Array);
    
    /* ------------------------------------------ */
    if ($Inr_1D_Array_Length == 0) {
        
        return NULL;
    } else {
        
        $Calc_Sum = 0;
        $Calc_Count = 0;
        
        /* -------------------------------------- */
        for($i=0; $i < $Inr_1D_Array_Length; $i++) {
            if (is_numeric($Inr_1D_Array[$i]) == true) {
                $Calc_Sum += $Inr_1D_Array[$i];
                $Calc_Count += 1;
            }
        }

        /* -------------------------------------- */
        /* 计算平均值: 平均值 = 总和 / 数量 */
        $Calc_Avg = $Calc_Sum / $Calc_Count;
        
        /* -------------------------------------- */
        return $Calc_Avg;
    }
}

/* 生成 HTML 函数 - 读取 1D Array 到 HTML 表格表头(Table Header) */
function Func_Read_1D_Array_to_HTML_Table_Header($Arg_1D_Array, $Arg_DIY_Head_of_Row=NULL, $Arg_DIY_Tail_of_Row=NULL, $Arg_Decimal_Places=2) {

    $Inr_1D_Array = $Arg_1D_Array;
    
    /* ------------------------------------------ */
    /* 自定义(DIY) 行头(Head of Row) */
    if ($Arg_DIY_Head_of_Row != NULL) $Inr_1D_Array = array_merge(array($Arg_DIY_Head_of_Row), $Inr_1D_Array);
    
    /* ------------------------------------------ */
    /* 自定义(DIY) 行尾(Tail of Row) */
    if (strtoupper($Arg_DIY_Tail_of_Row) == "SUM") {
        array_push($Inr_1D_Array, Func_Numeric_in_1D_Array_Sum($Inr_1D_Array));
    } else if (strtoupper($Arg_DIY_Tail_of_Row) == "AVG") {
        array_push($Inr_1D_Array, Func_Numeric_in_1D_Array_Avg($Inr_1D_Array));
    } else if ($Arg_DIY_Tail_of_Row != NULL) {
        array_push($Inr_1D_Array, $Arg_DIY_Tail_of_Row);
    }

    /* ------------------------------------------ */
    /* 获取 1 维 数组(Array) 的长度 */
    $Inr_1D_Array_Length = count($Inr_1D_Array);
    
    /* ------------------------------------------ */
    /* 对 数组(Array) 中数字的小数位数进行重置 */
    if ($Arg_Decimal_Places != NULL && is_numeric($Arg_Decimal_Places) == true)
        for($i=0; $i < $Inr_1D_Array_Length; $i++) if (is_numeric($Inr_1D_Array[$i]) == true)
            $Inr_1D_Array[$i] = sprintf("%.".$Arg_Decimal_Places."f", $Inr_1D_Array[$i]);

    /* ------------------------------------------ */
    /* 判断 1 维 数组(Array) 的长度 (是否有数据) */
    if ($Inr_1D_Array_Length < 1) {
        
        /* -------------------------------------- */
        /* 如果 1 维 数组(Array) 的长度为 0 (没有数据) */
        echo "<div class=\"table-container\">";
        echo "    <table class=\"table-style\" border=\"1\" align=\"left\" cellpadding=\"10\" cellspacing=\"0\">";
        echo "        <tr>";
        echo "            <th>[Caution] Function ( Func_Read_1D_Array_to_HTML_Table_Row ) Value of 1D Array Error: No Data Available.</th>";
        echo "        </tr>";
        echo "    </table>";
        echo "</div>";
    } else {
        
        /* -------------------------------------- */
        /* 如果 1 维 数组(Array) 的长度大于 0 (有数据) */
        echo "<tr>";
        for($i=0; $i < $Inr_1D_Array_Length; $i++) {
            
            echo "<th>".$Inr_1D_Array[$i]."</th>";
        }
        echo "</tr>";
    }
}

/* 生成 HTML 函数 - 读取 1D Array 到 HTML 表格行(Table Row) */
function Func_Read_1D_Array_to_HTML_Table_Row($Arg_1D_Array, $Arg_DIY_Head_of_Row=NULL, $Arg_DIY_Tail_of_Row=NULL, $Arg_Decimal_Places=2) {
    
    $Inr_1D_Array = $Arg_1D_Array;
    
    /* ------------------------------------------ */
    /* 自定义(DIY) 行头(Head of Row) */
    if ($Arg_DIY_Head_of_Row != NULL) $Inr_1D_Array = array_merge(array($Arg_DIY_Head_of_Row), $Inr_1D_Array);
    
    /* ------------------------------------------ */
    /* 自定义(DIY) 行尾(Tail of Row) */
    if (strtoupper($Arg_DIY_Tail_of_Row) == "SUM") {
        array_push($Inr_1D_Array, Func_Numeric_in_1D_Array_Sum($Inr_1D_Array));
    } else if (strtoupper($Arg_DIY_Tail_of_Row) == "AVG") {
        array_push($Inr_1D_Array, Func_Numeric_in_1D_Array_Avg($Inr_1D_Array));
    } else if ($Arg_DIY_Tail_of_Row != NULL) {
        array_push($Inr_1D_Array, $Arg_DIY_Tail_of_Row);
    }
    
    /* ------------------------------------------ */
    /* 获取 1 维 数组(Array) 的长度 */
    $Inr_1D_Array_Length = count($Inr_1D_Array);
    
    /* ------------------------------------------ */
    /* 对 数组(Array) 中数字的小数位数进行重置 */
    if ($Arg_Decimal_Places != NULL && is_numeric($Arg_Decimal_Places) == true)
        for($i=0; $i < $Inr_1D_Array_Length; $i++) if (is_numeric($Inr_1D_Array[$i]) == true)
            $Inr_1D_Array[$i] = sprintf("%.".$Arg_Decimal_Places."f", $Inr_1D_Array[$i]);
    
    /* ------------------------------------------ */
    /* 判断 1 维 数组(Array) 的长度 (是否有数据) */
    if ($Inr_1D_Array_Length < 1) {
        
        /* -------------------------------------- */
        /* 如果 1 维 数组(Array) 的长度为 0 (没有数据) */
        echo "<div class=\"table-container\">";
        echo "    <table class=\"table-style\" border=\"1\" align=\"left\" cellpadding=\"10\" cellspacing=\"0\">";
        echo "        <tr>";
        echo "            <td>[Caution] Function ( Func_Read_1D_Array_to_HTML_Table_Row ) Value of 1D Array Error: No Data Available.</td>";
        echo "        </tr>";
        echo "    </table>";
        echo "</div>";
    } else {
        
        /* -------------------------------------- */
        /* 如果 1 维 数组(Array) 的长度大于 0 (有数据) */
        echo "<tr>";
        for($i=0; $i < $Inr_1D_Array_Length; $i++) {
                
            echo "<td align=\"center\">".$Inr_1D_Array[$i]."</td>";
        }
        echo "</tr>";
    }
}

使用 CSS 对 HTML 进行样式设计 - 调整字体颜色

层叠样式表 (英文全称: Cascading Style Sheets) 是一种用来表现 HTML (标准通用标记语言的一个应用) 或 XML(标准通用标记语言的一个子集) 等文件样式的计算机语言。

CSS 不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化。

以 “需求(4): 能够对每日低于三省平均积分抵现金额的省份进行预警” 为例, 利用 CSS 指定 HTML 标记样式, 更改字体颜色。

本例为了方便演示, 并且可以很直观看出, 四川 这个省份每个日期的数据都是明显低于三个省份的平均值的, 我们直接让 四川 这个省份的数据以 红色字体 显示, 以达到预警的效果。

步骤(1):

修改包含有 四川 数据的 表格行(Table Row) 的单元格中给 HTML 标签加上 类(Class) 属性。

(即在包含有 四川 数据的 <tr> 标签中的所有 <td> 标签加上 class 属性)

在 <td> 标签中添加 class="alarm" 属性:

<!-- 表格行标签 -->
<tr>
    <!-- 表格单元格标签 -->
    <td class="alarm" align="center">四川</td>
    <td class="alarm" align="center">111831</td>
    <td class="alarm" align="center">91333</td>
    <td class="alarm" align="center">84645</td>
    <td class="alarm" align="center">85928</td>
    <td class="alarm" align="center">119526</td>
    <td class="alarm" align="center">169005</td>
    <td class="alarm" align="center">143583</td>
    <td class="alarm" align="center">297034</td>
    <td class="alarm" align="center">1102885</td>
</tr>

步骤(2):

在 HTML 文档的 <head> 部分, 使用 <style> 标签来包含 CSS 代码 (内部样式表)。

通过 .alarm 来选择 alarm 类, 并在其后的 {} 内指定 color: #FF0000; 或者 color: red; 来将字体改成红色 (清除浏览器缓存后可见效果)。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .alarm {
            /* 指定 alarm 类的字体颜色为红色 */
            color: #FF0000;
        }
    </style>
</head>
<body>
<!-- 表格标签 -->
        <table class="table-style" border="1" align="left" cellpadding="10" cellspacing="0">
            <!-- 表格标题标签 -->
            <caption><b>XX集团各省由近到远(日期)的每日积分抵现合计金额</b></caption>
            <!-- 表格行标签 -->
            <tr>
                <!-- 表格单元格标签 -->
                <td class="alarm" align="center">四川</td>
                <td class="alarm" align="center">111831</td>
                <td class="alarm" align="center">91333</td>
                <td class="alarm" align="center">84645</td>
                <td class="alarm" align="center">85928</td>
                <td class="alarm" align="center">119526</td>
                <td class="alarm" align="center">169005</td>
                <td class="alarm" align="center">143583</td>
                <td class="alarm" align="center">297034</td>
                <td class="alarm" align="center">1102885</td>
            </tr>
        </table>
</body>
</html>

效果如下:

图14

总结

以上就是关于 Web实例 报表开发01-基于HTML进行报表呈现 的全部内容。

更多内容可以访问我的代码仓库:

https://gitee.com/goufeng928/public

https://github.com/goufeng928/public

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1562166.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

蓝桥杯-穿越雷区

蓝桥杯-穿越雷区

题目要求 需求&#xff1a;从一个方格中A点&#xff0c;按要求移动到B点。 要求&#xff1a;每次只能走上下左右&#xff0c;每次只能走一次&#xff0c;每次是轮换穿越’‘,’-两个&#xff0c;否则就会能量失衡&#xff0c;发生爆炸。 使用的算法&#xff1a;这题典型的就是使…
阅读更多...
6款Mac垃圾清理软件横评 Mac电脑清理软件哪个好 cleanmymac评测

6款Mac垃圾清理软件横评 Mac电脑清理软件哪个好 cleanmymac评测

鉴于苹果笔记本昂贵的硬盘价格&#xff0c;导致我们不得不定期清理自己的硬盘空间&#xff0c;释放给真正有用的各种程序等。 即便我们把程序安装到外置硬盘&#xff0c;但是程序运行时的缓存&#xff0c;仍然是在内置的硬盘中。 今天就让我们对比看看&#xff0c;目前市面上…
阅读更多...
Linux如何连接github仓库

Linux如何连接github仓库

一.创建一个github账号 如何创建一个github账号 二.在github上创建一个仓库 登录上github后出现这个界面 然后点击左上角头像&#xff0c;在按照图片位置点击&#xff1a; 继续按照图片上的位置进行点击&#xff1a; 创建成功&#xff1a; 三.云主机连接Github仓库 1.在linux中…
阅读更多...
openstack云计算（二）——使用Packstack安装器安装一体化OpenStack云平台

openstack云计算（二）——使用Packstack安装器安装一体化OpenStack云平台

初步掌握OpenStack快捷安装的方法。掌握OpenStack图形界面的基本操作。 一【准备阶段】 &#xff08;1&#xff09;准备一台能够安装OpenStack的实验用计算机&#xff0c;建议使用VMware虚拟机。 &#xff08;2&#xff09;该计算机应安装CentOS 7&#xff0c;建议采用CentO…
阅读更多...
探究云手机的海外原生IP优势

探究云手机的海外原生IP优势

随着全球数字化进程的加速&#xff0c;企业越来越依赖于网络来扩展其业务。在这个数字时代&#xff0c;云手机作为一种创新的通信技术&#xff0c;已经成为了企业网络优化的重要组成部分。云手机支持海外原生IP的特性&#xff0c;为企业在国际市场上的拓展提供了全新的可能性。…
阅读更多...
基础布局之LinearLayout线性布局

基础布局之LinearLayout线性布局

目录 一、基础属性二、重点属性2.1 weight(权重)属性&#xff1a;2.2 gravity 一、基础属性 LinearLayout默认方向是水平排放 属性作用android:id控件的ID&#xff0c;可以通过这个ID号来找到对应的控件android:layout_width控件的宽度android:layout_height控件的高度androi…
阅读更多...
解析Apache Kafka：在大数据体系中的基本概念和核心组件

解析Apache Kafka：在大数据体系中的基本概念和核心组件

关联阅读博客文章&#xff1a;探讨在大数据体系中API的通信机制与工作原理 关联阅读博客文章&#xff1a;深入解析大数据体系中的ETL工作原理及常见组件 关联阅读博客文章&#xff1a;深度剖析&#xff1a;计算机集群在大数据体系中的关键角色和技术要点 关联阅读博客文章&a…
阅读更多...
大数据系列 | Kafka架构分析及应用

大数据系列 | Kafka架构分析及应用

大数据系列 | Kafka架构分析及应用 1. Kafka原理分析2. Kafka架构分析3. Kafka的应用3.1. 安装Zookeeper集群3.2. 安装Kafka集群3.3. 生产者和消费者使用3.3.1. 生产者使用3.3.1. 消费者使用 4. Kafka Controller控制器 1. Kafka原理分析 Kafka是一个高吞吐量、 持久性的分布式…
阅读更多...
vue项目打包优化之-productionSourceMap设置

vue项目打包优化之-productionSourceMap设置

productionSourceMap 是一个用于配置生产环境下是否生成 source map 文件的选项。在 webpack 中&#xff0c;source map 文件是一种映射关系文件&#xff0c;可以将编译后的代码映射回原始源代码&#xff0c;方便开发者在调试时定位问题。 在生产环境中&#xff0c;通常不建议暴…
阅读更多...
海康摄像头插件嵌入iframe时视频播放插件位置问题

海康摄像头插件嵌入iframe时视频播放插件位置问题

参考&#xff1a;https://juejin.cn/post/6857670423971758094 原因&#xff1a;没有按照iframe相对位置计算视频插件位置。 解决&#xff1a; $(window).on(resize, resize);function resize(){// 解决iframe中嵌入海康插件初始化问题:// 1. 获取iframe相比于窗口的偏移量;c…
阅读更多...
单V及多V感知在自动驾驶在恶劣环境条件下的感知提升方案

单V及多V感知在自动驾驶在恶劣环境条件下的感知提升方案

单V及多V感知在自动驾驶在恶劣环境条件下的感知提升方案 附赠自动驾驶学习资料和量产经验&#xff1a;链接 自动驾驶中的视觉感知是车辆在不同交通条件下安全、可持续地行驶的关键部分。然而&#xff0c;在大雨和雾霾等恶劣天气下&#xff0c;视觉感知性能受到多种降级效应的极…
阅读更多...
2021-08-06

2021-08-06

yarn的简介&#xff1a; Yarn是facebook发布的一款取代npm的包管理工具。 yarn的特点&#xff1a; 速度超快。 Yarn 缓存了每个下载过的包&#xff0c;所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率&#xff0c;因此安装速度更快。超级安全。 在执行代码…
阅读更多...
适用于智能断路器、新能源汽车充电枪锁、电动玩具、电磁门锁等的直流电机驱动芯片D6289ADA介绍

适用于智能断路器、新能源汽车充电枪锁、电动玩具、电磁门锁等的直流电机驱动芯片D6289ADA介绍

应用领域 适用于智能断路器&#xff08;家用或工业智能空开&#xff09;、新能源汽车充电枪锁、电动玩具、电磁门锁、自动阀门等的直流电机驱动。 功能介绍 D6289ADA是一款直流马达驱动芯片&#xff0c;它有两个逻辑输入端子用来控制电机前进、后退及制动。该电路具有良好的抗干…
阅读更多...
Qt 实现简易的视频播放器，功能选择视频，播放，暂停，前进，后退，进度条拖拉，视频时长显示

Qt 实现简易的视频播放器，功能选择视频，播放，暂停，前进，后退，进度条拖拉，视频时长显示

1.效果图 2.代码实现 2.1 .pro文件 QT core gui multimedia multimediawidgets 2.2 .h文件 #ifndef VIDEOPLAYING_H #define VIDEOPLAYING_H#include <QWidget> #include<QFileDialog>#include<QMediaPlayer> #include<QMediaRecorder> #in…
阅读更多...
数据分析之Tebleau可视化：折线图、饼图、环形图

数据分析之Tebleau可视化：折线图、饼图、环形图

1.折线图的绘制 方法一&#xff1a; 拖入订单日期和销售金额&#xff0c;自动生成一个折线图 方法二&#xff1a; 选中订单日期和销售金额&#xff08;摁住ctrl可以选择多个纬度&#xff09; 点击右边的智能推荐&#xff0c;选择折线图 2.双线图的绘制、双轴的设置 方法一&…
阅读更多...
手机一键换ip地址，解锁网络自由

手机一键换ip地址，解锁网络自由

在数字化时代&#xff0c;手机已经成为我们生活中不可或缺的一部分。随着移动互联网的快速发展&#xff0c;手机用户对于网络安全和隐私保护的需求也日益增强。其中&#xff0c;IP地址作为手机在网络中的标识&#xff0c;扮演着重要的角色。有时&#xff0c;出于隐私保护或网络…
阅读更多...
HTTPS 如何优化？（计算机网络）

HTTPS 如何优化？（计算机网络）

硬件优化 因为 HTTPS 是属于计算密集型&#xff0c;应该选择计算力更强的 CPU&#xff0c;而且最好选择支持 AES-NI 特性的 CPU&#xff0c;这个特性可以在硬件级别优化 AES 对称加密算法&#xff0c;加快应用数据的加解密。 软件优化 如果可以&#xff0c;把软件升级成较新的版…
阅读更多...
Scala第十五章节(递归的相关概述、Scala阶乘案例、Scala斐波那契数列案例、Scala打印目录文件案例)

Scala第十五章节(递归的相关概述、Scala阶乘案例、Scala斐波那契数列案例、Scala打印目录文件案例)

章节目标 了解递归的相关概述掌握阶乘案例掌握斐波那契数列案例掌握打印目录文件案例 1. 递归 递归指的就是 方法自己调用自己的情况 . 在涉及到复杂操作时, 我们会经常用到它. 在使用递归时, 要注意以下三点: 递归必须有出口, 否则容易造成 死递归 .递归必须要有规律.构造…
阅读更多...
网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

内容目录 一、详细介绍二、效果展示2.效果图展示 三、学习资料下载 一、详细介绍 我们都知道微信小程序是无法直接打开网址的。 这个小程序源码提供了一种将网址直接打包成微信小程序的方法&#xff0c; 使得用户可以在微信小程序中直接访问这些网址内容。 这个源码没有进行加…
阅读更多...
如何评估基于指令微调的视觉语言模型的各项能力-MMBench论文解读

如何评估基于指令微调的视觉语言模型的各项能力-MMBench论文解读

1. 传统基准的固有局限 VQAv2：视觉问题回答数据集，主要用于评估视觉理解与推理能力。COCO Caption：图像描述生成数据集，用于评估模型对图像内容的理解与描述能力。GQA：结合常识的视觉问题回答数据集。OK-VQA：需要外部知识的视觉问题回答数据集。TextVQA：图像中包含文本的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023