CN104281454A - 一种基于flex多层次布局的方法 - Google Patents

Abstract

本发明公开了一种基于flex多层次布局的方法，该方法通过设置flex图表的顶层，创建新的图层用于显示flex信息，然后设置flex顶层和子图层的关系，设置父级图层和子级图层的关系，双击进入下一图层或者返回上一图层，显示flex图表信息。通过多层次布局，可以在同一个flex页面显示不同的flex图表信息，通过双击不同位置的图标，可以进入flex的下一层页面，也可以返回flex的上一层页面，无需跳转到新的页面显示，方便用户查看flex图表信息。

Description

一种基于flex多层次布局的方法

技术领域

本发明涉及互联网技术领域，尤其涉及一种基于flex多层次布局的方法。

背景技术

报表就是用表格、图表等格式来动态显示数据，报表的主要特点是数据动态化，格式多样化，并且实现报表数据和报表格式的完全分离，用户可以只修改数据，或者只修改格式。利用报表可以很直观、明了的查看数据信息，常见的报表格式有柱状图、饼形图、曲线图等。因为报表查看数据的直观性，所以现在很多网站和应用系统都有用到报表，但是有些报表是对浏览器和操作系统是有要求的，有些报表只能在windows操作系统下运行，无法做到跨平台运行；有些报表只能在IE浏览器运行，并不能很好的兼容其它浏览器，而flex图表却可以跨平台和跨浏览器运行。大部分报表工具在同一层次只能显示一个报表，或者不能对报表进行操作，而flex图表可以做到这一点，通过flex多层次布局，可以在同一层次显示多种flex报表，还可以对报表进行操作。

发明内容

本发明的目的是为了克服现有技术的缺陷，提供一种基于flex多层次布局的方法，包括：

s1.设置flex图表的顶层；

s2.创建新的图层用于显示flex信息；

s3.设置flex顶层和子图层的关系；

s4.设置父级图层和子级图层的关系；

s5.双击进入下一图层或者返回上一图层；

s6.显示flex图表信息。

本发明技术方案带来的有益效果：

本发明技术方案通过利用flex的多层次布局解决同一个flex页面显示多种类型flex图表信息的问题。通过双击操作，可以进入上一图层或者进入子图层，这样就可以在同一个flex容器显示多张flex图表，在多张flex报表之间进行切换，可以很方便的查看图表数据，还可以通过双击操作弹出一个查询列表，显示图表的详细信息。通过多层次布局将多张flex图表集合在一起并在同一个功能模块显示，而不是一个功能模块显示一张flex图表，加深了用户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本发明的方法流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的主要创新点在于利用flex的SubNetwork层次切换原理对flex进行多层次布局。首先，设置好flex图表的顶层，给顶层设置一个ID以及相关信息，然后在创建一个新的图层用于显示子图层的信息，将子图层的父级引用指向顶层，这样双击的时候就会根据图层的子级进入下一图层，根据图层的父级返回上一个图层，这样就可以在同一个容器层显示多个flex图表信息，还可以在子图层创建属于自己的子图层，将属于自己的子图层的父级引用指向自己，这样就可以在同一个容器层创建多个子图层，层层进行调用。当触发“双击”事件时，首先会获取当前图层的信息，判断当前图层是属于哪一个图层，当前图层的父级图层是什么，当前图层的子图层是什么，然后根据父级图层返回上一图层，根据子级图层进入下一个图层，如果当前图层没有父级图层或子级图层则不进行跳转，留在当前图层，还可以指定双击图标时弹出一个窗口显示当前图标的信息，当双击图层的空白处时就会返回上一图层页面。

如图1所示为本发明的方法流程图，其具体实现步骤如下：

(1)设置flex图表的顶层；

(2)创建新的图层用于显示flex信息；

(3)设置flex顶层和子图层的关系；

(4)设置父级图层和子级图层的关系；

(5)双击进入下一图层或者返回上一图层；

(6)显示flex图表信息。

通过本发明解决了在同一个flex页面显示多种类型flex图表信息的问题，通过多层次布局，可以在同一个flex页面显示不同的flex图表信息，通过双击不同位置的图标，可以进入flex的下一层页面，也可以返回flex的上一层页面，无需跳转到新的页面显示，方便用户查看flex图表信息。

此外，本发明还可以一个容器显示一个flex图层，当有多个图层是就要定义多个容器来显示，不能对图层进行操作，还需要多个模块来显示flex图表，当flex图表过多时要进行过多的页面跳转，不利于用户查看数据，降低用户体验。

以上对本发明实施例所提供的一种基于flex多层次布局的方法进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (7)

1.一种基于flex多层次布局的方法，其特征在于，包括：

s1.设置flex图表的顶层；

s2.创建新的图层用于显示flex信息；

s3.设置flex顶层和子图层的关系；

s4.设置父级图层和子级图层的关系；

s5.双击进入下一图层或者返回上一图层；

s6.显示flex图表信息。

2.根据权利要求1所述的方法，其特征在于，还能够给顶层设置一个ID及相关信息。

3.根据权利要求1所述的方法，其特征在于，创建新的图层用于显示子图层的信息，将子图层的父级引用指向顶层，这样双击的时候就会根据图层的子级进入下一图层，根据图层的父级返回上一个图层，能够在同一个容器层显示多个flex图表信息。

4.根据权利要求3所述的方法，其特征在于，还能够在子图层创建属于自己的子图层，将属于自己的子图层的父级引用指向自己，在同一个容器层创建多个子图层，层层进行调用。

5.根据权利要求1或3或4所述的方法，其特征在于，当触发“双击”事件时，首先会获取当前图层的信息，判断当前图层是属于哪一个图层，当前图层的父级图层是什么，当前图层的子图层是什么，然后根据父级图层返回上一图层，根据子级图层进入下一个图层；如果当前图层没有父级图层或子级图层则不进行跳转，留在当前图层。

6.根据权利要求5所述的方法，其特征在于，还能够指定双击图标时弹出一个窗口显示当前图标的信息，当双击图层的空白处时就会返回上一图层页面。

7.根据权利要求1所述的方法，其特征在于，本发明还能够一个容器显示一个flex图层，当有多个图层是就要定义多个容器来显示，不能对图层进行操作，还需要多个模块来显示flex图表，当flex图表过多时要进行过多的页面跳转，但不利于用户查看数据，降低用户体验。