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

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

A Page Resolution Adaptive Device and Method in Data Visualization Development

【技术实现步骤摘要】
一种数据可视化开发中页面分辨率自适应的装置及方法
本专利技术涉及信息
，尤其是软件开发领域中对数据可视化时页面分辨率的自适应领域。
技术介绍
随着大数据技术的日益普及，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前端开发本文档来自技高网...

【技术保护点】
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可视化区间的宽度...

【技术特征摘要】
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）排版布局录入步骤由排版布局定义器根据数据可视化应用方的要求，以排版...

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