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

摘要

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

主权项

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及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率，例如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；规则配置器收到浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比对比所存储的排版布局规则，当浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比符合规则配置器所存储的规则时，规则配置器将浏览器类型、操作系统类型、可视化区间的参数和可视化区间的宽高比发送给排版布局定义器，由排版布局定义器根据可视化区间的参数和可视化区间的宽高比来确定浏览器嗅探工具所嗅探的浏览器打开的数据展示平台使用的排版布局。