[发明专利]一种基于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个子区域；

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

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

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

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

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