CN109582939A

CN109582939A - 一种气泡图展示方法和装置

Info

Publication number: CN109582939A
Application number: CN201710910921.5A
Authority: CN
Inventors: 张珍心
Original assignee: Beijing Gridsum Technology Co Ltd
Current assignee: Beijing Gridsum Technology Co Ltd
Priority date: 2017-09-29
Filing date: 2017-09-29
Publication date: 2019-04-05
Anticipated expiration: 2037-09-29
Also published as: CN109582939B

Abstract

本申请实施例公开了一种气泡图展示方法和装置，在建立的可以依据两种标准进行展示的气泡图中，获取待展示气泡具有的在第一标准下的最大标准值和最小标准值。根据最大标准值和最小标准值的差值，确定出气泡图中针对第一标准的第一坐标轴的展示刻度，以及展示刻度的粒度，由此可以在该气泡图中依据第一坐标轴的刻度以及第二坐标轴展示该待展示气泡，展示在该气泡图中的气泡排布位置体现出第一标准和第二标准，丰富了气泡图的展示效果。

Description

一种气泡图展示方法和装置

技术领域

本申请涉及数据处理领域，特别是涉及一种气泡图展示方法和装置。

背景技术

D3.js属于一种基于数据操作文档的JavaScript库。通过D3.js可以实现制图例如气泡图这种可视化图表。

在展示气泡图时，气泡的位置可以与该气泡所标识内容相关，依据针对某一标准的坐标轴刻度相应排布。

发明内容

然而，目前气泡图主要实现的是针对一种标准的排布，在对气泡图实现打散功能时，打散后的气泡也只能依据该标准重排，导致了气泡图这种可视化图表的展示效果较为单一。

为了解决上述技术问题，本申请提供了一种气泡图展示方法和装置，展示在该气泡图中的气泡排布位置体现出第一标准和第二标准，丰富了气泡图的展示效果。

本申请实施例公开了如下技术方案：

第一方面，本申请实施例提供了一种气泡图展示方法，应用于气泡图，所述气泡图包括针对第一标准的第一坐标轴和针对第二标准的第二坐标轴，所述方法包括：

获取待展示气泡的最大标准值和最小标准值，所述最大标准值和最小标准值为标识第一标准的数值；

根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，所述展示刻度的粒度大小根据所述差值确定；

将所述待展示气泡依据所述第一坐标轴的刻度以及第二坐标轴进行展示。

可选的，所述第一标准包括时间。

可选的，所述根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，包括：

若所述差值处于第一数值区间，根据一级粒度确定所述第一坐标轴的展示刻度。

若所述差值处于第二数值区间，根据二级粒度确定所述第一坐标轴的展示刻度。

若所述差值处于第三数值区间，且所述待展示气泡的数量满足预设条件时，根据三级粒度确定所述第一坐标轴的展示刻度。

可选的，在所述获取待展示气泡的最大标准值和最小标准值之前，所述方法还包括：

将需打散的气泡作为所述待展示气泡。

第二方面，本申请实施例提供了一种气泡图展示装置，应用于气泡图，所述气泡图包括针对第一标准的第一坐标轴和针对第二标准的第二坐标轴，所述装置包括获取单元、确定单元和展示单元：

所述获取单元，用于获取待展示气泡的最大标准值和最小标准值，所述最大标准值和最小标准值为标识第一标准的数值；

所述确定单元，用于根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，所述展示刻度的粒度大小根据所述差值确定；

所述展示单元，用于将所述待展示气泡依据所述第一坐标轴的刻度以及第二坐标轴进行展示。

可选的，所述第一标准包括时间。

所述确定单元还用于若所述差值处于第一数值区间，根据一级粒度确定所述第一坐标轴的展示刻度。

所述确定单元还用于若所述差值处于第二数值区间，根据二级粒度确定所述第一坐标轴的展示刻度。

所述确定单元还用于若所述差值处于第三数值区间，且所述待展示气泡的数量满足预设条件时，根据三级粒度确定所述第一坐标轴的展示刻度。

可选的，所述获取单元还用于将需打散的气泡作为所述待展示气泡。

第三方面，本申请实施例提供了一种用于气泡图展示的终端，所述终端包括处理器以及存储器：

所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；

所述处理器用于根据所述程序代码中的指令执行第一方面中的气泡图展示方法。

第四方面，本申请实施例提供了一种存储介质，所述存储介质用于存储程序代码，所述程序代码用于执行第一方面中的气泡图展示方法。

由上述技术方案可以看出，在建立的可以依据两种标准进行展示的气泡图中，获取待展示气泡具有的在第一标准下的最大标准值和最小标准值。根据最大标准值和最小标准值的差值，确定出气泡图中针对第一标准的第一坐标轴的展示刻度，以及展示刻度的粒度，由此可以在该气泡图中依据第一坐标轴的刻度以及第二坐标轴展示该待展示气泡，展示在该气泡图中的气泡排布位置体现出第一标准和第二标准，丰富了气泡图的展示效果。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种气泡图展示方法的方法流程图；

图2为本申请实施例提供的一种气泡图展示装置的装置结构图。

具体实施方式

下面结合附图，对本申请的实施例进行描述。

由于传统的气泡图在展示时，主要关注一种标准，那么展示在该气泡图中的气泡均依据自身携带用于标识该标准的数值进行排列，例如标准为人数时，一个公司下各个部门对应的气泡中会携带各部门人数数值，人数数值多的部门对应的气泡可以排列在气泡图中靠右的位置(假设该气泡图横坐标轴的刻度大小为从左到右依次增大)，人数数值少的部门对应的气泡可以排列在气泡图中靠左的位置。

这种单一标准的展示效果较为简单，用户在看到这类气泡图时只能看到一种标准下的趋势，并不利于这种具有可视化功能的气泡图的推广。

为此，本申请实施例提供了一种气泡图展示方法和装置，在所应用于的气泡图中设置多种标准的坐标轴，其中包括了针对第一标准的第一坐标轴和针对第二标准的第二坐标轴。该针对第二标准的第二坐标轴在本申请实施例中视为传统气泡图所具有的坐标轴，该针对第一标准的第一坐标轴在本申请实施例中为额外针对不同于第二标准的第一标准的坐标轴。该第一坐标轴可以是气泡图中的横坐标轴，也可以是纵坐标轴，或者其他形式的坐标轴，这里并不限定。

故在建立的可以依据两种标准进行展示的气泡图中，获取待展示气泡具有的在第一标准下的最大标准值和最小标准值。根据最大标准值和最小标准值的差值，确定出气泡图中针对第一标准的第一坐标轴的展示刻度，以及展示刻度的粒度，由此可以在该气泡图中依据第一坐标轴的刻度以及第二坐标轴展示该待展示气泡，展示在该气泡图中的气泡排布位置体现出第一标准和第二标准，丰富了气泡图的展示效果。

接下来通过步骤流程进一步说明如何在本申请实施例中的气泡图中展示待展示气泡。

图1为本申请实施例提供的一种气泡图展示方法的方法流程图，应用于上述具有针对第一标准的第一坐标轴和针对第二标准的第二坐标轴的气泡图中，所述方法包括：

S101：获取待展示气泡的最大标准值和最小标准值。

该最大标准值和最小标准值均为标识第一标准的数值。例如第一标准为时间，第二标准为营业额时，待展示气泡可以携带有时间数值。比如待展示气泡为一个部门各个月份的营业额，那么一月份营业额对应的待展示气泡携带有标识时间的数值为一月份，三月份营业额对应的待展示气泡携带有标识时间的数值为三月份。

而最大标准值和最小标准值是指待展示气泡中标识第一标识的数值最大的那个和最小的那个。例如上述例子中，假设待展示气泡仅包括一月份营业额对应的待展示气泡和三月份营业额对应的待展示气泡，那么该待展示气泡的最大标准值为三月份，最小标准值为一月份。

标识第一标识的数值粒度大小还可以根据具体场景有所区别。若第一标识为时间，在粒度较小的情况下，待展示气泡携带的用于标识时间的数值可以细化到天，也可以细化到小时、分钟等；在粒度较大的情况下，待展示气泡携带的用于标识时间的数值可以细化到年、甚至年代等。相应的，可以根据第一标准的粒度进行更为细化或粗化的计算出待展示气泡的最大标准值和最小标准值。

本申请实施例中的待展示气泡可以为需要进行展示的气泡，待展示气泡中包括的气泡数量可以为多个。根据不同的应用场景，获取待展示气泡的方式有很多，例如在对气泡图执行打散功能时，被选定需要被打散的气泡可以为待展示气泡。

S102：根据最大标准值和最小标准值的差值，确定第一坐标轴的展示刻度，该展示刻度的粒度大小根据所述差值确定。

通过确定出的最大标准值和最小标准值，可以计算出两者的差值。该差值可以体现出待展示气泡所携带用于标识第一标准的数值的跨度，为了能够直观的将待展示气泡以第一标准和第二标准通过气泡图展示，需要根据该差值所体现的跨度，确定出第一坐标轴展示刻度的粒度大小。

这里所述的展示刻度可以理解为第一坐标轴上设置的刻度，不同的刻度对应不同的数值，待展示气泡将根据自身所携带的用于标识第一标准的数值排布在第一坐标轴对应刻度的位置上。

若该差值体现出待展示气泡中用于标识第一标识的数值跨度较大，体现出待展示气泡中所涵盖第一标准的数值范围较大。这种情况下可以以较粗的粒度规划第一坐标轴的展示刻度，避免待展示气泡在第一坐标轴上过于分散，以便直观、清楚的展示待展示气泡。例如第一标准为时间时，若根据差值发现待展示气泡可能跨越多个年份，那么可以将第一坐标轴也就是时间坐标轴的展示刻度设置较粗的粒度，例如以年为粒度，从而使得待展示气泡不会在时间坐标轴上过于分散，展示的更为清楚、直观。

若该差值体现出待展示气泡中用于标识第一标识的数值跨度较小，体现出待展示气泡中所涵盖第一标准的数值范围较小。这种情况下可以以较细的粒度规划第一坐标轴的展示刻度，避免待展示气泡在第一坐标轴上过于拥挤，以便直观、清楚的展示待展示气泡。例如第一标准为时间时，若根据差值发现待展示气泡可能聚集在一个年份中，那么可以将第一坐标轴也就是时间坐标轴的展示刻度设置较细的粒度，例如以月甚至日为粒度，从而使得待展示气泡不会在时间坐标轴上过于拥挤，展示的更为清楚、直观。

S103：将所述待展示气泡依据所述第一坐标轴的刻度以及第二坐标轴进行展示。

在通过S102中根据差值确定出第一坐标轴的展示刻度后，可以将待展示气泡在具有第一坐标轴和第二坐标轴的气泡图中进行展示，在展示时，待展示气泡在第一坐标轴上将依据S102中确定的展示刻度进行展示，并且也会依据第二坐标轴的展示要求进行展示。

可见，在建立的可以依据两种标准进行展示的气泡图中，获取待展示气泡具有的在第一标准下的最大标准值和最小标准值。根据最大标准值和最小标准值的差值，确定出气泡图中针对第一标准的第一坐标轴的展示刻度，以及展示刻度的粒度，由此可以在该气泡图中依据第一坐标轴的刻度以及第二坐标轴展示该待展示气泡，展示在该气泡图中的气泡排布位置体现出第一标准和第二标准，丰富了气泡图的展示效果。

接下来将针对S102，介绍当该差值为不同值时，对第一坐标轴展示刻度可能的设置方式。

第一种可能的方式：若差值处于第一数值区间，根据一级粒度确定第一坐标轴的展示刻度。

第二种可能的方式：若差值处于第二数值区间，根据二级粒度确定所第一坐标轴的展示刻度。

第三种可能的方式：若差值处于第三数值区间，且待展示气泡的数量满足预设条件时，根据三级粒度确定第一坐标轴的展示刻度。

在这三种可能的实施方式中，当差值为不同值时，可以采用不同的粒度确定出第一坐标轴的展示刻度，还可以进一步的确定出不同粒度下展示刻度的数量。

在本申请实施例中，粒度的概念可以从一级粒度向三级粒度越来越细。即一级粒度理解为较粗的粒度，三级粒度理解为较细的粒度。

相应的，第一数值区间体现出待展示气泡中用于标识第一标准的数值跨度较大，第二数值区间体现出待展示气泡中用于标识第一标准的数值跨度次之，第三数值区间体现出待展示气泡中用于标识第一标准的数值跨度较小。需要注意的是，第一数值区间可以与第二数值区间不同，第一数值区间可以与第三数值区间相同，第二数值区间也可以与第三数值区间相同。

通过上述可能的设置方式可见，本申请实施例针对不同的应用场景，提供了至少三种不同的设置可能。当需要对气泡图实施打散功能时，可以针对待展示气泡计算出差值所处的具体范围，对第一坐标轴设置不同粒度的展示刻度。进一步的，还可以根据差值的数值确定出所需设置展示刻度的数量。

接下来将通过具体的应用场景进一步说明本申请实施例提供的气泡图展示方案。

可以指定第一坐标轴为时间坐标轴(假设为y轴)，打散气泡图时，在创建坐标轴的过程中，获取待展示气泡所携带的时间坐标轴数据，取其最大值及最小值yMax，yMin，并使用moment(处理时间转换的控件技术)截取yMax和yMin中年份的展示：

var maxYear＝moment.duration(yMax).years()

var minYear＝moment.duration(yMin).years()

var diffForYear＝maxYear-minYear

其中，moment可以为JavaScript的时间处理类库，diffForYear可以为本申请实施例中的最大标准值和最小标准值的差值。

当diffForYear的值大于等于2(处于第一数值区间)的时候，证明待展示气泡中展示数据分布在不同的年份中，跨度较大。这相当于上述第一种可能的方式，故可以将时间坐标轴按照年份这一粒度(一级粒度)设置展示刻度：

可以将刻度设置为(diffForYear+1)个，以便于待展示气泡在时间坐标轴上清楚展示，设置的方式可以参见下述公式：

yAxis＝d3.svg.axis().ticks(diffForYear+1)；

其中，d3.ticks为D3.js控件中的操作语法。

在确定好时间坐标轴的展示刻度的粒度和数量后，可以将坐标轴使用moment将其展示格式管控以年/月的格式展示：

d3.select(坐标轴刻度点的时间).format(′YYYY′)。

其中，d3.select为D3.js控件中的操作语法。

当diffForYear数值为0(处于第二数值区间)时，代表待展示气泡中展示数据的时间都在同一年之内，跨度适中。这相当于上述第二种可能的方式，那么可以设置时间坐标轴的展示刻度为12，时间坐标轴以年月的粒度(二级粒度)模式进行展示，实现步骤如下：

可以先将刻度设置为12个(例如当年的1月到12月)，以便于待展示气泡在时间坐标轴上清楚展示，设置的方式可以参见下述公式：

yAxis＝d3.svg.axis().ticks(12)；

在确定好时间坐标轴的展示刻度的粒度和数量后，将坐标轴使用moment将其展示格式管控以年/月的格式展示：d3.select(坐标轴刻度点的时间).format(′YYYY/MM′)。

当diffForYear数值为1(处于另一种可能的第二数值区间)时，代表yMax跟yMin之差小于一年，时间坐标轴可以年/月的粒度(二级粒度)格式展示，且当时间轴的展示范围为[最小值前两个月，最大值后两个月]，展示刻度取值个数为：最大值后两个月的月份+12–最小值前两个月的月份。

例如，若最大值为2017年3月，最小值为2016年10月，那么最大值后两个月的月份为3+2＝5，最小值前两个月的月份为10-2＝8，展示刻度的取值个数可以为(3+2)+12-(10-2)＝9，从而可以确定刻度取值个数可以为9，以便保证数据展示美观。

当标准最小值与标准最大值之差超过一年时，刻度个数一般取5个，保证气泡图的美观及功能完善性，具体实现方式可以参见当diffForYear数值为0时的实现方式。

当diffForYear的值为0(处于第三数值区间)且气泡图展示区域只有一个待展示气泡(预设条件)，即只有1个数据的时候，那么将时间轴按照‘年/月/日’的粒度(三级粒度)的格式进行展示，展示刻度个数通常设置为5：

d3.select(坐标轴刻度点的时间).format(′YYYY/MM/DD′)

其中，format为该类库处理日期的一个方法。

本申请实施例还提供了一种气泡图展示装置，应用于气泡图，所述气泡图包括针对第一标准的第一坐标轴和针对第二标准的第二坐标轴，所述装置包括获取单元201、确定单元202和展示单元203，如图2所示：

所述获取单元201，用于获取待展示气泡的最大标准值和最小标准值，所述最大标准值和最小标准值为标识第一标准的数值。

所述确定单元202，用于根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，所述展示刻度的粒度大小根据所述差值确定。

所述展示单元203，用于将所述待展示气泡依据所述第一坐标轴的刻度以及第二坐标轴进行展示。

可选的，所述第一标准包括时间。

所述用于气泡图展示的终端包括处理器和存储器，上述确定单元、获取单元和展示单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来展示在该气泡图中的气泡排布位置体现出第一标准和第二标准，丰富了气泡图的展示效果。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述气泡图展示方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述气泡图展示方法。

本发明实施例提供了一种设备，所述设备用于展示气泡图，所述气泡图包括针对第一标准的第一坐标轴和针对第二标准的第二坐标轴，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：

可选的，所述第一标准包括时间。

若所述差值为第一值处于第一数值区间，根据一级粒度确定所述第一坐标轴的展示刻度。

若所述差值为第二值处于第二数值区间，根据二级粒度确定所述第一坐标轴的展示刻度。

若所述差值为第三值处于第三数值区间，且所述待展示气泡的数量满足预设条件时，根据三级粒度确定所述第一坐标轴的展示刻度。

将需打散的气泡作为所述待展示气泡。

本文中的设备可以是服务器、PC、PAD、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码，其中，所述数据处理设备用于展示气泡图，所述气泡图包括针对第一标准的第一坐标轴和针对第二标准的第二坐标轴：

可选的，所述第一标准包括时间。

将需打散的气泡作为所述待展示气泡。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质可以是下述介质中的至少一种：只读存储器(英文：read-only memory，缩写：ROM)、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备及系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的设备及系统实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上所述，仅为本申请的一种具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应该以权利要求的保护范围为准。

Claims

1.一种气泡图展示方法，其特征在于，应用于气泡图，所述气泡图包括针对第一标准的第一坐标轴和针对第二标准的第二坐标轴，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述第一标准包括时间。

3.根据权利要求1或2所述的方法，其特征在于，所述根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，包括：

4.根据权利要求1或2所述的方法，其特征在于，所述根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，包括：

5.根据权利要求1或2所述的方法，其特征在于，所述根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，包括：

6.根据权利要求1所述的方法，其特征在于，在所述获取待展示气泡的最大标准值和最小标准值之前，所述方法还包括：

将需打散的气泡作为所述待展示气泡。

7.一种气泡图展示装置，其特征在于，应用于气泡图，所述气泡图包括针对第一标准的第一坐标轴和针对第二标准的第二坐标轴，所述装置包括获取单元、确定单元和展示单元：

8.根据权利要求7所述的装置，其特征在于，所述根据所述最大标准值和最小标准值的差值，确定所述第一坐标轴的展示刻度，包括：

所述确定单元还用于若所述差值第一数值区间，根据一级粒度确定所述第一坐标轴的展示刻度。

9.一种用于气泡图展示的设备，其特征在于，所述设备包括处理器以及存储器：

所述处理器用于根据所述程序代码中的指令执行权利要求1-6任一项所述的气泡图展示方法。

10.一种存储介质，其特征在于，所述存储介质用于存储程序代码，所述程序代码用于执行权利要求1-6任一项所述的气泡图展示方法。