CN111813410A - 浏览器数据可视化开发用于多页面联合展示的方法和装置 - Google Patents

Abstract

浏览器数据可视化开发用于多页面联合展示的装置涉及信息技术领域。本发明由菜单样式定义器、兼容单页面路由配置器、菜单导航路由配置器和子组件配置器组成；本发明在多页面联合展示的情况下将菜单栏作为父级别显示元素，将其他多页面作为菜单栏子级别页面通过菜单导航路由配置器对导航栏项目的路由配置访问，避免了点击导航栏项目加载重复内容的问题，提高了大屏系统多页面展示的加载效率。本发明的多页面联合展示的每个页面可以单独开发，通过本发明进行统一的路由配置即可完成整个项目的合成，使用简便，易于推广。

Description

浏览器数据可视化开发用于多页面联合展示的方法和装置

技术领域

本发明涉及信息技术领域，特别是数据可视化技术领域。

背景技术

随着大数据和AI技术的发展，数据可视化作为大数据和AI的最终产出物也得到了长足的发展。数据可视化在百度百科的定义：数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。

数据可视化本质就是使用图形展示数据，相对传统的Web管理系统主要使用表格展示数据的方式，数据可视化展示数据的手段非常的多样，甚至可以说在数据可视化领域有无限可能的数据展示方式，例如：在智慧城市领域就经常使用大规模城市3D模型加上地理纬度来展示相关的数据。

数据可视化是个古老的技术门类，而计算机的数据可视化技术最早源自于20世纪50年代的计算机图形学早期，当时人们利用计算机创造了首批图形图表（百度百科），而可视化图表作为数据分析的手段一直伴随计算机的发展而一同发展。2015年天猫的研发人员通过浏览器的图形化技术在一个超大的屏幕上实现非常炫酷的数据可视化屏幕，一下震撼了业界和数据可视化领域。大屏展示从此开始走进了数据可视化领域，2015年也被誉为大屏的元年。到了2017年阿里巴巴集团基于天猫双十一大屏的经验推出了专门研发大屏页面的工具DataV，DataV的主要目的就是降低大屏研发的门槛，任何人使用DataV都能基于DataV提供的可视化资源创造属于自己的可视化大屏，DataV改变了原有的大屏研发模式。2017年也是大屏研发工具化的元年。

客户使用显示大屏的设备基本都是4K的设备，在这么大的屏幕上页面的显示效果就非常好，因此大屏页面有个很大的特点那就是尽其所能酷炫。对于研发领域，在浏览器上实现大屏酷炫的效果也是新技术的一个进步，大屏上使用了大屏浏览器端的图形化技术，例如：html5的2D技术canvas、svg以及html5的3D研发技术webgl。

以拖拽开发系统很早就有这样的研发工具，例如早期的VB，微软的.NET等，但是在浏览器端开发浏览器显示的页面，这也是属于一个比较新的技术领域，具体论述如下：

1.浏览器支持的底层技术是html、css和JavaScript，开发者研发一般都是靠这三种技术研发页面，研发好的页面在浏览器展示，但是如果开发者使用这三个技术开发一套研发工具，研发工具研发出来的还是浏览器浏览的页面，这样的技术栈还主要是在前端领域的MVVM框架普及后才产生的，MVVM框架给浏览器赋予了可以和桌面软件相当的交互能力，这就让浏览器可以研发出和桌面软件相当交互能力的应用

2.而传统的研发工具基本都是基于操作系统做的桌面软件，那么在浏览器上实现研发工具和传统的研发工具的技术栈就有很大的不同。例如本发明的拖拽大屏工具，所有的技术栈都是基于html、css和JavaScript，工具的主要业务逻辑都是在浏览器实现，工具对应也有服务端，服务端的技术是nodejs是服务端版本的JavaScript语言，而服务端主要作用还是数据持久化和一些其他的辅具功能，因此和传统软件相比，拖拽大屏工具运行载体，使用的技术，所面对的技术问题都是有很大的区别的。

在大屏出现之前，使用图表展示数据的方式往往都是BI工具制作出来的数据报表。最早的数据报表主要是通过服务端技术生成静态的图表，结果往往都是以图像图片来呈现，缺乏交互，随着浏览器技术的普及，为了制作更好的动效和交互图表浏览器内可以嵌入flash插件完成图表的制作，直到html5普及浏览器原生支持了2D图形化技术，这时候浏览器可以不再借助插件完成图形化技术，在国内2014年百度开始推出使用canvas技术实现的浏览器图表echarts技术框架，使得国内在浏览器端图形化技术得到更大的普及，随后蚂蚁金服也推出了类似图表相关框架和技术。加上大数据、云计算的发展，世界上顶级的互联网公司就开始推进基于大数据、云计算的数据分析工具，因此这些大公司将传统的计算机BI类型工具往浏览器端迁移，普及自身的BI工具，这就让传统的计算机数据分析工具发生了很大的变化，原有的很多从事桌面软件的数据分析工具要么被淘汰，要么就往云端迁移。因此时下是一个BI工具更新换代的一个大变迁时代。以拖拽方式开发大屏也是顺应这个潮流发展出来的。

在从事企业大数据软件研发的公司，公司的很多客户都非常喜欢大屏那种炫酷的页面展示方式，时下的客户不仅仅满足于一两个炫酷的大屏，他们甚至提出希望自己整个基于大数据分析的系统每个页面都是一个大屏风格，这就导致一个系统拥有数十个大屏页面的情况，这样的需求对于阿里云的DataV这样的工具常常会显得无能为力，主要原因是DataV是一个工具类产品，它的客户是大屏的研发人员而非大屏的使用客户，因此DataV关注点是如何制作一个个酷屏，而非研发一套酷屏的系统。在这样的需求场景下，公司的研发团队往往只能自主研发大屏展示系统，这就导致极高的研发成本。大屏的最大特点是酷炫，实际生产中酷炫是一个感性的问题，在大屏研发中研发人员往往需要和客户一个个交流每一个大屏设计，每一张大屏都是需要反复的修改的和确认，甚至有的大屏在接入生产数据后，展示效果欠佳，那么这时候就需要重新设计，因此大屏页面，大屏系统的研发效率是非常低的，而拖拽工具可以让开发者快速完成一个大屏从需求沟通、页面设计以及服务端数据对接的全过程，这就能让大屏研发产生质的变化。

大屏的导航菜单和传统的导航菜单有一定的差异性，这个差异性主要是大屏所追求的酷炫效果所决定的，大屏的导航菜单如果在大屏可见那么它就是大屏展示的一部分，那么导航菜单好不好看，好不好用，菜单放在那里展示效果最好就都成为一个合理的大屏需求了，因此大屏的导航菜单也是一个可以配置可以编辑，可设计的组件，但是这个组件往往是有别于传统拖拽组件的特性，因此本发明就是通过实践提出浏览器数据可视化开发用于多页面联合展示的方法和装置用于大屏多页面导航菜单的开发。

现有技术

前端路由的知识背景：

回顾Web开发里路由的演变，早期的Web应用在没有出现ajax技术前端，路由这个概念还没有提出，类比现在的路由，早期的路由其实就是指页面的url地址，一个url地址对应一个web页面，本质上url地址代表服务端存放的一个http可被get请求访问的资源，url也就代表这个可访问资源的位置，随着ajax的发展，Web系统可以使用异步的方式请求服务端数据，当页面获得数据后通过JavaScript技术操作html的DOM技术可以实现不刷新页面就能改变页面内容的能力，于是单页面应用的Web前端系统随之出现。单页面的系统本质上就是一个系统只有一个url地址，不管这个系统有多少个功能，有多么复杂的业务逻辑，这一切的展示都是在一个页面里完成。

随之单页面的应用的普及，人们发现不能发生变化的url地址有种种的弊病，这些弊病不利于大型Web前端应用的开发：

1.浏览器的历史回退按钮失效；

2.单页面的应用不符合互联网应用的场景，例如：开发者在一个单页面里点击若干步骤发现了一个朋友感兴趣的商品，开发者拷贝url地址给朋友，这位朋友不能立即定位到商品所在的页面；

3.在企业软件领域，如果能给业务功能都标记一个独立的访问地址，那么开发者可以借助这些能力完成更加复杂的应用，同时也能优化展示的性能。

针对以上第3点，这里以前端hash路由具体举例如下：

1.路由地址如下：

http://localhost:8080/#/layout1/home

http://localhost:8080/#/layout1/home/detail

#号后面即是前端hash的路由，layout1代表前端的布局，例如layout1包含页面的头部、顶部、左侧菜单等，/home代表在layout1的布局下实现的首页的内容，/home往往代表开发者不用刷新layout1，只在layout1内容展示区间显示home的内容/detail则是在不重新加载/layout1和/home内容之下加载/detail内容的路由，由此可见前端路由可以实现精确的页面布局加载，如果没有这样的路由当开发者访问：

http://localhost:8080/#/layout1/home/detail

时候开发者就需要把layout1，home和detail内容全部获取一遍，大屏页面都是极其复杂的页面，页面里的实现可能还需要调用操作系统的CPU这样的资源，如果开发者可以节省页面加载时间，对于大屏的性能是极其有利的。Web系统里网络IO的效率往往是最低的，因此前端的性能优化都是从解决网络IO着手，如果网络IO需要以秒级别才能加载完毕，那么大屏页面展示必然给人加载缓慢的感觉，如果开发者的大屏变成大屏系统，这样的问题会直接影响用户的展示体验。

2.如下路由：

http://localhost:8080/#/layout1/daping/step01

http://localhost:8080/#/layout1/daping/step02

http://localhost:8080/#/layout1/daping/step03

http://localhost:8080/#/layout1/daping/step04

http://localhost:8080/#/layout1/daping/step05

以上5个url地址是一个工作流的5个按顺序的步骤，每个步骤对应一个功能页面，有了独立路由地址，如果执行步骤在第4步有误，开发者需要回退到第2步，如果在第5步操作有误，开发者需要回退到第1步，就算工作流不需要跳跃步骤，当开发者第3步页面时候，开发者点击浏览器的历史回退按钮就能回退到第2步，由此可见路由可以让开发者很轻松的完成页面之间复杂的跳转逻辑。

在早期开发者使用url地址标识服务器端的请求资源的位置，当ajax流行导致开发者不在需要url原始的作用，人们发现如果开发者做一些复杂的web系统，web复杂的系统就是系统里包含多个web页面，web页面之间还有一系列的逻辑关系，那么没有对于功能页面标识的功能，很多逻辑实现就会碰到问题，因此时下的单页面系统无一例外的都会把前端路由作为前端最基础的功能之一。

如果市场的客户希望开发者做成大屏系统，那么大屏系统本身也是web系统，那么这个web系统如果不能顺应web系统的技术发展要求，任然会碰到web系统发展所碰到的问题。大屏工具厂商因为着力于页面的酷炫，主要还是研发酷炫的页面需要一定的时间和技术的成本，那么如果在高效拖拽研发工具下，开发者节省了大屏研发的时间周期，那么客户必然会有更高的生产要求，例如：客户认为他们的系统做大屏的页面比较少，那么就没必要单独用个系统做大屏，就在原来的系统里研发大屏，这样大屏的统计数据可以很轻松的下钻到功能页面，因为大屏就在系统里，那么原来不是很美观的功能页面也应该根据酷炫的大屏风格进行展示优化。这样的需求合情合理，但是这样的需求就会导致开发者研发时候要以大型系统的角度思考大屏的研发。

本发明的浏览器数据可视化开发用于多页面联合展示的方法和装置引入时下最先进的前端路由技术，这就让拖拽大屏工具具备了复杂Web系统的研发能力，这样就能扩大了拖拽工具的使用范围，能让拖拽工具应付更加复杂的场景。

基于浏览器的拖拽数据可视化页面操作都是以研发页面的角度来进行可视化页面开发，在实际的生产实践里，一个可视化业务场景仅仅一个可视化页面是远远不够的，在某些可视化场景里我们需要多个可视化页面组织起来才能完整的反应我们需要表达的主题。当一个业务需求需要多个可视化页面来实现，那么就会引入一个问题：这些页面应该如何进行有效的组织即我们需要一种目录或者菜单体系结构将多个可视化页面按照一定的业务规则串联起来。

这个问题即是本发明标题的所描述的问题：基于浏览器端拖拽数据可视化工具多可视化页面联合显示问题。而本发明就是为了解决这个问题。

多可视化页面联合展示的问题，本质上就是一个页面切换问题，最简单的页面切换就是上一页，下一页的切换方式，但是有些场景下上一页和下一页可能就不能准确的表达可视化页面之间的逻辑关系，安全态势、风险预警和基础信息虽然都属于国家工业互联网安全态势感知与风险预警平台下的业务内容，但是它们如果用简单的上一页，下一页将可视化页面串联起来，那么系统展示逻辑就会大大打折扣了，因此这里我们使用了传统的Web系统菜单结构来组织可视化页面的显示问题。这个菜单一般都是隐藏的，当我们需要使用它的时候用户通过交互操作将菜单显示出来。在传统开发里这样的隐藏显示的菜单，前端研发会用fixed布局模式即将菜单以浏览器视口为参考坐标系来定位菜单的位置。这种布局模式是有别于拖拽研发工具里以画布为参考坐标系的设计，因此这样的菜单不太适合使用拖拽研发的模式进行操作，不过这个也会有变通的布局实现方案针对拖拽研发工具，但其他方式会存在菜单要遮挡住页面内容等等局部问题，不管这些方案如何好，都没有fixed布局完善，简单易用。

多页面需要菜单进行导航，菜单就相当于这些页面的一个目录，可视化页面使用菜单做导航功能，跟传统的Web系统菜单导航是一样的道理，菜单的作用相当于目录，因此菜单导航也就代表了整个项目的业务内容的浓缩，因此菜单从业务角度而言它更加属于这些页面的公共需求，或者说菜单属于项目级别的需求，而非单个功能页面的需求。因此在传统的web管理系统里，我们常常采取在页面的顶部或者页面的左侧放置菜单，而流出大面积的右下的区间来放置功能性页面，因此对于项目里的每个功能性页面而言，在实际的展示中他们都会包含公共的菜单功能，而在前端开发领域里，我们会将那些很多页面共用的部分做到前端框架级别的开发，也就是系统的导航菜单这样的功能集成在前端框架里，一次开发，多页面进行复用。这么做的好处就是统一的功能只有一份代码，代码易于维护和升级，每个页面都使用同一套的公共的模块，对于每个页面的展示统一和规范就得到了有力的保障。

发明内容

鉴于现有技术的不足，本发明提供的浏览器数据可视化开发用于多页面联合展示的装置由菜单样式定义器、兼容单页面路由配置器、菜单导航路由配置器和子组件配置器组成；

菜单样式定义器负责定义用于多页面联合展示的菜单栏的样式，菜单栏的样式包括：菜单栏的背景图、菜单栏的字体及字体的大小和色彩、菜单栏的显示方式；菜单栏的显示方式包括菜单栏的隐藏方向和菜单栏的展示方式；

兼容单页面路由配置器用来配置与用于多页面联合展示的菜单栏同一级别显示的单页面的路由；例如：登录页面由兼容单页面路由配置器配置；

菜单导航路由配置器用来配置与用于多页面联合展示的菜单栏的下一级别显示的页面的路由即导航栏项目的路由，也是多页面联合展示的每个页面的路由，多页面联合展示的每个页面作为导航栏项目通过路由配置可以链接到的页面；

子组件配置器用来配置在多页面联合展示的菜单栏展开导航栏项目时用到的子组件的路由。

有益效果

本发明在多页面联合展示的情况下将菜单栏作为父级别显示元素，将其他多页面作为菜单栏子级别页面通过菜单导航路由配置器对导航栏项目的路由配置访问，避免了点击导航栏项目加载重复内容的问题，兼容单页面和子组件无需重复加载，提高了大屏系统多页面展示的加载效率。本发明的多页面联合展示的每个页面可以单独开发，通过本发明进行统一的路由配置即可完成整个项目的合成，使用简便，易于推广。

附图说明

图1是本发明的系统结构图；

图2是本发明的兼容单页面路由配置器和菜单导航路由配置器代码示例。

具体实施方式

参看图1，实现本发明提供的浏览器数据可视化开发用于多页面联合展示的装置由菜单样式定义器1、兼容单页面路由配置器2、菜单导航路由配置器3和子组件配置器4组成；

菜单样式定义器1负责定义用于多页面联合展示的菜单栏的样式，菜单栏的样式包括：菜单栏的背景图、菜单栏的字体及字体的大小和色彩、菜单栏的显示方式；菜单栏的显示方式包括菜单栏的隐藏方向和菜单栏的展示方式；

兼容单页面路由配置器2用来配置与用于多页面联合展示的菜单栏同一级别显示的单页面的路由；例如：登录页面由兼容单页面路由配置器2配置；

菜单导航路由配置器3用来配置与用于多页面联合展示的菜单栏的下一级别显示的页面的路由即导航栏项目的路由，也是多页面联合展示的每个页面的路由，多页面联合展示的每个页面作为导航栏项目通过路由配置可以链接到的页面；

子组件配置器4用来配置在多页面联合展示的菜单栏展开导航栏项目时用到的子组件的路由。

实施例一

参看图2，这个代码里有个<router-view></router-view>组件，这个组件就是兼容单页面路由配置器2，<router-view></router-view>组件是为了让一个浏览器数据可视化开发用于多页面联合展示的装置兼容有多个单页面的情况，例如：最常见的是登录页面。

图2代码里p标签下的router-link标签可以理解为超链接或者按钮，router-link标签可以用来实现菜单导航路由配置器3所配置的导航栏项目：菜单一、菜单二等等。

Claims (1)

1.浏览器数据可视化开发用于多页面联合展示的装置，其特征在于由菜单样式定义器、兼容单页面路由配置器、菜单导航路由配置器和子组件配置器组成；

菜单样式定义器负责定义用于多页面联合展示的菜单栏的样式，菜单栏的样式包括：菜单栏的背景图、菜单栏的字体及字体的大小和色彩、菜单栏的显示方式；菜单栏的显示方式包括菜单栏的隐藏方向和菜单栏的展示方式；

兼容单页面路由配置器用来配置与用于多页面联合展示的菜单栏同一级别显示的单页面的路由；例如：登录页面由兼容单页面路由配置器配置；

菜单导航路由配置器用来配置与用于多页面联合展示的菜单栏的下一级别显示的页面的路由即导航栏项目的路由，也是多页面联合展示的每个页面的路由，多页面联合展示的每个页面作为导航栏项目通过路由配置可以链接到的页面；

子组件配置器用来配置在多页面联合展示的菜单栏展开导航栏项目时用到的子组件的路由。

Images