一种基于WEB的网页自动布局方法及装置与流程

本发明实施例涉及网页前端设计技术领域，具体而言，涉及一种基于web的页面自动布局方法及装置。

背景技术：

在web网页的前端设计中，会涉及到图表的编排。简洁、整齐的页面布局会在一定程度上吸引潜在客户，因此，对web网页进行布局显得尤为重要。web网页中能够展现的内容繁多，其中，作为最能直观的信息显示形式，图表在web网页中占据相当大的比重，因此，如何在web网页中进行图表的编排布局成为网页前端设计的重点。现有的在web网页中对图表进行编排布局的方法大多操作繁琐、耗费大量的时间和精力。

技术实现要素：

有鉴于此，本发明提供了一种基于web的网页自动布局方法及装置，能够实现图表在网页中的自动、智能布局，操作简易、节省了时间和精力。

本发明实施例提供了一种基于web的网页自动布局方法，应用于与服务器通信连接的客户端，所述方法包括：

从所述服务器获取多个图表并统计所述多个图表的数量；

检测是否有用于实现自动布局的指令输入，当检测到有用于实现自动布局的指令输入成功时，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页。

可选地，所述数量为n，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页的步骤，包括：

若n为奇数，统计优先级为第一优先级或第二优先级的图表的数量总和m；其中，折线图的优先级定义为第一优先级，横坐标数量超过设定值的图表的优先级定义为第二优先级；

若m＝0，将所述网页划分为n+1个子区域，根据所述子区域的尺寸对各所述图表进行尺寸调整，针对每个完成尺寸调整的图表，将该图表放置于一子区域，获得一张完成图表布局的网页；

若m＝1，将所述网页划分为n+1个子区域，将所述优先级为第一优先级或第二优先级的图表放置于n+1个子区域中的任意一个子区域并铺满该子区域所在行；根据所述子区域的尺寸对其他n-1个图表进行尺寸调整，将其他n-m个完成尺寸调整的图表对应放置于剩余的n-1个子区域，获得一张完成图表布局的网页；

若m>1，将所述网页划分为n+1+m个子区域，分别将优先级为第一优先级或第二优先级的图表放置于n+1+m个子区域中的任意一个子区域并铺满该子区域所在行，其中，每个优先级为第一优先级或第二优先级的图表不同行；根据所述子区域的尺寸对其他n-m个图表进行尺寸调整，将其他n-m个完成尺寸调整的图表对应放置于剩余的n+1个子区域，获得一张完成图表布局的网页。

可选地，所述数量为n，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页的步骤，包括：

若n为偶数，将所述网页划分为n个子区域；

根据所述子区域的尺寸对各所述图表进行尺寸调整；

针对每个完成尺寸调整的图表，将该图表放置于一子区域，获得一张完成图表布局的网页。

可选地，所述方法还包括：

获得针对完成图表布局的网页中的一图表的拖拽指令；其中，被拖拽的图表定义为目标图表；

根据所述拖拽指令将所述目标图表拖拽至指定子区域；

判断所述目标图表的优先级是否为第一优先级或第二优先级，若所述优先级为所述第一优先级或所述第二优先级，将所述目标图表铺满所述指定子区域的所在行，若所述优先级既不为所述第一优先级也不为所述第二优先级，将所述目标图表放置于所述指定子区域；其中，折线图的优先级定义为第一优先级，横坐标数量超过设定值的图表的优先级定义为第二优先级。

可选地，所述方法还包括：

获取用于修改所述设定值的修改指令，根据所述修改指令对所述设定值进行修改。

本发明实施例还提供了一种基于web的网页自动布局装置，应用于与服务器通信连接的客户端，所述装置包括：

图表获取模块，用于从所述服务器获取多个图表并统计所述多个图表的数量；

网页布局模块，用于检测是否有用于实现自动布局的指令输入，当检测到有用于实现自动布局的指令输入成功时，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页。

可选地，所述数量为n，所述网页布局模块根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页，具体包括：

若n为奇数，统计优先级为第一优先级或第二优先级的图表的数量总和m；其中，折线图的优先级定义为第一优先级，横坐标数量超过设定值的图表的优先级定义为第二优先级；

若m＝0，将所述网页划分为n+1个子区域，根据所述子区域的尺寸对各所述图表进行尺寸调整，针对每个完成尺寸调整的图表，将该图表放置于一子区域，获得一张完成图表布局的网页；

若m＝1，将所述网页划分为n+1个子区域，将所述优先级为第一优先级或第二优先级的图表放置于n+1个子区域中的任意一个子区域并铺满该子区域所在行；根据所述子区域的尺寸对其他n-1个图表进行尺寸调整，将其他n-m个完成尺寸调整的图表对应放置于剩余的n-1个子区域，获得一张完成图表布局的网页；

若m>1，将所述网页划分为n+1+m个子区域，分别将优先级为第一优先级或第二优先级的图表放置于n+1+m个子区域中的任意一个子区域并铺满该子区域所在行，其中，每个优先级为第一优先级或第二优先级的图表不同行；根据所述子区域的尺寸对其他n-m个图表进行尺寸调整，将其他n-m个完成尺寸调整的图表对应放置于剩余的n+1个子区域，获得一张完成图表布局的网页。

可选地，所述数量为n，所述网页布局模块根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页

若n为偶数，将所述网页划分为n个子区域；

根据所述子区域的尺寸对各所述图表进行尺寸调整；

针对每个完成尺寸调整的图表，将该图表放置于一子区域，获得一张完成图表布局的网页。

可选地，所述网页布局模块还用于：

获得针对完成图表布局的网页中的一图表的拖拽指令；其中，被拖拽的图表定义为目标图表；

根据所述拖拽指令将所述目标图表拖拽至指定子区域；

判断所述目标图表的优先级是否为第一优先级或第二优先级，若所述优先级为所述第一优先级或所述第二优先级，将所述目标图表铺满所述指定子区域的所在行，若所述优先级既不为所述第一优先级也不为所述第二优先级，将所述目标图表放置于所述指定子区域；其中，折线图的优先级定义为第一优先级，横坐标数量超过设定值的图表的优先级定义为第二优先级。

可选地，所述网页布局模块还用于：

获取用于修改所述设定值的修改指令，根据所述修改指令对所述设定值进行修改。本发明实施例还提供了一种电子设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述的网页自动布局方法。

本发明实施例还提供了一种计算机可读存储介质，所述可读存储介质包括计算机程序，所述计算机程序运行时控制所述可读存储介质所在电子设备执行上述的网页自动布局方法。

有益效果

本发明实施例提供的网页自动布局方法及装置，能够根据图表的数量将多个图表在网页上进行自动布局，操作简易，无需人工进行手动拖拽和放大，节省了大量时间和精力。

进一步地，通过对图表数量的奇偶性进行分析，并结合图表的优先级对每个图表的位置和缩放进行调整，能够保证不同优先级的图表的最佳显示形式，整个分析过程由客户端执行，无需人工操作，节省了时间和精力，也实现了图表的智能化布局。

进一步地，还可以对已布局好的网页中的图表进行调整和简单拖拽，在调整和拖拽时，客户端也会根据被拖拽图表的优先级选择合适的显示形式进行显示，提高了网页自动布局的灵活性。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例所提供的一种电子设备10的方框示意图。

图2为本发明实施例所提供的一种网页自动布局方法的流程图。

图3为一实施方式中图2所示的步骤s23包括的子步骤的示意图。

图4为本发明实施例所提供的一种网页自动布局的第一示意图。

图5为本发明实施例所提供的一种网页自动布局的第二示意图。

图6为本发明实施例所提供的一种网页自动布局的第三示意图。

图7为一实施方式中图2所示的步骤s23包括的另一子步骤的示意图。

图8为本发明实施例所提供的一种网页自动布局的第四示意图。

图9为本发明实施例所提供的一种网页自动布局的第五示意图。

图10为本发明实施例所提供的一种网页自动布局的第六示意图。

图11为本发明实施例所提供的一种网页自动布局装置20的模块框图。

图标：

10-电子设备；11-存储器；12-处理器；13-网络模块；

20-网页自动布局装置；21-图表获取模块；22-网页布局模块。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例只是本发明的一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

发明人经调查发现，现有的在网页中对图表进行编排布局的方法大多操作繁琐、耗费大量的时间和精力。例如，现有技术大多采用人工操作，技术人员根据网页的大小将图表进行缩放，然后拖拽至网页上进行布局编排，这种方式效率较低，且占用了工作人员大量的时间和精力。

以上现有技术中的方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本发明实施例针对上述问题所提出的解决方案，都应该是发明人在本发明过程中对本发明做出的贡献。

基于上述研究，本发明实施例提供了一种网页自动布局方法及装置，能够实现图表在网页中的自动、智能布局，操作简易、节省了时间和精力。

图1示出了本发明实施例所提供的一种电子设备10的方框示意图。本发明实施例中的电子设备10可以为具有数据存储、传输、处理功能的服务端，如图1所示，电子设备10包括：存储器11、处理器12、网络模块13和网页自动布局装置20。

存储器11、处理器12和网络模块13之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件互相之间可以通过一条或多条通讯总线或信号线实现电性连接。存储器11中存储有网页自动布局装置20，所述网页自动布局装置20包括至少一个可以软件或固件(firmware)的形式储存于所述存储器11中的软件功能模块，所述处理器12通过运行存储在存储器11内的软件程序以及模块，例如本发明实施例中的网页自动布局装置20，从而执行各种功能应用以及数据处理，即实现本发明实施例中的网页自动布局方法。

其中，所述存储器11可以是，但不限于，随机存取存储器(randomaccessmemory，ram)，只读存储器(readonlymemory，rom)，可编程只读存储器(programmableread-onlymemory，prom)，可擦除只读存储器(erasableprogrammableread-onlymemory，eprom)，电可擦除只读存储器(electricerasableprogrammableread-onlymemory，eeprom)等。其中，存储器11用于存储程序，所述处理器12在接收到执行指令后，执行所述程序。

所述处理器12可能是一种集成电路芯片，具有数据的处理能力。上述的处理器12可以是通用处理器，包括中央处理器(centralprocessingunit，cpu)、网络处理器(networkprocessor，np)等。可以实现或者执行本发明实施例中公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

网络模块13用于通过网络建立电子设备10与其他通信终端设备之间的通信连接，实现网络信号及数据的收发操作。上述网络信号可包括无线信号或者有线信号。

可以理解，图1所示的结构仅为示意，电子设备10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

本发明实施例还提供一种计算机可读存储介质，所述可读存储介质包括计算机程序。所述计算机程序运行时控制所述可读存储介质所在电子设备10执行下面的网页自动布局方法。

图2示出了本发明实施例所提供的一种网页自动布局方法的流程图。所述方法有关的流程所定义的方法步骤应用于电子设备10，可以由所述处理器12实现。其中，该电子设备10可以理解为客户端，该电子设备10与一服务器通信连接，下面将对图2所示的具体流程进行详细阐述：

步骤s21，从服务器获取多个图表并统计多个图表的数量n。

客户端与服务器之间通信连接，能够进行数据交互，例如，客户端可以从服务器调用多个图表，然后统计多个图表的数量。在本实施例中，多个图表的数量定义为n。

步骤s22，检测是否有用于实现自动布局的指令输入。

在本实施例中，可以通过鼠标或者其他设备触发自动布局的指令。例如，该客户端可以外接鼠标，客户端设置有显示屏，技术人员可以通过鼠标点击显示屏中的按钮实现指令的输入，也可以通过触点显示屏中的按钮实现指令的输入。

若客户端检测到有用于实现自动布局的指令输入成功，转向步骤s23。

若客户端没有检测到有用于实现自动布局的指令输入成功，不执行任何操作。

步骤s23，根据数量n将多个图表在一网页上进行布局，获得一张完成图表布局的网页。

可以理解，用于实现自动布局的指令输入为“一键式”，也就是说，当客户端检测到该指令输入成功时，就能够启动图表在网页上的自动布局过程。

请结合参阅图3，本实施例中通过步骤s231、步骤s232、步骤s233和步骤s234列举了步骤s23的其中一种实现方式。

步骤s231，若n为奇数，统计优先级为第一优先级和第二优先级的图表的数量总和m。

可以理解，图3所示的子步骤以n为奇数的情况进行考虑。

图表的类型繁多，每一种类型的图表所表达出的信息的侧重点也不相同，因此，不能将所有图表机械地进行在网页中进行布局，应该充分考虑每个图表的类型，然后根据图表的类型选择最能够反映图表信息的显示方式。

在本实施例中，会根据图表的类型设置不同的优先级，以便为网页布局提供参考。例如，将类型为折线图的图表的优先级定义为第一优先级，将横坐标超过设定值的图表的优先级定义为第二优先级。可以理解，第一优先级和第二优先级的图表需要占用的横向面积较大，因此，在网页布局时需要充分考虑这些图表的横向面积占比。可选地，客户端可以对设定值进行修改，例如，获取用于修改设定值的修改指令，根据修改指令对设定值进行修改。

步骤s232，若m＝0，将网页划分为n+1个子区域，根据子区域的尺寸对各图表进行尺寸调整，针对每个完成尺寸调整的图表，将该图表放置于一子区域，获得一张完成图表布局的网页。

具体地，若n个图表中不存在第一优先级或第二优先级的图表，此时会将网页划分为n+1个子区域。应当理解，如图4所示，网页x方向上的延伸长度有限，但是在y方向上可以无限延伸，x方向和y方向互相垂直，在划分子区域时，应当根据适当的比例进行划分，例如，每个子区域的尺寸比例可以为(16：10)。根据(16：10)的尺寸比例对n个图表中的每个图表进行尺寸调整，然后再放置于每个子区域中，如图4所示，每个子区域中放置有一图表。

又例如，取n为5，则子区域有6个，子区域a1放置图表f1、子区域a2放置图表f2、子区域a3放置图表f3、子区域a4放置图表f4、子区域a5放置图表f5、子区域a6闲置。

可以理解，由于n个图表的优先级都不是第一优先级或者第二优先级，因此(16：10)可以很好地展示图表中的内容，不需要做任何调整。

步骤s233，若m＝1，将网页划分为n+1个子区域，将优先级为第一优先级或第二优先级的图表放置于n+1个子区域中的任意一个子区域并铺满该子区域所在行，根据所述子区域的尺寸对其他n-1个图表进行尺寸调整，将其他n-m个完成尺寸调整的图表对应放置于剩余的n-1个子区域，获得一张完成图表布局的网页。

取n为5，则网页被划分为6个子区域a1、a2、a3、a4、a5和a6。图表f1、f2、f3、f4和f5中，f3为折线图。

将f3放置于a1、a2、a3、a4、a5和a6子区域中的任意一个子区域并铺满该子区域所在行，例如，将f3放置于a1，并铺满a1所在行(将a1和a2铺满)，可以理解，此时f3的尺寸为(32：10)，如此，能够很好地反映折线图的趋势走向。

进一步地，将f1、f2、f4和f5按照(16：10)的尺寸进行调整，然后再放置于a3、a4、a5和a6中，其中，f1、f2、f4和f5随机放置于a3、a4、a5和a6，完成这种情况下的网页布局的示意图如图5所示。

步骤s234，若m>1，将网页划分为n+1+m个子区域，分别将优先级为第一优先级或第二优先级的图表放置于n+1+m个子区域中的任意一个子区域并铺满该子区域所在行，根据子区域的尺寸对其他n-m个图表进行尺寸调整，将其他n-m个完成尺寸调整的图表对应放置于剩余的n+1个子区域，获得一张完成图表布局的网页。

可以理解，每个优先级为第一优先级或第二优先级的图表不同行。

取n＝7，m＝2，则网页被划分为10个子区域a1～a10。图表f1～f7中，f3为折线图，f6为横坐标超过设定值的柱状图。

又例如，将f3放置于a5并铺满a5所在行(将a5和a6铺满)，将f6放置于a8并铺满a8所在行(将a7和a8铺满)，可以理解，此时f3和f6的尺寸均为(32：10)，如此，能够很好地反映图表中包含的信息。

进一步地，将f1、f2、f4、f5和f7按照(16：10)的尺寸进行调整，然后再放置于a1、a2、a3、a4、a9和a10中，其中，f1、f2、f4、f5和f7随机放置于a1、a2、a3、a4、a9和a10中，完成这种情况下的网页布局的示意图如图6所示。

可以理解，当n为奇数时，会优先考虑第一优先级和第二优先级的图表的布局，这样能够保证整个网页的整洁度，也能够保证第一优先级和第二优先级的图表能够充分反映出所包含的信息概况，例如，将折线图铺满一行，能够更好地分析趋势走向，将横坐标较多的柱状图铺满一行，能够避免多个横坐标之间空间太小造成显示困难，如此，能够实现在网页中编排布局图表的智能化。

请结合参阅图7，本实施例中通过步骤s235、步骤s236、步骤s237和步骤s238列举了步骤s23的另一种实现方式。

可以理解，图7所示的子步骤以n为偶数的情况进行考虑。

步骤s235，将网页划分为n个子区域。

步骤s236，根据子区域的尺寸对各图表进行尺寸调整。

在本实施例中，子区域的尺寸可以为(16：10)

步骤s237，针对每个完成尺寸调整的图表，将该图表放置于一子区域，获得一张完成图表布局的网页。

例如，取n＝4，如图8所示，子区域为a1、a2、a3和a4。将完成尺寸调整的图表f1、f2、f3和f4随机放置于a1、a2、a3和a4。

步骤s238，获得针对完成图表布局的网页中的一图表的拖拽指令，根据拖拽指令将目标图表拖拽至指定子区域并进行显示。

可以理解，当n为偶数的时候，为了页面的整洁性，简化客户端的处理过程，在将图表放置于子区域之前不会进行优先级的判定，也就是说，无论是折线图还是多横坐标的柱状图，都一并以(16：10)进行尺寸调整，然后放入子区域中。

但是折线图和多横坐标的柱状图可能由于尺寸原因显示不清楚，因此需要对折线图或柱状图进行二次调整。

请继续参阅图8，子区域a1中放置有图表f1、子区域a2中放置有图表f2、子区域a3中放置有图表f3、子区域a4中放置有图表f4。获得对f2的拖拽指令，将f2拖拽到a3，相应地，f3和f4朝y方向顺移一行，此时子区域增加为6个，进一步地，客户端会判断f2的优先级是否为第一优先级或第二优先级，若f2的优先级为第一优先级或第二优先级，将f2铺满a3所在行(将a3和a4铺满)，如图9所示，若f2的优先级既不为第一优先级也不为第二优先级，直接将f2放置于a3，如图10所示。如此，能够实现网页的灵活、智能布局。

可以理解，该网页自动布局方法不需要人工进行大龄的手动拖拽和缩放，能够根据图表的数量和类型进行自动布局，进而实现网页布局的智能化，提高网页布局的灵活性。

在上述基础上，如图11所示，本发明实施例提供了一种网页自动布局装置20，所述网页自动布局装置20包括：图表获取模块21和网页布局模块22。

图表获取模块21，用于从所述服务器获取多个图表并统计所述多个图表的数量；

由于图表获取模块21和图2中步骤s21的实现原理类似，因此在此不作更多说明。

网页布局模块22，用于检测是否有用于实现自动布局的指令输入，当检测到有用于实现自动布局的指令输入成功时，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页。

由于网页布局模块22和图2中步骤s22的实现原理类似，因此在此不作更多说明。

综上，本发明实施例所提供的一种基于web的网页自动布局方法及装置，能够实现图表在网页中的自动、智能布局，操作简易、节省了时间和精力。

在本发明实施例所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备10，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。