控制数据可视化大屏页面自动自适应频率的方法及装置制造方法及图纸

控制数据可视化大屏页面自动自适应频率的装置涉及信息技术领域。本发明专利技术由事件监听器，计时器，页面自适应信号触发器，时间窗口定义器组成。本发明专利技术的控制数据可视化大屏页面自动自适应频率的装置使用事件监听器监听onresize事件，使用时间窗口定义器定义触发页面刷新指令的时间窗口，使用计时器按照时间窗口的时常进行延时计时，使用页面自适应信号触发器来执行页面刷新指令，通过每次触发onresize事件计时器重新计时的方式达到有效控制大屏页面刷新次数的目的，通过时间窗口的设置兼顾了用户体验效果。

The method and device of automatic adaptive frequency for large screen page of control data visualization

【技术实现步骤摘要】
控制数据可视化大屏页面自动自适应频率的方法及装置
本专利技术涉及信息
，尤其是软件开发领域。
技术介绍
数据可视化页面有一个重要的分支即专门在一些专业设备上展示的页面，业内称之为大屏展示页面简称大屏页面。这类大屏页面展示的环境往往是高清的投影仪，或者是LED屏幕，或者是类似影院的巨幕环境下。这种大屏页面在设计和开发中有着自身独有的特点，这些特点总结如下：相关定义：浏览器的可视区间即浏览器展示内容的区间，可视区间不包含浏览器的地址栏、工具栏和滚动条这些元素。特点1：浏览器展示大屏页面，大屏的内容往往会占满整个浏览器的可视区间，大屏页面不能出现垂直和水平的滚动条；特点2：大屏页面需要自适应屏幕的功能，这样能保证大屏页面不同类型的展示介质下都能保证正确并且美观的展示效果。由以上两个特点，大屏的技术实现上会有如下技术要求，具体如下：要求1：大屏页面要禁止滚动条的出现；要求2：大屏页面需要获取浏览器可视区间的宽度和高度，大屏的内容展示都以此可视区间的大小来进行排版布局以及相关内容展示的编排；要求3：需要动态监测浏览器可视化区间宽高的方法，当发现浏览器可视化区间大小发生变化后，页面执行重排页面的方法，让页面的展示内容根据实际可视化区间的宽度和高度进行重新布局。在业界解决浏览器固定可视化区间的方法基本都是统一的，即使用css技术对于页面的body元素进行样式控制。代码中Overflow属性值为hidden，这就让body元素在水平和垂直方向都禁止使用滚动条。有些场景下页面还会在body元素上设置width和height都为100%，这样就使得浏览器的可视区间进一步限制宽度和高度。关于页面自适应页面可视化区间的技术手段，页面一般都是使用页面window下的onresize事件，onresize事件在浏览器的宽度和高度发生1px的变化都会被成功触发。页面监测到浏览器宽度和高度变化后，页面就需要调用onresize的回调函数将页面的展示元素进行重新排版布局，页面重新排版技术是页面整个自适应的技术难点所在，本专利技术人收集业界的处理方法汇总下来大致有两种方案，具体如下：方案1：当页面被通知要执行页面重新布局操作后，开发人员会将页面每一个需要重排的元素都进行重新的排版布局操作。该方案功能实现起来特别的繁琐和复杂，研发人员需要非常细致的梳理出页面每个需要重新排版布局的元素，大到页面里比较显眼的用于排版布局的容器，小到一个标题甚至一个小图标都要进行重新的排版布局，如果碰到页面使用不同类型的排版布局技术，那么页面重排还需要兼容排版布局的差异性，采用此方案会让页面里存在大量专门用于页面自适应的代码，这也导致整个页面的代码变得臃肿，代码的健壮性和可维护性都大大的降低。因此在实际生产应用中，该方案基本都是做有限的大屏自适应操作即保证重要的排版布局进行重排，细微的展示元素往往会被忽略。不过该方案有一个优势，这个优势就是页面的重新排版布局操作不需要重新刷新页面，这也是该方案虽然繁琐，但是任然被广泛使用的一个重要原因。方案2：页面展示元素的排版布局跟浏览器的可视化区间的大小密切相关，页面展示元素自适应浏览器的可视化区间的大小，在业界一般有两种实现方案，第一种方案是页面展示元素的宽高以及位置通过比率来进行定位，例如：CSS的盒子模型里width或者height使用百分比，css的flex布局使用flex元素设置元素在可视化区间里的比例；第二种方案就是页面可视化元素都采用相对于body元素的绝对定位，在一个参考的可视化区间下动态计算展示元素的宽度、高度以及top和left的值。方案2触发页面展示元素重排的方法就是让页面重新刷新，如下代码所示：window.onresize=function(){window.location.reload()}。方案2操作简单，代码也很容易在不同大屏页面里进行复用，因此它是比方案1更加常见和通用的展示元素自适应解决方案。所有屏幕自适应方案，页面都会调用window的onresize方法，该方法只要浏览器的宽度或者高度发生了1px的变化都会被触发。这样的事件所带来的问题就是每次大屏页面的自动自适应都会被调用多次，如果自适应方案按方案2执行，那么每次自适应就会多次请求服务端数据，这就导致页面加载更慢，在一些极端场景下，甚至会导致页面很长时间都无法正常显示甚至导致浏览器的奔溃；就算页面加载性能没有问题，短时间快速的触发屏幕自适应功能，页面会产生严重的抖动现象，这样大屏页面的可视化效果大打折扣。如何有效的控制页面自动自适应的次数也是优化大屏页面自适应的一个重要问题，本专利技术的控制数据可视化大屏页面自动自适应频率的装置使用事件监听器监听onresize事件，使用时间窗口定义器定义触发页面刷新指令的时间窗口，使用计时器按照时间窗口的时常进行延时计时，使用页面自适应信号触发器来执行页面刷新指令，通过每次触发onresize事件计时器重新计时的方式达到有效控制大屏页面刷新次数的目的，通过时间窗口的设置兼顾了用户体验效果。介绍一个常见的解决频繁触发自动更新页面操作的方案，这也是本专利技术产生之前的解决页面频繁触犯自动刷新的一种方案，具体内容如下：该方案方式是让页面的自动刷新操作触发定义一个固定的时间间隔，例如1000毫秒（1秒）。也就是不管用户调整页面大小的时间有多长，每隔一个固定时间就触发一次页面自适应功能，该方法在实际生产中有如下问题：问题1：如果间隔时间太短了，虽然页面减少了自动刷新的次数，但是页面抖动和频繁加载的情况任然比较严重问题2：如果间隔时间过长，用户会明显感觉到页面加载的延迟，这时候用户会认为系统的性能有问题问题3：如何确定一个适中的时间间隔，这又是一个非常困难的事情，最主要的原因是服务端相应的时间问题，服务端相应浏览器端的时间也影响到时间间隔值的设定，例如如果服务端响应很快，间隔时间的合理值应该设定短一些，服务端响应时间过长那么间隔时间应该设定长点，但是谁都无法保证这个时间什么时候会长什么时候会短，因此适中的时间间隔都是随机动态根本无法控制。共有技术描述onresize事件定义和用法：onresize事件会在窗口或框架被调整大小时发生；语法：onresize="SomeJavaScriptCode"。
技术实现思路
控制数据可视化大屏页面自动自适应频率的装置，由事件监听器，计时器，页面自适应信号触发器，时间窗口定义器组成；由事件监听器加入onresize事件，onresize指向计时器，将事件监听器加入到大屏展示页面的语句中，完成大屏展示页面在改变页面大小时触发事件监听器的onresize事件，并指向计时器；由时间窗口定义器定义计时器的计时时长，由计时器加载时间窗口定义器所定义的计时时长，将计时器加入到大屏展示页面的语句中，完成onresize事件发生后直接指向计时器并开始计时的功能；由页面自适应信号触发器完成发出页面自适应的指令，并将页面自适应信号触发器加载到大屏展示页面中计时器语句之后；达到计时器完成计时时长后触发页面自适应信号触发器的功能；时间窗口定义器定义计时器的计时时长的取值范围在200毫秒到500毫秒之间。有益效果Onresize会在极其短的时间，不到0.01毫秒反复被触发，这个值是远小于时间窗口时本文档来自技高网...

【技术保护点】
1.控制数据可视化大屏页面自动自适应频率的装置，其特征在于由事件监听器，计时器，页面自适应信号触发器，时间窗口定义器组成；由事件监听器加入onresize事件，onresize指向计时器，将事件监听器加入到大屏展示页面的语句中，完成大屏展示页面在改变页面大小时触发事件监听器的onresize事件，并指向计时器；由时间窗口定义器定义计时器的计时时长，由计时器加载时间窗口定义器所定义的计时时长，将计时器加入到大屏展示页面的语句中，完成onresize事件发生后直接指向计时器并开始计时的功能；由页面自适应信号触发器完成发出页面自适应的指令，并将页面自适应信号触发器加载到大屏展示页面中计时器语句之后；达到计时器完成计时时长后触发页面自适应信号触发器的功能；时间窗口定义器定义计时器的计时时长的取值范围在200毫秒到500毫秒之间。

【技术特征摘要】
1.控制数据可视化大屏页面自动自适应频率的装置，其特征在于由事件监听器，计时器，页面自适应信号触发器，时间窗口定义器组成；由事件监听器加入onresize事件，onresize指向计时器，将事件监听器加入到大屏展示页面的语句中，完成大屏展示页面在改变页面大小时触发事件监听器的onresize事件，并指向计时器；由时间窗口定义器定义计时器的计时时长，由计时器加载时...

【专利技术属性】
技术研发人员：林飞，夏俊，古元，于龙，王娜，熊翱，
申请(专利权)人：北京亚鸿世纪科技发展有限公司，
类型：发明
国别省市：北京,11