一种基于WEB的网页自动布局方法及装置制造方法及图纸

本发明专利技术实施例涉及网页前端设计技术领域，具体而言，涉及一种基于WEB的网页自动布局方法及装置，该方法应用于与服务器通信连接的客户端，该方法包括：从所述服务器获取多个图表并统计所述多个图表的数量，检测是否有用于实现自动布局的指令输入，当检测到有用于实现自动布局的指令输入成功时，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页。如此，能够实现图表在网页中的自动、智能布局，操作简易、节省了时间和精力。

【技术实现步骤摘要】
一种基于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.一种基于WEB的网页自动布局方法，其特征在于，应用于与服务器通信连接的客户端，所述方法包括：从所述服务器获取多个图表并统计所述多个图表的数量；检测是否有用于实现自动布局的指令输入，当检测到有用于实现自动布局的指令输入成功时，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页。

【技术特征摘要】
1.一种基于WEB的网页自动布局方法，其特征在于，应用于与服务器通信连接的客户端，所述方法包括：从所述服务器获取多个图表并统计所述多个图表的数量；检测是否有用于实现自动布局的指令输入，当检测到有用于实现自动布局的指令输入成功时，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页。2.根据权利要求1所述的网页自动布局方法，其特征在于，所述数量为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个子区域，获得一张完成图表布局的网页。3.根据权利要求1所述的网页自动布局方法，其特征在于，所述数量为n，根据所述数量将所述多个图表在一网页上进行布局，获得一张完成图表布局的网页的步骤，包括：若n为偶数，将所述网页划分为n个子区域；根据所述子区域的尺寸对各所述图表进行尺寸调整；针对每个完成尺寸调整的图表，将该图表放置于一子区域，获得一张完成图表布局的网页。4.根据权利要求3所述的网页自动布局方法，其特征在于，所述方法还包括：获得针对完成图表布局的网页中的一图表的拖拽指令；其中，被拖拽的图表定义为目标图表；根据所述拖拽指令将所述目标图表拖拽至指定子区域；判断所述目标图表的优先级是否为第一优先级或第二优先级，若所述优先级为所述第一优先级或所述第二优先级，将所述目标图表铺满所述指定子区域的所在行，若所述优先级既不为所述第一优先级也不为所述第二优先级，将所述目标图表放置于所述指定子区域；其中，折线图的优先级定义为第一优先级，横坐标数量超过设定值的图表的优先级定义为第二优先级。5.根据权利要求4所述的网页自动布局方法，其特征在于，所述方法还包括：获取用于修改所述设定值的修改指令，根据所述修改指令对所述设定值进行修改。6.一种基于WEB的网页自动布局装...

【专利技术属性】
技术研发人员：赖文，李晓刚，杨星，
申请(专利权)人：成都四方伟业软件股份有限公司，
类型：发明
国别省市：四川,51