动态切换 web 报表中的统计图类型

简介: 统计图在浏览器端展现时,不同的使用人员对图形的展现形式会有不同的要求,有的需要柱形图、有的想看折线图等,报表支持用户在浏览器端动态的选择统计图类型,关注乾学院,查看具体实现方法<a href="http://c.raqsoft.com.cn/article/1542008169051?r=IBelieve" target="_blank" rel="nofollow">动态切换 web 报表中的统计图类型</a> 作者:gxy 链接:http://c.raqsoft.com.cn/article/1542008169051 来源:乾学院 著作权归作者所有。

需求:
报表以图形方式,也就是我们常说的“图表”形式展示时,不同的用户对图形类型有不同的要求,希望能够动态切换统计图类型,例如实现柱形图、条形图、折线图等图形间的动态切换。
思路:
常见的做法是在报表中多个单元格中生成不同的统计图,然后通过参数动态隐藏行来实现图形类型切换,但此种方法需要制作大量的图形图表,工作量较大,而且大量隐藏单元格会耗用内存,在性能上也有一定影响。
当然,肯定还会有别的方式……我们在制作统计图时会发现,绝大多数统计图设置方式基本类似,只需要设置分类轴、系列即可生成统计图。而生成的统计图是通过单元格表达式中的 graph() 函数实现的,参考该函数的帮助文档发现,该函数可以传入一个整型参数来控制统计图类型,这样我们就可以通过该参数实现统计图类型间的动态切换。下面,我们具体介绍下该种方式的实现。
一:制作统计表
以订单表为例,按货主地区统计订单数量,报表设计界面如下:
11

二:增加统计图
A3、B3 单元格合并,并更改该行高度,在 A3 中设置统计图:
12

统计图类型可任选,分类轴以及系列中设置相应表达式 ,点击确定即可。这样该单元格就生成了一个柱形图。
三:动态更改类型
报表中增加一个整数型参数:type,用于控制统计图类型,默认值设成 7 表示默认图形类型是柱形图:
13

将 A3 单元格的值表达式更改成 graph(type)
这样预览报表给该参数传递不同的值该单元格就能展示不同的图形类型。
四:页面端控制
报表制作好后,可在页面端增加一个参数表单进行动态控制。如果用户只需要看图形,可将报表的前两行设置隐藏,然后将没用的行列删除,将报表保存为为 tu.rpx,并增加参数表单报表,设置如下:
14

C1 单元格变量名属性设置成:type,C1 可做为下拉框供用户选择,值如下:
15

将报表保存为 tu_arg.rpx,在浏览器端访问 tu.rpx,更改参数点击查询即可,如选择折线图:
16

选择柱形图:
17

附:各图形类型对照关系:
1:区域图
2:条形图
3:三维条形图
4:三维簇状条形图
5:堆积条形图
6:三维堆积条形图
7:柱形图
8:三维柱形图
9:三维簇状柱形图
10:堆积柱形图
11:三维堆积柱形图
12:折线图
13:饼型图
14:散列图
15:三维区域图
16:三维折线图
17:三维饼型图
18:时序状态图
19:时间走势图
20:双轴折线图
21:双轴柱线图
22:雷达图
23:甘特图
24:仪表盘
25:里程碑

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

目录
相关文章
|
6月前
|
SQL 分布式计算 Hadoop
Azkaban【基础 01】核心概念+特点+Web界面+架构+Job类型(一篇即可入门Azkaban工作流调度系统)
【2月更文挑战第6天】Azkaban【基础 01】核心概念+特点+Web界面+架构+Job类型(一篇即可入门Azkaban工作流调度系统)
405 0
|
25天前
|
SQL 安全 PHP
PHP 自发布以来一直在 Web 开发领域占据重要地位,PHP 8 更是带来了属性、刚性类型等新特性。
【10月更文挑战第1天】PHP 自问世以来,凭借其易用性和灵活性,在 Web 开发领域迅速崛起。从简单的网页脚本语言逐步演进为支持面向对象编程的现代语言,尤其自 PHP 5.3 引入命名空间后,代码组织和维护变得更加高效。PHP 7 的性能优化和 PHP 8 的新特性(如属性和刚性类型)进一步巩固了其地位。框架如 Laravel、Symfony、Yii2 和 CodeIgniter 等简化了开发流程,提高了效率和安全性。
38 2
|
1月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
5月前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
200 18
|
4月前
|
搜索推荐 UED Python
动态多条件查询:理解`filter_by`与`filter`提升Web应用搜索功能
通过深入理解filter_by与filter的异同,并结合使用它们,我们可以构建一个既灵活又强大的动态多条件查询系统。这不仅提升了Web应用的搜索功能,也为用户提供了更加个性化的搜索体验。希望本文能够启发你在自己项目中实现类似的功能,以满足用户多变的搜索需求。
|
4月前
|
搜索推荐 UED Python
动态多条件查询:理解`filter_by`与`filter`提升Web应用搜索功能
了解SQLAlchemy中`filter_by`与`filter`对提升Web应用搜索功能至关重要。`filter_by`简化了等值查询,而`filter`则支持复杂的表达式和逻辑组合。通过动态获取用户输入,构建基础查询并根据条件应用过滤,可以创建灵活的搜索系统。结合分页和排序,为用户提供定制化搜索体验。掌握这两者,能增强应用的交互性和实用性。
70 0
动态多条件查询:理解`filter_by`与`filter`提升Web应用搜索功能
|
6月前
|
前端开发 JavaScript 索引
【Web 前端】JS的几种具体异常类型(报错)
【4月更文挑战第22天】【Web 前端】JS的几种具体异常类型(报错)
|
6月前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
6月前
|
JavaScript Docker 容器
vue打Docker镜像动态获取IP-nginx做的web服务
vue打Docker镜像动态获取IP-nginx做的web服务
53 0
|
6月前
|
前端开发 JavaScript 关系型数据库
.NET开源、强大的Web报表统计系统
.NET开源、强大的Web报表统计系统
150 0