报表怎样实现滚动的公告效果?

简介: 报表怎样实现滚动的公告效果

Dashboard 以丰富的动态、可交互的可视化界面为用户提供了更好的数据使用体验,让决策者能够更高效的了解企业的重要信息和细节层次。在 DBD 的各种动态效果中,滚屏是较为常见的一种,例如下图中的数据列表因为布局是固定的,因此就需要滚动显示数据。
1

通常报表中见到的滚屏是因为“页面大、窗口小”,也就是打开的窗口区域容纳不了整个页面的内容,需要靠键盘的方向键或鼠标滚轮来移动查看。而在 DBD 中,为了更好的交互效果,需要滚动自动持续进行,只有当鼠标移到该区域时才暂停。这种方式虽说已经比较常见了,但一般来说报表厂商却并没有直接提供,而是需要通过 jquery,JS 来实现。现在我就给大家介绍一下如何实现这种文字滚屏效果。
我们将在润乾报表设计器自带的“设备故障分析.rpx”基础上实现文字滚屏实例。

  1. 数据集整理
    对于从数据库读取的数据,可以通过集算器,将数据整理成下面截图中的效果。为了方便做效果,这里我直接将 ds2 这个内建数据中的所有字段的值整理到“设备”这个字段中,并且在里面加上了些空格,以便页面上缩进的效果好看些。

2

  1. 合并单元格
    将 G15 列删除,B15—F15 选中,合并。
  2. 单元格数据类型设置为 html
    3

4

  1. 设置单元格表达式,如上图所示。下面是具体的表达式。
    =“”+replace(string@q(ds2.select( 设备)),“,”,“”)+“”

其中:
onmouseover=this.stop() 表示当鼠标以上区域的时候滚动停止;
onmouseout=this.start() 表示当鼠标移开的时候继续滚动。

  1. 调整样式
    原 B15-F15 设置了各行异色,因为我们的文字滚动项作为统一的一串内容,所以按照以上设置,效果感觉会有些突兀,如下图所示。

5

去掉 B15-F15 背景色的设置,这样滚动区域就整体浑然一体。
6

经过以上步骤我们的数据列表就在 DBD 面板中滚动起来了,并且当鼠标指向数据的时候就会停止滚动,鼠标移开的时候就继续滚动了,这样的交互效果无疑会为你的大屏展现锦上添花。
上面这个小例子简单实现了文字滚动显示的效果。下面我具体讲解下看似神奇的标签的各个属性值,相信看过后一定会帮助您实现更好的文字滚动效果:
7

另外,您也可以将 <marquee> 和 </marquee> 之间的内容替换成图像或其它对象。
怎么样,是不是您已经在摩拳擦掌跃跃欲试了?别犹豫,让我们一起来丰富 Dashboard 效果,让页面效果动起来吧!

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

目录
相关文章
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
340 0
|
5月前
|
数据可视化 大数据
Axure制作可视化大屏动态滚动列表教程
本文详细介绍了如何使用Axure制作动态滚动列表展示模块。首先,通过创建新项目和设置中继器列来准备数据;接着,设计列表项样式并添加示例数据。然后,利用动态面板实现列表的滚动效果,包括设置内部和外部面板交互逻辑。最后,预览调试以确保效果满意。此模块适用于可视化大屏,可根据需求调整样式与参数,达到理想展示效果。文中还提供了相关教程链接,助力Axure原型设计。
1130 137
|
12月前
|
存储 消息中间件 NoSQL
Redis 数据结构与对象
【10月更文挑战第15天】在实际应用中,需要根据具体的业务需求和数据特点来选择合适的数据结构,并合理地设计数据模型,以充分发挥 Redis 的优势。
231 64
|
JavaScript 数据可视化
JS如何优雅的实现模块自动滚动展示
【8月更文挑战第22天】JS如何优雅的实现模块自动滚动展示
243 1
JS如何优雅的实现模块自动滚动展示
|
前端开发 JavaScript API
ahooks 3.0 来了!高质量可靠的 React Hooks 库
ahooks 3.0 来了!高质量可靠的 React Hooks 库
1196 0
|
消息中间件 存储 Java
【RabbitMQ四】——RabbitMQ发布订阅模式(Publish/Subscribe)
【RabbitMQ四】——RabbitMQ发布订阅模式(Publish/Subscribe)
703 1
|
机器学习/深度学习 人工智能 安全
装机安全深度解析:从细节入手,筑牢数字世界的防护堤坝
装机安全是计算机使用过程中不可忽视的一环。它关乎到计算机的稳定运行、数据的保护以及个人隐私的维护。为了应对装机过程中的安全挑战,用户需要采取一系列措施来确保计算机的安全性和稳定性。这些措施包括硬件组装的安全措施、系统设置与软件安装的安全策略、数据备份与恢复计划以及安全意识与培训等。同时,用户还可以借鉴一些装机安全的最佳实践来提高计算机的安全性。展望未来,我们可以期待智能化的安全管理系统、更强大的加密技术以及更完善的法律法规为计算机安全提供更有力的保障。让我们从细节入手,共同筑牢数字世界的防护堤坝!
|
设计模式 Java
"深入理解Java设计模式:探索工厂模式的实现与应用
"深入理解Java设计模式:探索工厂模式的实现与应用
|
存储 缓存 前端开发
提高网页加载速度可以从以下几个方面进行优化
【4月更文挑战第25天】提高网页加载速度可以从以下几个方面进行优化
152 5
|
SQL Oracle 容灾
达梦数据库和orcale数据库有何区别
达梦数据库和orcale数据库有何区别
1386 1