本申请实施例公开了在网页页面上展示占比图的方法和装置。该方法包括：在网页页面上显示占比图；其中，所述占比图中的各占比区块按照占比数的数值的大小顺序以线性方式排列，且，所述占比区块的大小与占比数的数值的大小成正比例关系。根据本申请实施例，不仅无需网站服务器确定环绕起点，节约了网站服务器的计算资源，而且，也使阅读者更容易找到阅读的起点。
【技术实现步骤摘要】
本申请涉及计算机应用领域，特别是涉及在网页页面上展示占比图的方法和装 置。
技术介绍
在网络信息时代，用户通过浏览网页页面可以获取到各种各样的信息。占比图作 为网页页面中的一个页面元素，以直观的图形化方式表达不同属性之间的比例信息。如，各 品牌手机所拥有的市场份额的比例。 目前，比较常见的一种占比图是扇形占比图，S卩，用可构成同一个圆的不同大小的 扇形表示占比图中的各占比区块，并且，占比数的数值越大，占比区块对应的扇形的面积越 大，如图1所示，其展示了中国互联网用户使用的各浏览器的占比。 但是，本申请的专利技术人在研究中发现，针对图1所示的扇形占比图，由于各占比区 块采用环绕的方式排列，因此，需要后台的网站服务器先在网页上确定一个合适的环绕起 点，以便从该环绕起点开始对各占比区块进行排列。但是，确定环绕起点的过程本身需要消 耗网站服务器一定的计算资源，会造成一定程度的资源浪费。另外，因此，对于阅读者来说， 这种排列方式通常也不容易找到阅读的起点。
技术实现思路
为了解决上述技术问题，本申请实施例提供了在网页页面上展示占比图的方法和 装置，不仅节约网站服务器的计算资源，也方便阅读者更容易找到阅读的起点。 本申请实施例公开了如下技术方案： -种在网页页面上展示占比图的方法，包括： 在网页页面上显示占比图； 其中，所述占比图中的各占比区块按照占比数的数值的大小顺序以线性方式排 列，且，所述占比区块的大小与占比数的数值的大小成正比例关系。 优选的，所述占比图中的各占比区块为形状相同但大小不同的平行四边形，由多 个占比区块构成的所述占比图为平行四边形；或者，所述占比图中的各占比区块为形状相 同但大小不同的梯形，由多个占比区块构成的所述占比图为梯形。 进一步优选的，所述平行四边形为矩形。 优选的，所述占比图中的多个占比区块按照占比数的数值的大小顺序依次沿纵向 或横向排列。 优选的，所述方法还包括： 识别用户是否对所述占比图中的任意一个占比区块进行了指向性操作； 如果是，将所述指向性操作针对的占比区块进行放大。 优选的，所述方法还包括： 在将所述指向性操作针对的占比区块进行放大之前，判断所述指向性操作针对的 占比区块的占比数的数值是否小于或等于预设的占比阈值； 则所述将所述指向性操作针对的占比区块进行放大具体为： 如果所述指向性操作针对的占比区块的占比数的数值小于或等于预设的占比阈 值，将所述指向性操作针对的占比区块进行放大。 优选的，所述方法还包括： 识别用户是否对放大的占比区块取消了指向性操作； 如果是，将所述放大的占比区块恢复至原始大小。 优选的，所述将所述指向性操作针对的占比区块进行放大，包括： 将所述指向性操作针对的占比区块向上增加纵向高度；和 / 或， 将所述指向性操作针对的占比区块向下增加纵向高度。 优选的，在所述各占比区块上显示有占比数和属性信息，且，占比数的数值越大， 所述占比数的显示字体越大。 优选的，在所述各占比区块上还显示有除属性信息之外的其它描述性文字。 优选的，所述在网页页面上显示占比图，包括： 封装占比图中各占比区块的超文本标记语言HTML片段，所述HTML片段包含有占 比区块的属性信息、占比数和纵向高度； 将占比图中各占比区块的HTML片段进行组装； 将组装后的HTML片段添加到网页页面中，以使得占比图显示在网页页面上。 -种在网页页面上展示占比图的装置，包括： 显示模块，用于在网页页面上显示占比图； 其中，所述占比图中的各占比区块按照占比数的数值的大小顺序以线性方式排 列，且，所述占比区块的大小与占比数的数值的大小成正比例关系。 优选的，所述占比图中的各占比区块为形状相同但大小不同的平行四边形，由多 个占比区块构成的所述占比图为平行四边形；或者，所述占比图中的各占比区块为形状相 同但大小不同的梯形，由多个占比区块构成的所述占比图为梯形。 进一步优选的，所述平行四边形为矩形。 优选的，所述占比图中的各占比区块按照占比数的数值的大小顺序依次沿纵向或 横向排列。 优选的，所述装置还包括： 第一识别模块，用于识别用户是否对所述占比图中的任意一个占比区块进行了指 向性操作； 放大模块，用于如果识别用户对所述占比图中的一个占比区块进行了指向性操 作，将所述指向性操作针对的占比区块进行放大显示。 优选的，所述装置还包括： 判断模块，用于在所述放大模块将所述指向性操作针对的占比区块进行放大之 前，判断所述指向性操作针对的占比区块的占比数的数值是否小于或等于预设的占比阈 值； 所述放大模块具体用于，如果所述指向性操作针对的占比区块的占比数的数值小 于或等于预设的占比阈值，将所述指向性操作针对的占比区块进行放大。 优选的，所述装置还包括： 第二识别模块，用于识别用户是否对放大的占比区块取消了指向性操作； 缩小模块，用于如果识别用户对放大的占比区块取消了指向性操作，将所述放大 的占比区块恢复至原始大小。优选的，所述放大模块包括： 向上放大子模块，用于将所述指向性操作针对的占比区块向上增加纵向高度；和 / 或， 向下放大子模块，用于将所述指向性操作针对的占比区块向下增加纵向高度。 优选的，在所述各占比区块上显示有占比数和属性信息，且，占比数的数值越大， 所述占比数的显示字体越大。 优选的，在所述各占比区块上还显示有除属性信息之外的其它描述性文字。 优选的，所述显示模块包括： 封装子模块，用于封装占比图中各占比区块的超文本标记语言HTML片段，所述 HTML片段包含有占比区块的属性信息、占比数和纵向高度； 组装子模块，用于将占比图中各占比区块的HTML片段进行组装； 添加子模块，用于将组装后的HTML片段添加到网页页面中，以使得占比图显示在 网页页面上。 由上述实施例可以看出，与现有技术相比，本申请的优点在于： 将占比图的形状从扇形改为非扇形（S卩，占比图中各占比区块按照占比数的数值 的大小以线性方式排列，且，占比区块的大小与占比数的数值的大小成正比例关系）。由于 占比区块是以线性方式排列的，因此，无需网站服务器确定环绕起点，节约了网站服务器的 计算资源，同时，也方便阅读者更容易找到阅读的起点。【附图说明】 为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可 以根据这些附图获得其他的附图。 图1为现有技术中扇形占比图的一种展现效果图； 图2为本申请一个实施例提供的一种在网页页面上展示占比图的方法的流程图； 图3为本申请中矩形占比图的一种初始展现效果图； 图4为本申请另一个实施例提供的一种在网页页面上展示占比图的方法的流程 图；图5为本申请中矩形占比图的一种放大展示效果图； 图6为本申请另一个实施例提供的一种在网页页面上展示占比图的方法的流程 图；图7为本申请另一个实施例提供的将占比图显示在网页页面上的一种实现方法 的流程图； 图8为本申请一个实施例提供的一种在网页页面上展示占比图的装置的结构框 图； 当前第1页1 2 3 4 本文档来自技高网...
【技术保护点】
一种在网页页面上展示占比图的方法，其特征在于，包括：在网页页面上显示占比图；其中，所述占比图中的各占比区块按照占比数的数值的大小顺序以线性方式排列，且，所述占比区块的大小与占比数的数值的大小成正比例关系。
【技术特征摘要】
【专利技术属性】
技术研发人员：张悦，杨昌源，耿霄，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。