CN109445782A - 一种环状占比图的生成方法及装置 - Google Patents

Abstract

本公开提供了一种环状占比图的生成方法及装置，该方法包括：根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一结束弧度，确定当前待绘制占比区块在环状占比图的开始弧度和结束弧度；依据环状占比图的圆环半径和圆心位置以及开始弧度和结束弧度，确定当前待绘制占比区块对应的两个半圆的属性信息；依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的两个半圆的属性信息，确定当前待绘制占比区块位于两个半圆之间的圆环的属性信息；依据当前待绘制占比区块的半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图直至得到环状占比图。本公开实施例增加了环状占比图的展示形式。

Description

一种环状占比图的生成方法及装置

技术领域

本公开涉及用户界面(UI，User Interface)设计技术领域，具体而言，涉及一种环状占比图的生成方法及装置。

背景技术

当今社会，随着网络信息的飞速发展，越来越多的信息可以通过浏览网页获得，占比图作为网页页面的一个元素，以直观形象的图形方式表达不同类别之间的比例信息，比如各品牌的手机在市场中所占得份额比例，受到了用户的喜爱。

目前，在网页页面中，比较常见的占比图为扇形占比图、柱状占比图和环状占比图，其中环状占比图以其形状新颖，所占屏幕小等优点在占比图中应用广泛，在环状占比图的开发中，通常使用第三方开源类库进行实现，但是目前通过第三方开源类库实现的环状占比图的通常为平角环状图，较为单一，用户体验度低。

综上，现有技术中的环状占比图通常为平角环状图，展示形式单一。

发明内容

有鉴于此，本公开的目的在于提供了一种环状占比图的生成方法及装置，以生成一种新型的环状占比图，增加了环状占比图的展示形式。

第一方面，本公开实施例提供了一种环状占比图的生成方法，所述环状占比图包括多个占比区块对应的圆角环状图，该方法包括：

根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定所述当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度；

依据所述环状占比图的圆环半径和圆心位置以及所述第二区块开始弧度和第二区块结束弧度，确定所述当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，所述第一半圆与所述第二区块开始弧度对应的线段相切，所述第二半圆与所述第二区块结束弧度对应的线段相切；

依据所述环状占比图的圆环半径和圆心位置，以及所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定所述当前待绘制占比区块位于所述第一半圆和第二半圆之间的圆环的属性信息；

依据所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及所述圆环的属性信息，生成所述当前待绘制占比区块的圆角环状图；

跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到所述环状占比图。

第二方面，本公开实施例提供了一种环状占比图的生成装置，所述环状占比图包括多个占比区块对应的圆角环状图，该装置包括：

弧度确定模块，用于根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定所述当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度；

半圆确定模块，用于依据所述环状占比图的圆环半径和圆心位置以及所述第二区块开始弧度和第二区块结束弧度，确定所述当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，所述第一半圆与所述第二区块开始弧度对应的线段相切，所述第二半圆与所述第二区块结束弧度对应的线段相切；

圆环确定模块，用于依据所述环状占比图的圆环半径和圆心位置，以及所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定所述当前待绘制占比区块位于所述第一半圆和第二半圆之间的圆环的属性信息；

图形生成模块，用于依据所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及所述圆环的属性信息，生成所述当前待绘制占比区块的圆角环状图；跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到所述环状占比图。

第三方面，本公开实施例提供了一种计算机设备包括处理器、存储器和总线，所述存储器存储执行指令，当装置运行时，所述处理器与所述存储器之间通过总线通信，所述处理器执行所述存储器中存储的如下执行指令：

根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定所述当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度；

依据所述环状占比图的圆环半径和圆心位置以及所述第二区块开始弧度和第二区块结束弧度，确定所述当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，所述第一半圆与所述第二区块开始弧度对应的线段相切，所述第二半圆与所述第二区块结束弧度对应的线段相切；

依据所述环状占比图的圆环半径和圆心位置，以及所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定所述当前待绘制占比区块位于所述第一半圆和第二半圆之间的圆环的属性信息；

依据所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及所述圆环的属性信息，生成所述当前待绘制占比区块的圆角环状图；

跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到所述环状占比图。

第四方面，本公开实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述的方法的步骤。

与现有技术中相比，本公开实施例提供的环状占比图，包括多个占比区块对应的圆角环状占比图，该生成过程包括根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度；依据环状占比图的圆环半径和圆心位置以及第二区块开始弧度和第二区块结束弧度，确定当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，第一半圆与第二区块开始弧度对应的线段相切，第二半圆与第二区块结束弧度对应的线段相切；依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息；依据当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图；跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到环状占比图。

可见，本公开按照上述方法逐次生成环状占比图中的每个圆角环状占比图，进而得到一种不同于现有的平角环状占比图的一种新型环状占比图，这种新型的圆角环状占比图样式新颖，增加了环状占比图的展示形式，在网络页面出现时，能够满足用户的个性化需求，提高了用户体验度。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

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

图1a示出了现有技术中的平角环状占比图；

图1b示出了本公开实施例所提供的圆角环状占比图；

图2示出了本公开实施例所提供的环状占比图的生成方法流程示意图；

图3示出了本公开实施例所提供的确定当前待绘制占比区块在环状占比图中的开始弧度和结束弧度的方法流程示意图；

图4示出了本公开实施例所提供的当前待绘制占比区块对应的第一半圆的属性信息示意图的方法流程示意图；

图5示出了本公开实施例所提供的环状占比图中涉及到的具体几何图；

图6示出了本公开实施例所提供的确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息的方法流程示意图；

图7示出了本公开实施例所提供的一种环状占比图的生成装置结构示意图；

图8示出了本公开实施例所提供的一种计算机设备的结构示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

目前，UI设计图中的环状占比图，大部分使用第三方开源类库进行实现，而目前通过第三方开源类库完成的环状占比图，大部分是平角环状占比图，比如使用Echarts开源类库实现的环状占比图，如图1a所示，这种环状占比图中每个占比区块对应的环状图的两端为平角，为了增加环状占比图的展示形式，本公开将提供一种圆角环状占比图的生成方法，其中圆角环状占比图如图1b所示。

如图2所示，本公开实施例提供了一种环状占比图的生成方法，该环状占比图包括多个占比区块对应的圆角环状图，该方法包括以下步骤S100～S104：

S100，根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度。

本公开实施例中，环状占比图包括多个占比区块对应的圆角环状图，每个占比区块对应的圆角环状图的占比弧度与自身的数据量有关，比如占比区块A的数据量大于占比区块B的数据量，则占比区块A对应的占比弧度大于占比区块B对应的占比弧度。因为在环状占比图中，各个占比区块在环形占比图中是按照首尾顺序进行排列的，所以当前待绘制占比区块的开始弧度与相邻的上一占比区块的结束弧度相邻，因此，如果知道了上一占比区块的结束弧度和当前待绘制占比区块的占比弧度，就能确定当前待绘制占比区块的开始弧度和结束弧度。

可选地，步骤S100中，根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度，如图3所示，具体包括如下步骤S200～S202：

S200，根据当前待绘制占比区块的数据量以及所有占比区块的总数据量，确定当前待绘制占比区块的数据量在总数据量中所占的百分比。

本公开实施例中，作为一可选实施例，利用下式计算当前待绘制占比区块的数据量在总数据量中所占的百分比：

式中，

A_j为当前待绘制占比区块的数据量在总数据量中所占的百分比；

N_j为当前待绘制占比区块的数据量；

N_i为第i个待绘制占比区块的数据量；

n为总的待绘制占比区块数。

S201，根据当前待绘制占比区块对应的百分比，确定当前待绘制占比区块在环状占比图中的占比弧度。

本公开实施例中，整个环状占比图的弧度为2π，在确定当前待绘制占比区块的百分比A_j后，则可以确定当期待绘制占比区块的占比弧度为：2π·A_j。

S202，根据当前待绘制占比区块的占比弧度以及第一区块结束弧度，确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度。

本公开实施例中，若当前待绘制占比区块为环状占比图中的第一个待绘制占比区块，则可以将预设的环状占比图的开始绘制弧度作为当前待绘制占比区块的第二区块开始弧度，此时第一区块结束弧度即为预设的开始绘制弧度，然后结合当前待绘制占比区块的占比弧度，直接确定当前待绘制占比区块的第二区块结束弧度。

环状占比图中各个占比区块对应的圆角环状图可以是首尾相连的，也可以是首尾有一定间隔的情况，针对这两种情况，具体有以下两种方式来确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度：

第一种情况，步骤S202中，根据当前待绘制占比区块的占比弧度以及第一区块结束弧度，确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度，包括：

步骤S2021，以第一区块结束弧度为第二区块开始弧度。

这里第一区块结束弧度是根据上一占比区块的第一区块开始弧度，以及上一占比区块的占比弧度确定的。

本公开实施例中，上一占比区块的第一区块结束弧度与第一区块开始弧度的差值为该上一占比区块的占比弧度，比如，上一占比区块的第一区块开始弧度为角度30°对应的弧度，上一占比区块的占比弧度为角度60°对应的弧度，则上一占比区块的第一区块结束弧度为角度90°对应的弧度。

步骤S2022，按照第二区块开始弧度以及当前待绘制占比区块的占比弧度，确定出第二区块结束弧度。

本公开实施例中，当前待绘制占比区块与上一占比区块是相邻的两个占比区块，当上一占比区块的占比弧度确定后，根据上一占比区块的第一区块开始弧度，能够确定上一占比区块的第一区块结束弧度，以上一占比区块的第一区块结束弧度作为当前待绘制占比区块的第二区块开始弧度，再根据当前待绘制占比区块的占比弧度就能确定第二区块结束弧度，这样生成各个占比区块对应的圆角环状图就是首尾相连的。

在本公开实施例中，当开始绘制弧度确定，且每个占比区块所对应的百分比确定后，按照提前设定的圆角环状图的设定排序，就可以确定每个占比区块对应的开始弧度与结束弧度，即在绘制环状占比图时，上一占比区块的结束弧度即是当前待绘制占比区块的结束弧度。

第二种情况，步骤S202中，根据当前待绘制占比区块的占比弧度以及第一区块结束弧度，确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度，包括：

S2023，计算当前待绘制占比区块的占比弧度与设定占比弧度阈值的差值，得到当前待绘制占比区块的第二中间占比弧度。

S2024，按照第一区块结束弧度以及设定占比弧度阈值，确定第二区块开始弧度。

其中，第一区块结束弧度时根据上一占比区块的第一中间占比弧度，以及上一占比区块的第一区块开始弧度确定的。

本公开实施例中，上一占比区块的第一区块结束弧度与第二区块开始弧度的差值即为设定占比弧度阈值，比如上一占比区块的第一区块结束弧度为角度90°对应的弧度，设定占比弧度阈值为角度10°对应的弧度，则第二区块开始弧度为角度100°对应的弧度。

S2025，按照第二区块开始弧度以及第二中间占比弧度，确定第二区块结束弧度。

本公开实施例中，为了使得相邻的两个占比区块对应的圆角环状图之间有一定的间隔，可以计算当前待绘制占比区块的占比弧度与提前设定的占比弧度阈值的差值，从而得到当前待绘制占比区块的第二中间占比弧度。其中，第二中间占比弧度即为当前待绘制占比区块的新的占比弧度，小于根据当前待绘制占比区块对应的百分比确定的当前待绘制占比区块在环状占比图中的占比弧度。

同样的，上一占比的第一中间占比弧度也小于根据上一占比区块对应的百分比确定的上一占比区块在环状占比图中的占比弧度。

在本公开实施例中，当开始绘制弧度确定，且每个占比区块所对应的百分比确定后，按照提前设定的圆角环状图的设定排序，就可以确定每个占比区块对应的开始弧度与结束弧度。为了使得相邻占比区块对应的圆角环状图之间有间隔，可以更改每个占比区块对应的开始弧度或者结束弧度，比如，将每个占比区块的结束弧度减去设定占比弧度阈值，得到该占比区块新的结束弧度。

比如，针对当前待绘制的占比区块相邻的上一占比区块，在其第一区块开始弧度确定后，可以计算上一占比区块的占比弧度与设定占比弧度阈值的差值，得到上一占比区块的第一中间占比弧度，然后按照第一区块开始弧度和第一中间占比弧度，确定第一区块结束弧度，接下来，因为需要相邻两个占比区块对应的圆角环状占比图之间相隔设定占比弧度阈值，则确定了第一区块结束弧度后，根据待绘制占比弧度的第二区块开始弧度与第一区块结束弧度之间相差设定占比弧度阈值的特性，则可以确定第二区块开始弧度，同样根据确定的第二中间占比弧度，得到第二区块结束弧度。

S101，依据环状占比图的圆环半径和圆心位置以及第二区块开始弧度和第二区块结束弧度，确定当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，其中，第一半圆与第二区块开始弧度对应的线段相切，第二半圆与第二区块结束弧度对应的线段相切。

本公开实施例中，作为一可选实施例，属性信息包括圆心位置、半径、开始弧度和结束弧度。

其中，步骤S101中，依据环状占比图的圆环半径和圆心位置以及第二区块开始弧度和第二区块结束弧度，确定当前待绘制占比区块对应的第一半圆的属性信息，如图4所示，包括以下步骤S300～S303：

S300，依据环状占比图的圆环半径，确定第一半圆的半径。

本公开实施例中，环状占比图的圆环半径包括外环半径和内环半径，每个占比区块对应的圆角环状占比图两端的半圆均与环状占比图的外环半径和内环半径有关。第二半圆的半径与第一半圆的半径一样。

S301，依据环状占比图的圆环半径和圆心位置，以及第二区块开始弧度，确定第一半圆的圆心位置。

S302，以第一半圆的圆心位置为原点，以平行于环状占比图的坐标轴为坐标轴，构建第一半圆坐标系。

S303，在第一半圆坐标系中，依据环状占比图的圆环半径以及第二区块开始弧度，确定第一半圆的开始弧度和结束弧度。

本公开实施例中，第二半圆的半径与第一半圆的半径一样；依据环状占比图的圆环半径和圆心位置，以及第二区块结束弧度，可以确定第二半圆的圆心位置；以第二半圆的圆心位置为原点，以平行于环状占比图的坐标轴为坐标轴，构建第二半圆坐标系，在第二半圆坐标系中，依据环状占比图的圆环半径以及第二区块结束弧度，确定第二半圆的开始弧度和结束弧度。

具体地，结合图5以一具体实施例进行说明，按照以下方式确定当前待绘制占比区块对应的第一半圆的属性信息，以及第二半圆的属性信息：

如图5所示，环状占比图的圆环半径包括内环半径OJ和外环半径OK，圆心位置即O点的坐标(Ox、Oy)，第二区块开始弧度∠AOD和第二区块结束弧度∠AOB，第一半圆的属性信息即为弧JIK对应的圆心位置、半径、开始弧度和结束弧度，第二半圆的属性信息即为弧GEF对应的圆心位置、半径、开始弧度和结束弧度。

针对第一半圆：

(1)求圆心R的坐标：

OR线段的长度为OR＝(OK+OJ)/2；

R点的横坐标Rx＝Ox+OR*cos(∠HOA)，其中，∠HOA＝∠DOA+∠HOD，由于圆R与线OD相切，则线段RI的长度为圆R的半径，即RI＝(OK-OJ)/2，那么∠HOD＝arcsin(RI/OR)；

则代入后可得：

Rx＝Ox+(OK+OJ)/2*cos(∠DOA+arcsin((OK-OJ)/(OK+OJ)))；

同理，Ry＝Oy+(OK+OJ)/2*sin(∠DOA+arcsin((OK-OJ)/(OK+OJ)))。

(2)求弧JIK的开始弧度和结束弧度：

由于绘图按照顺时针绘图，则J点是绘制开始点，则∠LRJ是开始弧度，∠LRK为结束弧度，根据图分析可得∠LRJ＝180+∠LRH；又∠LRH＝∠AOH∠LRH＝∠DOA+∠HOD＝∠DOA+arcsin((OK-OJ)/(OK+OJ))；

则开始弧度：∠LRJ＝180+∠DOA+arcsin((OK-OJ)/(OK+OJ))；

结束弧度：∠LRH＝∠DOA+arcsin((OK-OJ)/(OK+OJ))。

针对第二半圆：

(1)求圆心Q的坐标：

OQ线段的长度与OR线段的长度相等，即OQ＝OR；

Q点的横坐标为Qx＝Ox+OQ*cos(∠COA)，其中∠COA＝∠BOA-∠COB，∠COB＝∠HOD＝arcsin(RI/OR)；

则代入后可得：

Qx＝Ox+(OK+OJ)/2*cos(∠BOA-arcsin((OK-OJ)/(OK+OJ)))；

同理，Qy＝Oy+(OK+OJ)/2*sin(∠BOA-arcsin((OK-OJ)/(OK+OJ)))。

(2)求弧GEF开始弧度与结束弧度：

由于绘图按照顺时针绘图，则G点是绘制开始点，则∠PQG是开始弧度，∠PQF为结束弧度，根据图分析可得∠PQG＝∠AOC＝∠AOB-∠COB；

又∠AOB为当前待绘制占比区块的第二区块结束弧度，则∠PQG＝∠AOC＝∠AOB-∠COB＝∠AOB-arcsin((OK-OJ)/(OK+OJ))；

则开始弧度为：∠PQG＝∠AOB-arcsin((OK-OJ)/(OK+OJ))；

结束弧度为：∠PQO＝∠AOB-arcsin((OK-OJ)/(OK+OJ))+180。

S102，依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息。

具体地，步骤S102中，依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息，如图6所示，具体包括以下步骤S400～S403：

S400，将环状占比图的圆环半径作为圆环的半径。

S401，将环状占比图的圆心位置作为圆环的圆心位置。

S402，依据环状占比图的圆心位置、第二区块开始弧度对应的线段，以及第一半圆的圆心位置至环状占比图的圆心位置的线段，确定圆环的圆环开始弧度。

S403，依据环状占比图的圆心位置、第二区块结束弧度对应的线段，以及第二半圆的圆心位置至环状占比图的圆心位置的线段，确定圆环的圆环结束弧度。

下面结合图5以一具体实施例进行说明，按照以下方式确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息：

针对弧KG，其对应的圆心位置为O点的位置，其对应的半径为OK，其对应的圆环开始弧度为∠AOH＝∠DOA+arcsin((OK-OJ)/(OK+OJ))，对应的圆环结束弧度为∠AOC＝∠AOB-arcsin((OK-OJ)/(OK+OJ))。

同样弧FJ，其对应的圆心位置也为O点的位置，其对应的半径为OJ，对应的圆环开始弧度为∠AOF＝∠AOB-arcsin((OK-OJ)/(OK+OJ))，对应的圆环结束弧度为∠AOJ＝∠DOA+arcsin((OK-OJ)/(OK+OJ))。

S103，依据当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图。

这里，在绘制环状占比图时，可以在html(HyperText Markup Language，超文本标记语言)中的画布(canvas)中进行绘制。

其中，当前待绘制占比区块的圆环包括第一扇形弧和第二扇形弧，步骤S103中，依据当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图，具体包括以下步骤：

S1031，针对当前待绘制占比区块对应的第一半圆、第一扇形弧、第二半圆以及第二扇形弧分别对应的圆心位置、半径、开始弧度以及结束弧度，确定第一半圆、第一扇形弧、第二半圆以及第二扇形弧对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线。

S1032，按照弧线连接顺序，依次连接第一半圆、第一扇形弧、第二半圆以及第二扇形对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线，生成当前待绘制占比区块的圆角环状图。

本公开实施例中，这里对于每段弧线，比如如图5中的第一半圆弧线，可以通过弧线生成函数生成，比如通过原生JS中的arc函数，在确定圆心坐标、半径、开始弧度和结束弧度后，按照顺时针顺序通过arc函数生成第一半圆弧线JIK，接下来按照顺时针顺序，同样借助arc函数生成第一扇形弧线KG，然后再按照顺时针顺序，借助arc函数生成第二半圆弧线GEF，最后按照逆时针顺序，借助arc函数生成第二扇形弧线FJ，这样便得到了当前待绘制占比区块对应的圆角环状占比图J-I-K-G-E-F-J。

S104，跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到环状占比图。

当前待绘制占比区块的圆角环状占比图绘制完成后，按照同样的方式绘制下一个待绘制占比区块对应的圆角环状占比图，直至绘制完最后一个待绘制占比区块的圆角环状图，从而得到如图1b所示的环状占比图。

可选地，生成当前待绘制占比区块的圆角环状图之后，跳转至下一待绘制占比区块之前，该方法还包括：

按照当前待绘制占比区块的圆角环状图对应的颜色、名称以及数据量，对当前待绘制占比区块的圆角环状图进行着色、署名和标定数据量。

或者，在生成环状占比图后，按照每个圆角环状图对应不同的颜色，表示不同的产品以及每个产品具有的数据量，对各个圆角环状图进行着色、署名和标定数据量。

本公开实施例提供了一种环状占比图的生成装置50，如图7所示，环状占比图包括多个占比区块对应的圆角环状图，该装置包括：

弧度确定模块51，用于根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度。

半圆确定模块52，用于依据环状占比图的圆环半径和圆心位置以及第二区块开始弧度和第二区块结束弧度，确定当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，第一半圆与第二区块开始弧度对应的线段相切，第二半圆与第二区块结束弧度对应的线段相切。

圆环确定模块53，用于依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息。

图形生成模块54，用于依据当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图；跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到环状占比图。

可选地，弧度确定模块51，具体用于：

根据当前待绘制占比区块的数据量以及所有占比区块的总数据量，确定当前待绘制占比区块的数据量在总数据量中所占的百分比。

根据当前待绘制占比区块对应的百分比，确定当前待绘制占比区块在环状占比图中的占比弧度。

根据当前待绘制占比区块的占比弧度以及第一区块结束弧度，确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度。

可选地，弧度确定模块51，具体用于：

以第一区块结束弧度为第二区块开始弧度。

按照第二区块开始弧度以及当前待绘制占比区块的占比弧度，确定出第二区块结束弧度。

可选地，弧度确定模块51，具体用于：

计算当前待绘制占比区块的占比弧度与设定占比弧度阈值的差值，得到当前待绘制占比区块的第二中间占比弧度。

按照第一区块结束弧度以及设定占比弧度阈值，确定第二区块开始弧度。

按照第二区块开始弧度以及第二中间占比弧度，确定第二区块结束弧度。

可选地，半圆确定模块52，具体用于：

依据环状占比图的圆环半径，确定第一半圆的半径。

依据环状占比图的圆环半径和圆心位置，以及第二区块开始弧度，确定第一半圆的圆心位置。

以第一半圆的圆心位置为原点，以平行于环状占比图的坐标轴为坐标轴，构建第一半圆坐标系。

在第一半圆坐标系中，依据环状占比图的圆环半径以及第二区块开始弧度，确定第一半圆的开始弧度和结束弧度。

可选地，圆环确定模块53，具体用于：

将环状占比图的圆环半径作为圆环的半径。

将环状占比图的圆心位置作为圆环的圆心位置。

依据环状占比图的圆心位置、第二区块开始弧度对应的线段，以及第一半圆的圆心位置至环状占比图的圆心位置的线段，确定圆环的圆环开始弧度。

依据环状占比图的圆心位置、第二区块结束弧度对应的线段，以及第二半圆的圆心位置至环状占比图的圆心位置的线段，确定圆环的圆环结束弧度。

圆环包括第一扇形弧和第二扇形弧，图形生成模块54，具体用于：

针对当前待绘制占比区块对应的第一半圆、第一扇形弧、第二半圆以及第二扇形弧分别对应的圆心位置、半径、开始弧度以及结束弧度，确定第一半圆、第一扇形弧、第二半圆以及第二扇形弧对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线。

按照弧线连接顺序，依次连接第一半圆、第一扇形弧、第二半圆以及第二扇形对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线，生成当前待绘制占比区块的圆角环状图。

可选地，生成当前待绘制占比区块的圆角环状图之后，跳转至下一待绘制占比区块之前，图形生成模块54还用于：

按照当前待绘制占比区块的圆角环状图对应的颜色、名称以及数据量，对当前待绘制占比区块的圆角环状图进行着色、署名和标定数据量。

本公开实施例提供了计算机设备60，如图8所示，包括：处理器61、存储器62和总线63，存储器62存储执行指令，当装置运行时，处理器61与存储器62之间通过总线通信，处理器61执行存储器62中存储的如下执行指令：

根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度。

依据环状占比图的圆环半径和圆心位置以及第二区块开始弧度和第二区块结束弧度，确定当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，第一半圆与第二区块开始弧度对应的线段相切，第二半圆与第二区块结束弧度对应的线段相切。

依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息。

依据当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图。

跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到环状占比图。

可选地，处理器61执行的指令中，根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度，包括：

根据当前待绘制占比区块的数据量以及所有占比区块的总数据量，确定当前待绘制占比区块的数据量在总数据量中所占的百分比。

根据当前待绘制占比区块对应的百分比，确定当前待绘制占比区块在环状占比图中的占比弧度。

根据当前待绘制占比区块的占比弧度以及第一区块结束弧度，确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度。

可选地，处理器61执行的指令中，根据当前待绘制占比区块的占比弧度以及第一区块结束弧度，确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度，包括：

以第一区块结束弧度为第二区块开始弧度。

按照第二区块开始弧度以及当前待绘制占比区块的占比弧度，确定出第二区块结束弧度。

可选地，处理器61执行的指令中，根据当前待绘制占比区块的占比弧度以及第一区块结束弧度，确定当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度，包括：

计算当前待绘制占比区块的占比弧度与设定占比弧度阈值的差值，得到当前待绘制占比区块的第二中间占比弧度。

按照第一区块结束弧度以及设定占比弧度阈值，确定第二区块开始弧度。

按照第二区块开始弧度以及第二中间占比弧度，确定第二区块结束弧度。

可选地，处理器执行的指令中，依据环状占比图的圆环半径和圆心位置以及第二区块开始弧度和第二区块结束弧度，确定当前待绘制占比区块对应的第一半圆的属性信息，包括：

依据环状占比图的圆环半径，确定第一半圆的半径。

依据环状占比图的圆环半径和圆心位置，以及第二区块开始弧度，确定第一半圆的圆心位置。

以第一半圆的圆心位置为原点，以平行于环状占比图的坐标轴为坐标轴，构建第一半圆坐标系。

在第一半圆坐标系中，依据环状占比图的圆环半径以及第二区块开始弧度，确定第一半圆的开始弧度和结束弧度。

可选地，处理器61执行的指令中，依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息，包括：

将环状占比图的圆环半径作为圆环的半径。

将环状占比图的圆心位置作为圆环的圆心位置。

依据环状占比图的圆心位置、第二区块开始弧度对应的线段，以及第一半圆的圆心位置至环状占比图的圆心位置的线段，确定圆环的圆环开始弧度。

依据环状占比图的圆心位置、第二区块结束弧度对应的线段，以及第二半圆的圆心位置至环状占比图的圆心位置的线段，确定圆环的圆环结束弧度。

圆环包括第一扇形弧和第二扇形弧，处理器61执行的指令中，依据当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图，包括：

针对当前待绘制占比区块对应的第一半圆、第一扇形弧、第二半圆以及第二扇形弧分别对应的圆心位置、半径、开始弧度以及结束弧度，确定第一半圆、第一扇形弧、第二半圆以及第二扇形弧对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线。

按照弧线连接顺序，依次连接第一半圆、第一扇形弧、第二半圆以及第二扇形对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线，生成当前待绘制占比区块的圆角环状图。

可选地，生成当前待绘制占比区块的圆角环状图之后，跳转至下一待绘制占比区块之前，处理器61还用于执行以下指令：

按照当前待绘制占比区块的圆角环状图对应的颜色、名称以及数据量，对当前待绘制占比区块的圆角环状图进行着色、署名和标定数据量。

对应于图1至图6中的环状占比图的生成方法，本公开实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述环状占比图的生成方法的步骤。

具体地，该存储介质能够为通用的存储介质，如移动磁盘、硬盘等，该存储介质上的计算机程序被运行时，能够执行上述环状占比图的生成方法，从而解决现有技术中的环状占比图通常为平角环状图，形状单一，用户体验度低的问题。

与现有技术中相比，本公开实施例提供的环状占比图，包括多个占比区块对应的圆角环状占比图，该生成过程包括根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度；依据环状占比图的圆环半径和圆心位置以及第二区块开始弧度和第二区块结束弧度，确定当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，第一半圆与第二区块开始弧度对应的线段相切，第二半圆与第二区块结束弧度对应的线段相切；依据环状占比图的圆环半径和圆心位置，以及当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定当前待绘制占比区块位于第一半圆和第二半圆之间的圆环的属性信息；依据当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及圆环的属性信息，生成当前待绘制占比区块的圆角环状图；跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到环状占比图。

可见，本公开按照上述方法逐次生成环状占比图中的每个圆角环状占比图，进而得到一种不同于现有的平角环状占比图的一种新型环状占比图，这种新型的圆角环状占比图样式新颖，增加了环状占比图的展示形式，在网络页面出现时，能够满足用户的个性化需求，提高了用户体验度。

本公开实施例所提供的进行环状占比图的生成方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

本公开实施例所提供的环状占比图的生成的装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本公开实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

在本公开所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围。都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种环状占比图的生成方法，其特征在于，所述环状占比图包括多个占比区块对应的圆角环状图，该方法包括：

根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定所述当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度；

依据所述环状占比图的圆环半径和圆心位置以及所述第二区块开始弧度和第二区块结束弧度，确定所述当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，所述第一半圆与所述第二区块开始弧度对应的线段相切，所述第二半圆与所述第二区块结束弧度对应的线段相切；

依据所述环状占比图的圆环半径和圆心位置，以及所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定所述当前待绘制占比区块位于所述第一半圆和第二半圆之间的圆环的属性信息；

依据所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及所述圆环的属性信息，生成所述当前待绘制占比区块的圆角环状图；

跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到所述环状占比图。

2.根据权利要求1所述的方法，其特征在于，所述根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定所述当前待绘制占比区块在所述环状占比图的第二区块开始弧度和第二区块结束弧度，包括：

根据所述当前待绘制占比区块的数据量以及所有占比区块的总数据量，确定所述当前待绘制占比区块的数据量在所述总数据量中所占的百分比；

根据所述当前待绘制占比区块对应的百分比，确定所述当前待绘制占比区块在所述环状占比图中的占比弧度；

根据所述当前待绘制占比区块的占比弧度以及所述第一区块结束弧度，确定所述当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度。

3.根据权利要求2所述的方法，其特征在于，所述根据所述当前待绘制占比区块的占比弧度以及所述第一区块结束弧度，确定所述当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度，包括：

以所述第一区块结束弧度为所述第二区块开始弧度；

按照所述第二区块开始弧度以及所述当前待绘制占比区块的占比弧度，确定出所述第二区块结束弧度。

4.根据权利要求2所述的方法，其特征在于，所述根据所述当前待绘制占比区块的占比弧度以及所述第一区块结束弧度，确定所述当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度，包括：

计算当前待绘制占比区块的占比弧度与设定占比弧度阈值的差值，得到当前待绘制占比区块的第二中间占比弧度；

按照所述第一区块结束弧度以及所述设定占比弧度阈值，确定所述第二区块开始弧度；

按照所述第二区块开始弧度以及所述第二中间占比弧度，确定所述第二区块结束弧度。

5.根据权利要求1所述的方法，其特征在于，所述依据所述环状占比图的圆环半径和圆心位置以及所述第二区块开始弧度和第二区块结束弧度，确定所述当前待绘制占比区块对应的第一半圆的属性信息，包括：

依据所述环状占比图的圆环半径，确定所述第一半圆的半径；

依据所述环状占比图的圆环半径和圆心位置，以及所述第二区块开始弧度，确定所述第一半圆的圆心位置；

以所述第一半圆的圆心位置为原点，以平行于所述环状占比图的坐标轴为坐标轴，构建第一半圆坐标系；

在所述第一半圆坐标系中，依据所述环状占比图的圆环半径以及所述第二区块开始弧度，确定所述第一半圆的开始弧度和结束弧度。

6.根据权利要求5所述的方法，其特征在于，所述依据所述环状占比图的圆环半径和圆心位置，以及所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定所述当前待绘制占比区块位于所述第一半圆和第二半圆之间的圆环的属性信息，包括：

将所述环状占比图的圆环半径作为所述圆环的半径；

将所述环状占比图的圆心位置作为所述圆环的圆心位置；

依据所述环状占比图的圆心位置、所述第二区块开始弧度对应的线段，以及所述第一半圆的圆心位置至所述环状占比图的圆心位置的线段，确定所述圆环的圆环开始弧度；

依据所述环状占比图的圆心位置、所述第二区块结束弧度对应的线段，以及所述第二半圆的圆心位置至所述环状占比图的圆心位置的线段，确定所述圆环的圆环结束弧度。

7.根据权利要求6所述的方法，其特征在于，所述圆环包括第一扇形弧和第二扇形弧，所述依据所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及所述圆环的属性信息，生成所述当前待绘制占比区块的圆角环状图，包括：

针对所述当前待绘制占比区块对应的第一半圆、第一扇形弧、第二半圆以及第二扇形弧分别对应的圆心位置、半径、开始弧度以及结束弧度，确定所述第一半圆、第一扇形弧、第二半圆以及第二扇形弧对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线；

按照弧线连接顺序，依次连接所述第一半圆、第一扇形弧、第二半圆以及第二扇形对应的第一半圆弧线、第一扇形弧线、第二半圆弧线以及第二扇形弧线，生成所述当前待绘制占比区块的圆角环状图。

8.一种环状占比图的生成装置，其特征在于，所述环状占比图包括多个占比区块对应的圆角环状图，该装置包括：

弧度确定模块，用于根据当前待绘制占比区块的数据量以及相邻的上一占比区块的第一区块结束弧度，确定所述当前待绘制占比区块在环状占比图的第二区块开始弧度和第二区块结束弧度；

半圆确定模块，用于依据所述环状占比图的圆环半径和圆心位置以及所述第二区块开始弧度和第二区块结束弧度，确定所述当前待绘制占比区块对应的第一半圆的属性信息和第二半圆的属性信息，所述第一半圆与所述第二区块开始弧度对应的线段相切，所述第二半圆与所述第二区块结束弧度对应的线段相切；

圆环确定模块，用于依据所述环状占比图的圆环半径和圆心位置，以及所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息，确定所述当前待绘制占比区块位于所述第一半圆和第二半圆之间的圆环的属性信息；

图形生成模块，用于依据所述当前待绘制占比区块的第一半圆的属性信息和第二半圆的属性信息以及所述圆环的属性信息，生成所述当前待绘制占比区块的圆角环状图；跳转至下一待绘制占比区块，直至生成最后一个待绘制占比区块的圆角环状图，得到所述环状占比图。

9.根据权利要求8所述的装置，其特征在于，所述弧度确定模块，具体用于：

根据所述当前待绘制占比区块的数据量以及所有占比区块的总数据量，确定所述当前待绘制占比区块的数据量在所述总数据量中所占的百分比；

根据所述当前待绘制占比区块对应的百分比，确定所述当前待绘制占比区块在所述环状占比图中的占比弧度；

根据所述当前待绘制占比区块的占比弧度以及所述第一区块结束弧度，确定所述当前待绘制占比区块的第二区块开始弧度和第二区块结束弧度。

10.根据权利要求9所述的装置，其特征在于，所述弧度确定模块，具体用于：

以所述第一区块结束弧度为所述第二区块开始弧度；

按照所述第二区块开始弧度以及所述当前待绘制占比区块的占比弧度，确定出所述第二区块结束弧度。