一种数据可视化大屏的自适应布局方法与流程

1.本发明属于数据处理领域，尤其是涉及一种数据可视化大屏的自适应布局方法。


背景技术：

2.在当下的信息时代，数据可视化已经成为炙手可热的话题了，并且在网页端也开始得到了广泛支持。
3.数据可视化的基本思想，是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析。
4.数据可视化主旨在于借助图形化，清晰有效地展示信息。但这并不是指数据可视化就一定因为要实现其功能而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。


技术实现要素：

5.有鉴于此，本发明旨在提出一种数据可视化大屏的自适应布局方法，为了有效地传达思想概念，美学与功能需要齐头并进，通过直观地传达关键的方向与特性，从而实现对复杂又枯燥的数据深入观察。
6.为达到上述目的，本发明的技术方案是这样实现的：
7.一种数据可视化大屏的自适应布局方法，包括以下步骤：
8.s1、通过js原生方法获取body元素，并将body元素隐藏；
9.s2、根据当前屏幕分辨率与网页实际开发尺寸计算出两者之间的比例；
10.s3、根据步骤s2获得的比例，对页面进行等比例缩放；
11.s4、显示body元素；
12.s5、判断页面是否为初次加载，如果是则监听浏览器resize事件，当浏览器窗口发生变化后，重新执行之前上述步骤s1-s4，否则结束。
13.进一步，在步骤s1中，通过js原生方法getelementsbyclassname获取body元素。
14.进一步，在步骤s3中，对页面进行等比例缩放的方法为：将比例赋值给body元素css transform-scale属性。
15.进一步，在步骤s3中，计算屏幕与网页宽度比，并设置给body元素css transform-scale属性。
16.进一步，在步骤s5中，如果页面初次加载，监听浏览器resize事件，并将第一步创建的js方法做为resize的回调函数。
17.第二方面本方案公开了一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器用于执行第一方面所述的一种数据可视化大屏的自适应布局方法。
18.第三方面本方案公开了一种服务器，包括至少一个处理器，以及与所述处理器通
信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行第一方面所述的一种数据可视化大屏的自适应布局方法。
19.第四方面本方案公开了一种计算机可读取存储介质，存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现第一方面所述的一种数据可视化大屏的自适应布局方法。
20.相对于现有技术，本发明所述的一种数据可视化大屏的自适应布局方法具有以下有益效果：
21.本发明所述的一种数据可视化大屏的自适应布局方法，可以保持网页宽度和浏览器保持一致，自动适应不同尺寸的屏幕，能够快捷解决多设备显示适应问题，面对不同分辨率设备灵活性强。
附图说明
22.构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
23.图1为本发明实施例所述的一种数据可视化大屏的自适应布局方法示意图。
具体实施方式
24.需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
25.下面将参考附图并结合实施例来详细说明本发明。
26.本方案的发明内容如下：
27.固定布局：以往的固定布局是以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸。能够快速开发，但页面不能按照浏览器进行自适应。
28.媒体查询：媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向：横向或纵向)为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。缺点：需要根据屏幕大小范围设计多套样式。
29.流式布局：以百分比作为页面的基本单位，可以适应一定范围内所有的尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。缺点：只能设置宽度为百分比，其他属性不可(border、font-size)
30.本方案采用js css原生属性对页面进行等比缩放来进行自适应，具体步骤如下：
31.1、通过js原生方法getelementsbyclassname获取body元素，并将元素隐藏；
32.2、计算当前屏幕分辨率与网页实际开发尺寸计算出两者之间的比例；
33.3、将比例赋值给body元素css transform-scale属性(对页面进行等比例缩放)；
34.4、显示body元素；
35.5、如果页面初次加载，监听浏览器resize事件，重新执行之前步骤；
36.具体的本方案公开了一种数据可视化大屏的自适应布局方法，包括以下步骤：
37.s1、通过js原生方法获取body元素，并将body元素隐藏；
38.s2、根据当前屏幕分辨率与网页实际开发尺寸计算出两者之间的比例；
39.s3、根据步骤s2获得的比例，对页面进行等比例缩放；
40.s4、显示body元素；
41.s5、判断页面是否为初次加载，如果是则监听浏览器resize事件，当浏览器窗口发生变化后，重新执行之前上述步骤s1-s4，否则结束。
42.在步骤s1中，通过js原生方法getelementsbyclassname获取body元素。
43.在步骤s3中，对页面进行等比例缩放的方法为：将比例赋值给body元素css transform-scale属性。
44.在步骤s3中，计算屏幕与网页宽度比，并设置给body元素css transform-scale属性。
45.在步骤s5中，如果页面初次加载，监听浏览器resize事件，并将第一步创建的js方法做为resize的回调函数。
46.第二方面本方案公开了一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器用于执行第一方面所述的一种数据可视化大屏的自适应布局方法。
47.第三方面本方案公开了一种服务器，包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行第一方面所述的一种数据可视化大屏的自适应布局方法。
48.第四方面本方案公开了一种计算机可读取存储介质，存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现第一方面所述的一种数据可视化大屏的自适应布局方法。
49.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
50.在本技术所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其它的方式实现。例如，以上所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
51.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
52.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精
神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。