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

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

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

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

报表开发的特点:

报表开发需要合理地进行分类, 至于分类的依据, 可以从样式这方面入手, 让不同样式的报表, 可以条理清晰地表现出工作内容。
报表越多的情况下, 数据库的内容也会随之丰富起来, 因此报表开发应当具备一定的相关结构, 这样才能让数据库显得更连贯。

报表开发的价值:

借助于报表开发, 可以对数据进行细致化处理, 而这个过程中运用到了计算机, 所以效率会比较高, 节省了人力上的成本。
有数据报表的情况下, 结合相关的数据内容, 可以在更好的程度上进行决策分析, 从而让企业获得更具价值魅力的前景。

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

报表开发流程

数据录入 (a. 数据填报, b. 数据清洗, c. 载入SQL数据库)
数据权限 (根据组织架构设计不同账号类型能够涉及到的数据权限)
数据呈现 (a. 按需提取SQL数据库的数据, b. 按需进行数据计算, c. 按需进行数据呈现)
外观设计

本例所处流程: 属于

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 语句:

CREATEORREPLACEVIEW report_xxgroup_2023_zq_gq_points_deduction ASWITH Drive_Aggregate_by_Date AS(SELECT
        日期,SUM(冲抵金额)AS 按日冲抵金额总计,AVG(冲抵金额)AS 按日冲抵金额平均
    FROM
        view_xxgroup_2023_zq_gq_points_deduction
    GROUPBY
        日期
), Drive_Aggregate_by_Province AS(SELECT
        省,SUM(冲抵金额)AS 按省冲抵金额总计,AVG(冲抵金额)AS 按省冲抵金额平均
    FROM
        view_xxgroup_2023_zq_gq_points_deduction
    GROUPBY
        省
), Drive_Aggregate_by_Date_and_Province AS(SELECT
        日期,
        省,SUM(冲抵金额)AS 明细冲抵金额总计,AVG(冲抵金额)AS 明细冲抵金额平均
    FROM
        view_xxgroup_2023_zq_gq_points_deduction
    GROUPBY
        日期,
        省
), Drive_OLAP_by_Date AS(SELECT
        日期,
        按日冲抵金额总计,
        按日冲抵金额平均,
        LEAD(按日冲抵金额总计,1)OVER(ORDERBY 日期 DESC)AS 按日冲抵金额总计上日数据
    FROM
        Drive_Aggregate_by_Date
), Drive_OLAP_by_Date_and_Province AS(SELECT
        日期,
        省,
        明细冲抵金额总计,
        明细冲抵金额平均,
        LEAD(明细冲抵金额总计,1)OVER(PARTITIONBY 省 ORDERBY 日期 DESC)AS 明细冲抵金额总计上日数据
    FROM
        Drive_Aggregate_by_Date_and_Province
), Drive_Join_Table_Part_1 AS(SELECT
        T1.日期,
        T1.省,
        T1.明细冲抵金额总计,
        T1.明细冲抵金额平均,
        T2.按日冲抵金额平均,IF(T1.明细冲抵金额总计上日数据 ISNOTNULL,((T1.明细冲抵金额总计 - T1.明细冲抵金额总计上日数据)/ T1.明细冲抵金额总计上日数据),0.0)AS 明细增长幅度,IF(T2.按日冲抵金额总计上日数据 ISNOTNULL,((T2.按日冲抵金额总计 - T2.按日冲抵金额总计上日数据)/ T2.按日冲抵金额总计上日数据),0.0)AS 按日增长幅度
    FROM
        Drive_OLAP_by_Date_and_Province AS T1 LEFTJOIN 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 LEFTJOIN 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 代码:

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"></head><bodystyle="background-color: #EFF3F5;"><divclass="table-container"><!-- 表格标签 --><tableclass="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><!-- 表格单元格标签 --><tdalign="center">四川</td><tdalign="center">111831</td><tdalign="center">91333</td><tdalign="center">84645</td><tdalign="center">85928</td><tdalign="center">119526</td><tdalign="center">169005</td><tdalign="center">143583</td><tdalign="center">297034</td><tdalign="center">1102885</td></tr><tr><tdalign="center">西安</td><tdalign="center">273485</td><tdalign="center">162851</td><tdalign="center">119523</td><tdalign="center">170458</td><tdalign="center">174650</td><tdalign="center">225007</td><tdalign="center">247525</td><tdalign="center">572872</td><tdalign="center">1946371</td></tr><tr><tdalign="center">云南</td><tdalign="center">229005</td><tdalign="center">150066</td><tdalign="center">139779</td><tdalign="center">146863</td><tdalign="center">174553</td><tdalign="center">296661</td><tdalign="center">217093</td><tdalign="center">398506</td><tdalign="center">1752526</td></tr><tr><tdalign="center"><b>总计</b></td><tdalign="center"><b>614321</b></td><tdalign="center"><b>404250</b></td><tdalign="center"><b>343947</b></td><tdalign="center"><b>403249</b></td><tdalign="center"><b>468729</b></td><tdalign="center"><b>690673</b></td><tdalign="center"><b>608201</b></td><tdalign="center"><b>1268412</b></td><tdalign="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 连接 */functionFunc_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=newPDO($dsn,$Inr_UserName,$Inr_Password);/* ...................................... */return$pdo;}catch(PDOException$e){/* -------------------------------------- *//* MySQL 连接失败时显示错误信息 */die("Database Connection Error: ".$e->getMessage()."<br>");}}/* 执行 MySQL SELECT 语句函数 - 通过 PDO 提取单个字段到 1 维 数组(Array) */functionFunc_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($Dataas$Num=>$Line){//echo "This is The ".$Num." Line.";foreach($Lineas$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 中的数字求和 */functionFunc_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){returnNULL;}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 中的数字求平均 */functionFunc_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){returnNULL;}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) */functionFunc_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));}elseif(strtoupper($Arg_DIY_Tail_of_Row)=="AVG"){array_push($Inr_1D_Array,Func_Numeric_in_1D_Array_Avg($Inr_1D_Array));}elseif($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) */functionFunc_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));}elseif(strtoupper($Arg_DIY_Tail_of_Row)=="AVG"){array_push($Inr_1D_Array,Func_Numeric_in_1D_Array_Avg($Inr_1D_Array));}elseif($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><!-- 表格单元格标签 --><tdclass="alarm"align="center">四川</td><tdclass="alarm"align="center">111831</td><tdclass="alarm"align="center">91333</td><tdclass="alarm"align="center">84645</td><tdclass="alarm"align="center">85928</td><tdclass="alarm"align="center">119526</td><tdclass="alarm"align="center">169005</td><tdclass="alarm"align="center">143583</td><tdclass="alarm"align="center">297034</td><tdclass="alarm"align="center">1102885</td></tr>

步骤(2):

在 HTML 文档的

<head>

部分, 使用

<style>

标签来包含 CSS 代码 (内部样式表)。

通过

.alarm

来选择

alarm 类

, 并在其后的 {} 内指定

color: #FF0000;

或者

color: red;

来将字体改成红色 (清除浏览器缓存后可见效果)。

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

效果如下:

图14

总结

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

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

https://gitee.com/goufeng928/public

https://github.com/goufeng928/public

标签： html 报表开发 php

本文转载自: https://blog.csdn.net/goufeng93/article/details/137214014
版权归原作者 Mostcow 所有，如有侵权，请联系我们删除。

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