CN110263281B - 一种数据可视化开发中页面分辨率自适应的装置及方法 - Google Patents

Abstract

一种数据可视化开发中页面分辨率自适应的方法涉及信息技术领域。本发明由定义步骤，排版布局录入步骤，浏览器嗅探步骤，规则适配步骤实现。本发明的一种数据可视化开发中页面分辨率自适应的方法通过制定统一的页面开发接口标准，以数据可视化页面的使用方通过页面开发接口标准定义展示页面的基本框架，由数据可视化页面的开发者通过浏览器嗅探工具取得相应的可视化参数，由规则配置器根据可视化参数自动配置与数据展示平台相适应的页面排版布局方式；实现本发明可以标准化数据可视化开发中页面框架生成的工作，并且减少人为配置页面框架造成的误差和因技术水平不同而造成的页面复杂度增加的情况，极大的推进数据可视化页面框架根据分辨率自适应决定页面框架的速度和标准化。

Description

一种数据可视化开发中页面分辨率自适应的装置及方法

技术领域

本发明涉及信息技术领域，尤其是软件开发领域中对数据可视化时页面分辨率的自适应领域。

背景技术

随着大数据技术的日益普及，web系统的一个分支数据可视化系统得到了长足的发展。数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。数据可视化主要是借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着，数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。

数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。

在web开发领域，早期的数据展示基本都是以table的形式进行。随着浏览器对于图形化技术的集成，大量的统计图表技术在web前端侧形成了相应的技术框架和技术产品，这就让浏览器展示数据的手段更加的多样化，使得以前靠文字展示内容的模式逐渐演变成图文结合的模式，甚至是纯图形化的表现模式。而随着大数据技术的发展，这个趋势要求web前端能够展示更加多样化的数据，同时也要求web前端能够通过图形化技术来以视觉容易接受的方式让数据在无形中进行了二次分析。

在可视化页面的生产实践中，会有两个相关方，它们分别是：生产方和应用方，生产方指的是数据可视化页面的制作组织，而应用方指的是数据可视化页面的使用人员以及使用的场景。在生产实践中，这两方都会碰到一些技术性的难题，这些难题具体如下：

1.应用方：应用方的技术难题主要体现在可视化页面展现的载体，展现的载体一般有投影仪，LED屏幕，个人电脑，甚至部分的可视化页面要求在移动端呈现，这些展现的载体落实到web前端技术领域，就是各个展现载体的分辨率不同，在开发实践中碰到的最大的分辨率有像影院的巨幕电影那么大的屏幕，最小的分辨率有大家日常使用的手机一般大小的屏幕，因此可视化大屏基本囊括了时下绝大部分的分辨率范畴。此外，可视化页面绝大部分的展示元素都是可视化图表，因此就算分辨率再小，具体的可视化图表元素也不能缩放过小超过了人眼能很舒适的识别的程度。

2.生产方：生产方所面对的可视化页面的开发最根本的问题就是每一张可视化页面个性化太强，换个角度来说明就是不同的可视化页面共用的元素太少。时下的web前端在工程领域都会使用相应的web前端框架，而web前端框架在可视化封装这块主要是封装页面开发中通用的部分，其主要内容就是页面可视化那些固定的展示样式，核心就是web前端在浏览器端的排版和布局。下面具体说明这个问题，在web开发领域的完整流程中都会存在一个页面排版布局的技术开发过程，早期web系统基本都是应用管理系统，因此往往会有一些固定的页面排版布局模式。在传统的web系统开发中，这些排版布局都是在web前端架构中统一写好，具体的功能页面只是统一复用这些排版即开发具体功能页面时候，研发人员不需要关心统一的布局模式，而只需要关心自己所开发的功能页面即可，因此排版布局往往是web前端框架在可视化部分的一个核心功能，但是在可视化大屏页面里，每个页面都会有各自独立的排版布局模式，因此传统的web前端框架布局方案往往会失效，在数据可视化开发中一套系统下的两个可视化页面拥有不同的排版布局模式。

一套系统下的多个可视化页面拥有不同的排版布局模式，这个问题就会导致如下的生产实践问题的出现：

情况1：如果用户需求的数据可视化页面较少，该系统的可视化页面往往会独立设计与开发即开发者不复用原来的web架构，而是脱离原web前端架构独立开发这些可视化页面。这种情况会使得可视化页面开发工作量比传统页面有所增加，同时页面的排版技术在web前端属于难度和技巧较高的技术范畴，因此需要开发可视化页面的研发人员对于web前端排版技术的掌控较高，使得页面研发技术门槛提升，变相的也提升了可视化页面的研发成本。

情况2：当一个系统里需要大量的可视化页面甚至整个系统都要求使用可视化页面，那么单个页面独立开发的模式就会导致项目无法工程化，这样就会导致系统页面开发的工作量倍增，同时开发出来的系统因为缺少web前端框架管理，让系统后期的运维和维护的难度大大的增加，这对于生产效率和生产质量产生了及其不利的影响。

情况3：可视化页面在生产实践中往往受使用方的个人需求影响比较大，具体就是，可视化页面在实际应用场景一般都是会给重要的人员进行展示或者是一个组织对外展示自身工作成果的手段，因此很多可视化页面研发过程中使用方会深入参加页面设计和开发的全流程，这就导致可视化页面会被经常修改和优化，这样的情况就会导致可视化页面的研发周期很长，设计和研发的工作重构性很高，如何能简化或者优化可视化页面的研发流程提高生产效率和快速响应客户需求的能力对于生产企业以及研发的个体都是十分重要的。

此外，应用方所面对的技术问题最终也会落实到生产方来解决，这个问题对于生产方而言就是如何让可视化页面能适应各种不同的分辨率展示，最好是一次研发就能在投影仪，巨幕，LED屏幕以及个人电脑，甚至移动端屏幕上都能显示出最佳效果。

背景技术，具体总结一下页面排版技术在数据可视化页面里的运用以及现有的排版技术存在那些相关的问题：

目前业界在开发可视化页面所使用的的页面排版技术主流的方案有如下三种：

方案1：使用盒子模型的布局，盒子模型的布局是CSS领域最古老的的布局方案，已经流行了近20年，盒子模型主要依靠CSS的position，display，float，margin，border，padding等属性完成，由于可视化页面对于分辨率的自适应要求较高，所以可视化页面往往会使用绝对定位排版矩形框的方式进行排版，这些绝对定位的矩形框的参考父元素往往都是body元素即浏览器的可视化区间，通过布局矩形框在浏览器可视化区间上的偏移位置来定位矩形框的展示位置。阿里云的datav就是采用这种方式进行布局，这种布局的好处是可以很容易制作一套以拖拽的方式快速构建页面的工具系统。弊端是它很难作为一套web前端框架级别的布局方案，因为绝对定位布局虽然将页面布局的方法简单化，但是它本身增加了排版的人工工作量，所以它很难总结出有效的通用代码。

方案2：使用CSS的Flex弹性布局模式，关于CSS的弹性布局：

CSS3引入了一种新的布局模式——Flex布局，用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，简称为Flex。Flex布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，打破了之前用浮动的布局，更加灵活。

Flex弹性布局自身就带有屏幕自适应的功能，因此它比传统的盒子模型更加的强大和灵活。但是Flex布局学习成本比较高，在生产实践中会碰到很多跟自适应相关的技术问题，这套技术在生产实践中发现能掌握好的研发人员基本都是专职的web前端开发人员，而一般的web工程师都很难很好的掌控Flex布局。

方案3：使用栅格系统进行页面的排版布局，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。栅格系统一般都是基于行来进行排版，一般栅格系统会把行分成12列，或者是24列，使用的用户根据列的偏移，跨列等手段进行页面排版。

以上是web前端所提供的的通用的页面排版方案，除了以上方案为了满足页面自适应，往往还需要使用JavaScript技术嗅探浏览器的分辨率，根据不同的分辨率做页面排版布局的自适应的处理。

下面本文将详细论述下传统排版布局技术在使用中的问题，具体内容如下：

实现浏览器的排版技术手段很多，但是本发明人认为不管使用那种技术进行页面排版布局，这些技术的排版布局的核心思想是一致的，这个思想就是通过行列布局方式进行页面排版布局。

行列布局方式就是将浏览器的可视化区间当成一个画布，然后先将画布分成多少行，然后在行里分成多少列，行和列的交集就产生了矩形框布局容器，而矩形框布局容器内放置需要展示的内容，下面本文将一步步说明此原理。

在讲解行列布局模式技术前，本文定义一个概念就是根容器，例如我们要开发一个页面，那么我们最开始的排版的父容器就是html的body元素，这时候body元素就是所谓的根容器，根容器是浏览器我们每一次行列排版布局的基础，所有的排版都是以根容器的区域进行的。

图2所示：这是在根容器下做了第一次行列排版布局，我们首先只是将页面分成了两行，每行里没有列或者说每行只有一列，这种布局很简单很基本，但是也很常用，例如传统页面里的查询页面就是这种布局；如图3所示：这里我们在根容器里分成了3行，第1行分为2列，第2行分为4列，第三行分为3列。由此可见在根容器里进行一次行布局，在进行一次列布局，这就做完了一次行列排版布局操作。

图4所示，这个布局粗看在根容器做了3行布局，但是细看下，我们会发现第1行和第2行的第2列有跨行，碰到这种情况，本发明会把跨行的列合并为1行，也就是上面的页面排版应该是在最外层的根容器里做了两行布局，第2行布局相对简单，直接就是分成了4列，第一行布局因为我们以跨行列来合并行的个数，因此第一行首先分成了3列，然后以第1行的第1列为根容器再次做了两行布局，同理第1行第3列也是以第1行的第3列为根容器再次做了两行布局。这个页面也就进行了两次的行列排版布局操作。

图5所示，这个布局粗看之下按行分会有3行，但是实际操作里由于第1列和第3列没有和第2列对齐，因此这个页面布局难度就比较大了。如果我们以body的根容器角度考虑第一行列布局，这个页面不管怎么排版都只能作为一行来理解，因此第一次行列排版就是1行3列，第二次排版是针对列进行的，第一列是两行的排版，第二列是3行的排版，第3列是两行排版，然后第二列内部再做一次行列排版，也就是最多三层行列排版操作。

web前端日常开发中排布布局难点在没有方法约束情况下，使用行列布局模式多样化会导致每一次排版的内部的排版次数也增加不少。过多的排版次数和排版操作就导致排版的复杂度增加，这也是CSS排版技术在实际生产中的难度很高的重要原因之一。

行列排版是浏览器的最核心的排版思想，但是很少有人能贯彻执行它，根容器参考系也是源自于浏览器的排版思想，但是在生产实践中，大家往往很难合理的控制好这种排版，例如margin元素和padding元素就可以打破这种排版：我们可以不使用任何浏览器给出的行列排版方案，只是通过marign-left偏移，也可以达到同样的目的，这样的情况在行列排版不断嵌套下尤为明显，具体就是一个矩形框的位置我们既可以通过行列布局方法定位它在页面的位置，也可以设定矩形框自身的margin属性来确定自身的位置，这就导致页面排版的手段在一种思路下有出现的分支排版方案，即可以打破统一行列排版布局的思路，最终让页面的排版更加的复杂了。

因此如何有效的控制页面排版的方法是本发明核心解决的一个问题。

下面我们将重点讲解下浏览器排版里margin和padding元素的使用，这两个元素也可以实现页面的排版功能，但是这两个元素作用是有区别的，margin是子元素定位自身的位置，padding是父元素确定子元素的位置，这就导致排版的参考系发生了变更。

此外，特别是margin元素还会使得排版出现不对齐的状况，当碰到这样的问题时候使用方常常会说页面排版出问题，需要调整，而这些调整在实际开发中有时往往没有想象中那么简单，主要原因是它跟多次行列排版布局以及不合理的padding和margin的使用相关，因此某些场景下为了修改这个布局，甚至需要页面这个排版布局模式做很大的调整，修改成本是极高的。

在生产实践中页面的排版会更加没有章法，会出现根据根容器做了2次行列布局定位好了它展示内容的位置，但是内容本身还存在3到4次行列布局排版的情况，最终呈现的结果纷乱而复杂，因此在具体开发中，我们如果没有预先统筹布局的开发方式，这就会导致页面每一个可视化内容的排版都是独立的一套体系，这就让页面的排版情况更加的复杂。因此我们需要一个边界，边界的一方是不与内容相关的排版开发，边界另一方是具体的内容开发，哪怕内容里还有排版布局操作也将其归类到内容开发中。

在浏览器技术中一个排版容器的大小除了我们预先设定宽高外，还能有一种模式，这个模式是容器的内容大小动态的改变容器自身的大小，例如：页面左右两侧的table所在的布局容器，设定了固定的宽度和高度，并设定容器当内容超出设定的宽高之后出现相应的滚动条。布局容器大小随着内容变化而变化，就会导致内容对于页面排版布局有影响，这也是增加页面排版布局复杂度的一个重要因素。

JSON 数据格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

JSON建构于两种结构：

1. “名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），记录（record），结构（struct），字典（dictionary），哈希表（hashtable），有键列表（keyed list），或者关联数组 （associative array）。2. 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

基础示例

简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪，但是 JavaScript 很容易解释它，而且 JSON 可以表示比”名称/值”对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。

表示名称 / 值对

按照最简单的形式，可以用下面这样的 JSON 表示 “名称/值”对 ：{ "firstName": "Brett" }

这个示例非常基本，而且实际上比等效的纯文本 “名称/值”对 占用更多的空间：firstName=Brett

但是，当将多个”名称/值”对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个”名称/值”对的 记录，比如：

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }

从语法方面来看，这与“名称/值”对相比并没有很大的优势，但是在这种情况下JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。

表示数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在 XML 中，需要许多开始标记和结束标记；如果使用典型的“名称/值”对，那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName这样的形式。

如果使用 JSON，就只需将多个带花括号的记录分组在一起：

{ "people": [

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},

{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }

]}。

鉴于现有技术在数据可视化开发中页面布局实现方法的多样化和难以达成统一标准以实现工程化开发的问题，本发明的一种数据可视化开发中页面分辨率自适应的方法通过制定统一的页面开发接口标准，以数据可视化页面的使用方通过页面开发接口标准定义展示页面的基本框架，由数据可视化页面的开发者通过浏览器嗅探工具取得相应的可视化参数，由规则配置器根据可视化参数自动配置与数据展示平台相适应的页面排版布局方式；实现本发明可以标准化数据可视化开发中页面框架生成的工作，并且减少人为配置页面框架造成的误差和因技术水平不同而造成的页面复杂度增加的情况，极大的推进数据可视化页面框架根据分辨率自适应决定页面框架的速度和标准化。

发明内容

一种数据可视化开发中页面分辨率自适应的方法，包括接口定义步骤，排版布局录入步骤，浏览器嗅探步骤，规则适配步骤；

1）、接口定义步骤

由排版布局接口定义器定义排版布局的接口标准为：

按照JSON的数据格式定义，mode、minHeight、minWidth、Layouts；

mode指的是以页面宽高比率作为代表的页面排版格式，mode的取值范围包括：41，21，11，12， 14共5种模式，41代表宽高比为4比1，21代表宽高比为2比1，11代表宽高比为1比1，12代表宽高比为1比2，14代表宽高比为1比4；

minHeight及其值代表内容展示所需要的最小的高度；

minWidth及其值代表内容展示所需要的最小的宽度；

Layouts中规定排版布局规范，该定义具体内容如下：

用rowMargin及其值定义行与行之间的间距，用columnMargin及其值定义列与列之间的间距，rowMargin及其值与columnMargin及其值会作用于整个排版布局过程，使用单一的行与列的间隔，主要目的是保证被布局的元素不会因为padding和margin元素的滥用或者无规律使用所导致的行列间距不对齐的问题；

columnRatio及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率，例如columnRatio ：[1, 2, 1]，说明第一次排版布局页面分成3列，第一列占宽度的1/4，第二列占宽度2/4，第三列占宽度的1/4；

用rows表示对第一次排版的行进行排版，rows下的ratio及其值是指行在高度上所占的比率，ratio及其值有数字和百分比两种，数字则是使用Flex布局进行高度计算，而百分比则是按照盒子模型的排版布局进行高度计算；rows下的columns的值是一系列数组，columns是第一次布局的列的定义，该属性和columnRatio相关，当columnRatio定义分成3列，columns数组的长度就是3组数组；rows下的columns的值中的数组的格式为以type来定义第二次行列布局中的列的再排版方式，type的值包括row和column；当type的值为row时表示相应的行列布局中的列在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示相应的行列布局中的列在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

当boxes需要嵌套时，同样以type来定义被嵌套的矩形框boxes的再排版方式，type的值包括row和column；当type的值为row时表示被嵌套的矩形框boxes在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示被嵌套的矩形框boxes在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

2）排版布局录入步骤

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在41即可视化范围的宽高比为4比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在21即可视化范围的宽高比为2比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在11即可视化范围的宽高比为1比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在12即可视化范围的宽高比为1比2时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在14即可视化范围的宽高比为1比4时的minHeight、minWidth、Layouts录入排版布局定义器；

3）浏览器嗅探步骤

浏览器嗅探工具是在浏览器加载页面时候执行的，它主要功能是监测浏览器的类型和操作系统的类型，这个可以使用浏览器内置的navigator.userAgent功能实现；使用浏览器嗅探工具得到数据展示平台的浏览器类型、操作系统类型、可视化区间的参数；可视化区间的参数包括：document.body.clientHeight可视化区间的高度和clientWidth可视化区间的宽度；由浏览器嗅探工具计算可视化区间的宽高比；

浏览器嗅探工具将浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比发送给规则配置器；

4）规则适配步骤

在规则配置器存储排版布局规则，包括：

规则1：宽高比模式21，宽高比范围1.25至2.8，浏览器：chrome，firefox，ie，操作系统：windows，linux，最小宽度：1024px，最小高度600px；

规则2：宽高比模式41，宽高比范围2.8至4.5，浏览器：chrome，firefox，ie，操作系统：windows，linux，最小宽度：2500px，最小高度600px；

规则3：宽高比12,宽高比范围0.3至1.1，浏览器chrome，firefox，ie，操作系统：windows，linux，最小宽度：300px，最小高度900px；

规则配置器收到浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比对比所存储的排版布局规则，当浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比符合规则配置器所存储的规则时，规则配置器将浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比发送给排版布局定义器，由排版布局定义器根据可视化区间的参数和可视化区间的宽高比来确定浏览器嗅探工具所嗅探的浏览器打开的数据展示平台使用的排版布局。

有益效果

数据可视化页面的自适应问题包含了几乎所有的web展示场景，它不像PC网站那样情况单一，因为数据可视化页面会面向很多超大型的屏幕和不规则的屏幕，它还可能包含移动端的场景，但是数据可视化页面也不太会因为移动端而重新设计新的前端，因此数据可视化页面的自适应场景相比很多系统会更加的复杂。传统的自适应技术往往只是简单的嗅探浏览器的宽度和高度，而本发明则是根据生产实践的经验，认为在如此大范围的屏幕自适应跟浏览器屏幕的宽度，高度，宽高比以及展示的设备相关联，这样就让自适应是一个完整的解决方案。此外，本发明在实践中发现，具体的浏览器具体的宽度和高度在绝大多数设备里都是差异不大，如果差异大一般都是跟显示载体有关，例如：投影仪和个人电脑，不管屏幕大小如何变化，我们会发现屏幕的高度基本变化幅度很小，就算高度变小了，控制纵向的滚动条而不去显示横向滚动条往往就能很好的解决屏幕自适应问题，因此监测屏幕宽高比比单纯使用宽度和高度更加有意义。同样对于个人电脑和移动端由于实际物理屏幕尺寸差距太大，因此嗅探设备的种类比简单确定宽度和高度更加有意义。因此本发明是对于现有屏幕自适应的一种改进和提升。

附图说明

图1是本发明的系统流程图；

图2是背景技术示例图2；

图3是背景技术示例图3；

图4是背景技术示例图4；

图5是背景技术示例图5；

图6是本发明的排版布局的接口标准的示例；

图7是本发明的主要步骤流程图。

具体实施方式

参看图1和图6及图7，实现本发明的一种数据可视化开发中页面分辨率自适应的方法，包括接口定义步骤S01，排版布局录入步骤S02，浏览器嗅探步骤S03，规则适配步骤S04；

1）、接口定义步骤

由排版布局接口定义器D定义排版布局的接口标准为：

按照JSON的数据格式定义，mode、minHeight、minWidth、Layouts；

mode指的是以页面宽高比率作为代表的页面排版格式，mode的取值范围包括：41，21，11，12， 14共5种模式，41代表宽高比为4比1，21代表宽高比为2比1，11代表宽高比为1比1，12代表宽高比为1比2，14代表宽高比为1比4；

minHeight及其值代表内容展示所需要的最小的高度；

minWidth及其值代表内容展示所需要的最小的宽度；

Layouts中规定排版布局规范，该定义具体内容如下：

用rowMargin及其值定义行与行之间的间距，用columnMargin及其值定义列与列之间的间距，rowMargin及其值与columnMargin及其值会作用于整个排版布局过程，使用单一的行与列的间隔，主要目的是保证被布局的元素不会因为padding和margin元素的滥用或者无规律使用所导致的行列间距不对齐的问题；

columnRatio及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率，例如columnRatio ：[1, 2, 1]，说明第一次排版布局页面分成3列，第一列占宽度的1/4，第二列占宽度2/4，第三列占宽度的1/4；

用rows表示对第一次排版的行进行排版，rows下的ratio及其值是指行在高度上所占的比率，ratio及其值有数字和百分比两种，数字则是使用Flex布局进行高度计算，而百分比则是按照盒子模型的排版布局进行高度计算；rows下的columns的值是一系列数组，columns是第一次布局的列的定义，该属性和columnRatio相关，当columnRatio定义分成3列，columns数组的长度就是3组数组；rows下的columns的值中的数组的格式为以type来定义第二次行列布局中的列的再排版方式，type的值包括row和column；当type的值为row时表示相应的行列布局中的列在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示相应的行列布局中的列在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

当boxes需要嵌套时，同样以type来定义被嵌套的矩形框boxes的再排版方式，type的值包括row和column；当type的值为row时表示被嵌套的矩形框boxes在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示被嵌套的矩形框boxes在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

2）排版布局录入步骤

由排版布局定义器3根据数据可视化应用方的要求，以排版布局接口定义器D定义排版布局的接口标准，将mode的取值范围在41即可视化范围的宽高比为4比1时的minHeight、minWidth、Layouts录入排版布局定义器3；

由排版布局定义器3根据数据可视化应用方的要求，以排版布局接口定义器D定义排版布局的接口标准，将mode的取值范围在21即可视化范围的宽高比为2比1时的minHeight、minWidth、Layouts录入排版布局定义器3；

由排版布局定义器3根据数据可视化应用方的要求，以排版布局接口定义器D定义排版布局的接口标准，将mode的取值范围在11即可视化范围的宽高比为1比1时的minHeight、minWidth、Layouts录入排版布局定义器3；

由排版布局定义器3根据数据可视化应用方的要求，以排版布局接口定义器D定义排版布局的接口标准，将mode的取值范围在12即可视化范围的宽高比为1比2时的minHeight、minWidth、Layouts录入排版布局定义器3；

由排版布局定义器3根据数据可视化应用方的要求，以排版布局接口定义器D定义排版布局的接口标准，将mode的取值范围在14即可视化范围的宽高比为1比4时的minHeight、minWidth、Layouts录入排版布局定义器3；

3）浏览器嗅探步骤

浏览器嗅探工具1是在浏览器加载页面时候执行的，它主要功能是监测浏览器的类型和操作系统的类型，这个可以使用浏览器内置的navigator.userAgent功能实现；使用浏览器嗅探工具1得到数据展示平台C的浏览器类型11、操作系统类型12、可视化区间的参数13；可视化区间的参数13包括：document.body.clientHeight可视化区间的高度和clientWidth可视化区间的宽度；由浏览器嗅探工具1计算可视化区间的宽高比；

浏览器嗅探工具1将浏览器类型11、操作系统类型12、可视化区间的参数13和可视化区间的宽高比发送给规则配置器2；

4）规则适配步骤

在规则配置器2存储排版布局规则，包括：

规则1：宽高比模式21，宽高比范围1.25至2.8，浏览器：chrome，firefox，ie，操作系统：windows，linux，最小宽度：1024px，最小高度600px；

规则2：宽高比模式41，宽高比范围2.8至4.5，浏览器：chrome，firefox，ie，操作系统：windows，linux，最小宽度：2500px，最小高度600px；

规则3：宽高比12,宽高比范围0.3至1.1，浏览器chrome，firefox，ie，操作系统：windows，linux，最小宽度：300px，最小高度900px；

规则配置器2收到浏览器类型11、操作系统类型12、可视化区间的参数13和可视化区间的宽高比对比所存储的排版布局规则，当浏览器类型11、操作系统类型12、可视化区间的参数13和可视化区间的宽高比符合规则配置器2所存储的规则时，规则配置器2将浏览器类型11、操作系统类型12、可视化区间的参数13和可视化区间的宽高比发送给排版布局定义器3，由排版布局定义器3根据可视化区间的参数13和可视化区间的宽高比来确定浏览器嗅探工具1所嗅探的浏览器打开的数据展示平台C使用的排版布局方式。

Claims (1)

1.一种数据可视化开发中页面分辨率自适应的方法，其特征在于由接口定义步骤，排版布局录入步骤，浏览器嗅探步骤，规则适配步骤实现；

1）、接口定义步骤

由排版布局接口定义器定义排版布局的接口标准为：

按照JSON的数据格式定义，mode、minHeight、minWidth、Layouts；

mode指的是以页面宽高比率作为代表的页面排版格式，mode的取值范围包括：41， 21，11，12， 14共5种模式，41代表宽高比为4比1，21代表宽高比为2比1，11代表宽高比为1比1，12代表宽高比为1比2，14代表宽高比为1比4；

minHeight及其值代表内容展示所需要的最小的高度；

minWidth及其值代表内容展示所需要的最小的宽度；

Layouts中规定排版布局规范，该定义具体内容如下：

用rowMargin及其值定义行与行之间的间距，用columnMargin及其值定义列与列之间的间距，rowMargin及其值与columnMargin及其值会作用于整个排版布局过程，使用单一的行与列的间隔，目的是保证被布局的元素不会因为padding和margin元素的滥用或者无规律使用所导致的行列间距不对齐的问题；

columnRatio及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率；

用rows表示对第一次排版的行进行排版，rows下的ratio及其值是指行在高度上所占的比率，ratio及其值有数字和百分比两种，数字则是使用Flex布局进行高度计算，而百分比则是按照盒子模型的排版布局进行高度计算；rows下的columns的值是一系列数组，columns是第一次布局的列的定义，columns和columnRatio相关，当columnRatio定义分成3列，columns数组的长度就是3组数组；当columnRatio定义分成n列，columns数组的长度就是n组数组；rows下的columns的值中的数组的格式为以type来定义第二次行列布局中的列的再排版方式，type的值包括row和column；当type的值为row时表示相应的行列布局中的列在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示相应的行列布局中的列在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

当boxes需要嵌套时，同样以type来定义被嵌套的矩形框boxes的再排版方式，type的值包括row和column；当type的值为row时表示被嵌套的矩形框boxes在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示被嵌套的矩形框boxes在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

2）排版布局录入步骤

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在41即可视化范围的宽高比为4比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在21即可视化范围的宽高比为2比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在11即可视化范围的宽高比为1比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在12即可视化范围的宽高比为1比2时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在14即可视化范围的宽高比为1比4时的minHeight、minWidth、Layouts录入排版布局定义器；

3）浏览器嗅探步骤

浏览器嗅探工具是在浏览器加载页面时候执行的，它的功能是监测浏览器的类型和操作系统的类型，这个使用浏览器内置的navigator.userAgent功能实现；使用浏览器嗅探工具得到数据展示平台的浏览器类型、操作系统类型、可视化区间的参数；可视化区间的参数包括：document.body.clientHeight可视化区间的高度和clientWidth可视化区间的宽度；由浏览器嗅探工具计算可视化区间的宽高比；

浏览器嗅探工具将浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比发送给规则配置器；

4）规则适配步骤

在规则配置器存储排版布局规则，包括：

规则1：宽高比模式21，宽高比范围1.25至2.8，浏览器：chrome，firefox，ie，操作系统：windows，linux，最小宽度：1024px，最小高度600px；

规则2：宽高比模式41，宽高比范围2.8至4.5，浏览器：chrome，firefox，ie，操作系统：windows，linux，最小宽度：2500px，最小高度600px；

规则3：宽高比12,宽高比范围0.3至1.1，浏览器chrome，firefox，ie，操作系统：windows，linux，最小宽度：300px，最小高度900px；

规则配置器收到浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比对比所存储的排版布局规则，当浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比符合规则配置器所存储的规则时，规则配置器将浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比发送给排版布局定义器，由排版布局定义器根据可视化区间的参数和可视化区间的宽高比来确定浏览器嗅探工具所嗅探的浏览器打开的数据展示平台使用的排版布局。

Images