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

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 ASWITH Drive_Aggregate_by_Date AS (SELECT日期,SUM(冲抵金额) AS 按日冲抵金额总计,AVG(冲抵金额) AS 按日冲抵金额平均FROMview_xxgroup_2023_zq_gq_points_deductionGROUP BY日期
), Drive_Aggregate_by_Province AS (SELECT省,SUM(冲抵金额) AS 按省冲抵金额总计,AVG(冲抵金额) AS 按省冲抵金额平均FROMview_xxgroup_2023_zq_gq_points_deductionGROUP BY省
), Drive_Aggregate_by_Date_and_Province AS (SELECT日期,省,SUM(冲抵金额) AS 明细冲抵金额总计,AVG(冲抵金额) AS 明细冲抵金额平均FROMview_xxgroup_2023_zq_gq_points_deductionGROUP BY日期,省
), Drive_OLAP_by_Date AS (SELECT日期,按日冲抵金额总计,按日冲抵金额平均,LEAD(按日冲抵金额总计, 1) OVER (ORDER BY 日期 DESC) AS 按日冲抵金额总计上日数据FROMDrive_Aggregate_by_Date
), Drive_OLAP_by_Date_and_Province AS (SELECT日期,省,明细冲抵金额总计,明细冲抵金额平均,LEAD(明细冲抵金额总计, 1) OVER (PARTITION BY 省 ORDER BY 日期 DESC) AS 明细冲抵金额总计上日数据FROMDrive_Aggregate_by_Date_and_Province
), Drive_Join_Table_Part_1 AS (SELECTT1.日期,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 按日增长幅度FROMDrive_OLAP_by_Date_and_Province AS T1 LEFT JOIN Drive_OLAP_by_Date AS T2ONT1.日期 = T2.日期
)SELECTT1.日期,DATE_FORMAT(T1.日期, "%m月%d日") AS 月日,T1.省,T1.明细冲抵金额总计,T1.明细冲抵金额平均,T1.明细增长幅度,T1.按日增长幅度,T1.按日冲抵金额平均,T2.按省冲抵金额平均
FROMDrive_Join_Table_Part_1 AS T1 LEFT JOIN Drive_Aggregate_by_Province AS T2
ONT1.省 = 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.hqwc.cn/news/593192.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Learning To Count Everything

Learning To Count Everything

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;学习数一切东西1、研究背景2、提出方法3、模块详细3.1、多尺度特征提取模块3.2、密度预测模块 4、损失函数5、性能对比6、贡献 二…
阅读更多...
《机器学习算法面试宝典》正式发布！

《机器学习算法面试宝典》正式发布！

大家好&#xff0c;历时半年的梳理和修改&#xff0c;《机器学习算法面试宝典》&#xff08;以下简称《算法面试宝典》&#xff09;终于可以跟大家见面了。 近年来&#xff0c;很多理科专业学生也纷纷转入算法赛道&#xff0c;特别是最近 ChatGPT 的爆火&#xff0c;推动了AI …
阅读更多...
加密软件VMProtect教程：使用脚本-功能

加密软件VMProtect教程：使用脚本-功能

VMProtect是新一代软件保护实用程序。VMProtect支持德尔菲、Borland C Builder、Visual C/C、Visual Basic&#xff08;本机&#xff09;、Virtual Pascal和XCode编译器。 同时&#xff0c;VMProtect有一个内置的反汇编程序&#xff0c;可以与Windows和Mac OS X可执行文件一起…
阅读更多...
http模块 设置资源类型（mime类型）

http模块 设置资源类型（mime类型）

虽然浏览器自带websocket功能它会根据响应回来的内容自动去判断资源类型&#xff0c;但是我们加上了mime类型判断代码会更加规范些 一、mime类型概念&#xff1a; 媒体类型是一种标准&#xff0c;它用来表示文档。文件、字节流的性质和格式。HTTP服务可以设置响应头Content-T…
阅读更多...
「精细化管理」某物业集团精细化管理咨询项目纪实

「精细化管理」某物业集团精细化管理咨询项目纪实

实现工作例行化、定时化、程序化与可视化企业重视绩效考核&#xff0c;却总感觉考核不到点上&#xff1b;企业重视规划职责&#xff0c;却总感觉部门间职责不清&#xff1b;企业重视激励&#xff0c;却总感觉难以真正激励员工。到底是哪里出了问题&#xff1f;华恒智信指出&…
阅读更多...
root@localhost‘s password: Permission denied, please try again.

root@localhost‘s password: Permission denied, please try again.

编辑、etc/ssh/sshd_config文件 ,将PermitRootLogin这行改为yes rootubuntu:/home/ubuntu# vim /etc/ssh/sshd_config 重新加载改文件 /etc/init.d/ssh restart
阅读更多...
LLaMA-Factory微调（sft）ChatGLM3-6B保姆教程

LLaMA-Factory微调（sft）ChatGLM3-6B保姆教程

LLaMA-Factory微调&#xff08;sft&#xff09;ChatGLM3-6B保姆教程 准备 1、下载 下载LLaMA-Factory下载ChatGLM3-6B下载ChatGLM3windows下载CUDA ToolKit 12.1 &#xff08;本人是在windows进行训练的&#xff0c;显卡GTX 1660 Ti&#xff09; CUDA安装完毕后&#xff0c…
阅读更多...
单片机之LED与按键

单片机之LED与按键

目录 LED LED灯亮的原理图 LED灯光闪烁 电路设计 keil文件 LED流水灯的实现 keil文件 单片机之按键 键盘的结构 按键消抖 软件消抖 硬件消抖 键盘的分类 独立式键盘 行列式键盘 键盘的识别 独立按键案例 电路图 keil文件 行列式键盘案例 电路图 对应按键…
阅读更多...
jdbc连SQL server，显示1433端口连接失败解决方法

jdbc连SQL server，显示1433端口连接失败解决方法

Exception in thread "main" com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败。错误:“connect timed out。请验证连接属性。确保 SQL Server 的实例正在主机上运行&#xff0c;且在此端口接受 TCP/IP 连接…
阅读更多...
NASA数据集——1980 年至 2020 年北美 3km分辨率气温（摄氏度）、相对湿度（%）、风速（米/秒）、风向（真北偏角）、总降水量（雨+雪）等数据集

NASA数据集——1980 年至 2020 年北美 3km分辨率气温（摄氏度）、相对湿度（%）、风速（米/秒）、风向（真北偏角）、总降水量（雨+雪）等数据集

Daily SnowModel Outputs Covering the ABoVE Core Domain, 3-km Resolution, 1980-2020 简介 文件修订日期&#xff1a;2023-01-27 数据集版本: 1 摘要 该数据集提供了 1980 年 9 月 1 日至 2020 年 8 月 31 日期间 3 千米网格上的 SnowModel 每日模拟输出&#xff0c;涵…
阅读更多...
ChatGPT 与 OpenAI 的现代生成式 AI（下）

ChatGPT 与 OpenAI 的现代生成式 AI（下）

原文&#xff1a;Modern Generative AI with ChatGPT and OpenAI Models 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 七、通过 ChatGPT 掌握营销技巧 在本章中&#xff0c;我们将重点介绍营销人员如何利用 ChatGPT&#xff0c;在这一领域中查看 ChatGPT 的主要用例…
阅读更多...
VBA字典与数组第十三讲：数组与单一数据间的运算规则

VBA字典与数组第十三讲：数组与单一数据间的运算规则

《VBA数组与字典方案》教程&#xff08;10144533&#xff09;是我推出的第三套教程&#xff0c;目前已经是第二版修订了。这套教程定位于中级&#xff0c;字典是VBA的精华&#xff0c;我要求学员必学。7.1.3.9教程和手册掌握后&#xff0c;可以解决大多数工作中遇到的实际问题。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023