关于报表在移动端展现你需要知道哪些?

简介: 关于报表在移动端展现你需要知道哪些?

在各企业中或者电商平台的商家,业务方,每天都有大量的人需要在线查看大量的指标,用于监控、分析关键业务数据的发展趋势。同时,又有着能够随时随地,方便快捷的查看分析数据的诉求。我们习惯于,使用润乾报表在 PC 端或大屏中展现,但是你知道吗?润乾报表 V2018 是以 HTML5 方式输出,不仅支持在 PC 端展现,也支持在手机端展现,并且在手机端展现时可以在手机端自适应。
1

手机报表已有功能

目前我们提供的手机报表 APP 示例的功能有:钻取、填报表、参数查询、统计图,自适应,长按电话号码拨打电话、扫码、分享报表到微信或 QQ 的功能。
注:长按电话号码拨打电话、扫码、分享的功能是在手机 APP 中有效,只有部分浏览器支持这个功能。

自适应方式

设计器安装目录 reportJsp 目录下提供了 matchReport.jsp, 在这个页面中是通过 reportMatchSize 这个自适应 js 函数实现的自适应功能。
2

js 函数用法说明如下:
reportMatchSize(rongqi, reportdiv, mode)
参数说明:
rongqi 页面中的 html 容器元素 (如 div,td 等),报表将按此容器的尺寸进行匹配适应。
reportdiv 报表所在的 div 对象。
mode 自适应方式,有以下 8 种取值:
0 按设计尺寸展现,不用适应容器。
1 始终用报表宽度适应容器宽度,报表高度同比例缩放
2 始终用报表高度适应容器高度,报表宽度同比例缩放
3 竖屏时,相当于 mode=2;横屏时,相当于 mode=1
4 竖屏时,相当于 mode=1;横屏时,相当于 mode=2
5 竖屏时,报表高和宽均分别适应容器的高和宽;横屏时,不需适应容器
6 竖屏时,不需适应容器;横屏时,报表高和宽均分别适应容器的高和宽
7 报表高和宽均分别适应容器的高和宽
函数功能:让 reportdiv 按照实际尺寸以指定的适应方式与容器 rongqi 的尺寸相匹配适应
说明:自适应功能不适合用于固定表头的报表和折叠报表,也可以在自己写的报表展现页面中添加 reportMatchSize 这个 js 方法实现自适应功能。

实例

设计器下 reportFiles 目录下的 mobile 目录中有一张名为 phone_1.rpx,该报表如果想在手机端按高宽自适应的话,调用该报表的 url 应该为:http://192.168.0.229:6868/demo/reportJsp/matchReport.jsp?rpx=/mobile/phone_1.rpx&match=7,其中 match=7。
下面是该报表在手机端浏览器显示的效果:
3

  设计器下 reportFiles 目录下的 mobile 目录中有一张名为 match.rpx,该报表如果想在手机端竖屏的时候按高自适应,横屏的时候按宽自适应的话,调用该报表的 url 应该为:http://192.168.0.229:6868/demo/reportJsp/matchReport.jsp?rpx=/mobile/match.rpx&match=3,其中 match=3。
下面是该报表在手机端浏览器显示的效果:
4
5

关于手机客户端 APP 说明

一般有手机报表需求的客户,都有自己的 APP,所以润乾提供的 APP 也只是让客户能快速了解润乾报表手机端展现的效果而已,不作为最终提供给客户使用的手机客户端程序。
润乾报表手机端演示的 APP 下载地址:
链接:https://pan.baidu.com/s/1z59YfHQULJKjJwrU8_1fGg 密码:l7r5
注:该 APP 安装后默认访问的是润乾官网的手机报表http://report5.raqsoft.com.cn/mobile, 如果需要使用该客户端访问自己的手机报表需要在手机中的 raqsoft 目录中添加 url.cfg 文件,该文件中内容就是要访问的手机报表的 url(如:http://192.168.0.56:6868/demo/mobile/index.jsp

移动端展现数据的报表特点

  1. 简单数据(避繁就简)
    如 iphone 自带应用健康中,提供的统计数据,我们可以选择相应的日期,就能显示出该日期的 3 个指标数据。
  2. 从汇总到明细,有层次结构(钻取)
    6
  3. 数字与图表联动
    在上方点击对应的月份,下方就会以统计数据的列表和图表将信息显示。

7

看了以上在移动端展现的报表形式,我们不难发现由于移动端的屏幕空间有限,统计图,列表的布局多是上下的,我们在报表设计器下设计的 PC 端展现的报表布局是固定的,不是那种流式布局的,所以,我们要在手机端展现和 PC 端同类的数据时还要制作出对应更适合移动端的报表才好,否则直接拿一个很宽很大的报表让报表在手机端横屏自适应,展现的也不尽如人意的

作者:shiguang
链接:http://c.raqsoft.com.cn/article/1539050767973?r=IBelieve
来源:乾学院
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

目录
相关文章
|
网络协议 JavaScript Java
2-TDengine客户端连接,RESTful,JDBC
2-TDengine客户端连接,RESTful,JDBC
3467 0
2-TDengine客户端连接,RESTful,JDBC
|
6月前
|
存储 SQL 关系型数据库
拉卡拉 x Apache Doris:统一金融场景 OLAP 引擎,查询提速 15 倍,资源直降 52%
拉卡拉早期基于 Lambda 架构构建数据系统面临存储成本高、实时写入性能差、复杂查询耗时久、组件维护复杂等问题。为此,拉卡拉选择使用 Apache Doris 替换 Elasticsearch、Hive、Hbase、TiDB、Oracle / MySQL 等组件,实现了 OLAP 引擎的统一、查询性能提升 15 倍、资源减少 52% 的显著成效。
212 6
拉卡拉 x Apache Doris:统一金融场景 OLAP 引擎,查询提速 15 倍,资源直降 52%
|
9月前
|
关系型数据库 MySQL 数据库连接
数据库连接工具连接mysql提示:“Host ‘172.23.0.1‘ is not allowed to connect to this MySQL server“
docker-compose部署mysql8服务后,连接时提示不允许连接问题解决
|
12月前
|
机器学习/深度学习 人工智能 自然语言处理
NVIDIA Triton系列13-用 FasterTransformer 和 Triton 加速大型 Transformer 模型的推理
本文介绍了 NVIDIA FasterTransformer 库及其在加速大型 Transformer 模型推理中的应用。FasterTransformer 是一个高效、可扩展的库,支持分布式多 GPU 推理,特别适合处理具有数万亿参数的模型。文章还详细讲解了如何使用 FasterTransformer 和 NVIDIA Triton 推理服务器优化 GPT-J 和 T5 模型的推理性能,包括张量并行、流水线并行等技术。
406 0
NVIDIA Triton系列13-用 FasterTransformer 和 Triton 加速大型 Transformer 模型的推理
|
8月前
|
存储 XML 图形学
Unity保存数据
在Unity中保存场景数据涉及数据收集、序列化和存储。数据收集包括游戏对象的基本信息(如位置、旋转、缩放、名称和标签)及组件数据(如渲染、物理和自定义脚本组件)。接着,通过序列化将数据转换为可存储格式。示例代码展示了如何使用XML保存场景中的游戏对象及其属性。
|
存储 Java UED
如何在Flask应用中实现异步编程?
【2月更文挑战第27天】【2月更文挑战第96篇】如何在Flask应用中实现异步编程?
492 0
|
定位技术
uniapp地图标记点的点击事件
uniapp地图标记点的点击事件
412 2
|
小程序 JavaScript
【微信小程序】表单验证WxValidate.js使用
【微信小程序】表单验证WxValidate.js使用
1369 1
【微信小程序】表单验证WxValidate.js使用
|
移动开发 C语言
编译原理(八) 之 正则表达式
编译原理(八) 之 正则表达式
388 0