CN107945248A - 一种气泡图文字展示方法及装置 - Google Patents

Abstract

本发明公开了一种气泡图文字展示方法及装置，涉及计算机技术领域，主要目的在于将气泡图中气泡对应的文字尽可能多的显示在气泡中，避免相邻气泡对应的文字相互叠加导致的信息显示混乱，提高了气泡图的整体展示效果与用户查看体验。本发明主要的技术方案为：获取气泡图中气泡的数据信息，所述数据信息包括气泡的位置、大小以及对应文字信息；根据所述数据信息确定在所述气泡内用于显示文字信息的文字显示区域；判断所述文字显示区域是否能够完整显示所述对应文字信息；若不能完整显示，则在所述文字显示区域中对所述对应文字信息进行缩略显示处理。本发明主要用于气泡图中的文字优化处理。

Description

一种气泡图文字展示方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种气泡图文字展示方法及装置。

背景技术

气泡图是数据可视化图表中，最基本也是最为重要的一类图表，是最有效的可用分析工具之一，它能直观地显示三个维度的数据对比，即：横轴数值、纵轴数值、气泡大小。气泡图与散点图相似，不同之处在于，气泡图允许在图表中额外加入一个表示大小的变量。实际上，这就像以二维方式绘制包含三个变量的图表一样。

目前常见的商业级图表(如ECharts，highCharts等)，均提供了基本的气泡图组件以供使用，而现有的气泡图组件对于气泡图中气泡对应文字的展示方式，都是根据所要展示的文字在指定的位置展示该文字，通常文字的位置位于气泡的中间或气泡下方，并无其他特殊的处理和显示优化。现有的文字展示方式虽然能够展示气泡对应的文字，但是，由于气泡图中的每个数据点对应的气泡大小各不相同，而每一个气泡所对应的文字信息的长度也有区别，若只是将文字在气泡中居中单行显示，那么文字信息很容易溢出气泡的显示范围，与其他气泡中的文字相重合，导致气泡中的区域无法得到充分利用，并且，溢出的文字还会干扰到相邻的其他气泡中的文字，尤其是在气泡密集的区域，文字间的彼此重合将严重影响用户查看气泡对应的文字信息，从而降低了气泡图的展示效果与用户查看体验。

发明内容

有鉴于此，本发明提供一种气泡图文字展示方法及装置，主要目的在于将气泡图中气泡对应的文字尽可能多的显示在气泡中，避免相邻气泡对应的文字相互叠加导致的信息显示混乱，提高了气泡图的整体展示效果与用户查看体验。

为达到上述目的，本发明主要提供如下技术方案：

一方面，本发明提供了一种气泡图文字展示方法，该方法包括：

获取气泡图中气泡的数据信息，所述数据信息包括气泡的位置、大小以及对应文字信息；

根据所述数据信息确定在所述气泡内用于显示文字信息的文字显示区域；

判断所述文字显示区域是否能够完整显示所述对应文字信息；

若不能完整显示，则在所述文字显示区域中对所述对应文字信息进行缩略显示处理。

优选的，根据所述数据信息确定在所述气泡内用于显示文字信息的文字显示区域包括：

根据所述对应文字信息获取文字字体信息和文字长度；

利用所述文字字体信息判断所述气泡内是否能够完整显示单个文字；

若能够，则根据所述气泡的位置、大小确定所述气泡内的文字显示区域。

优选的，判断所述文字显示区域是否能够完整显示所述对应文字信息包括：

利用文字字体信息确定所述文字显示区域中能够显示的最大文字长度，所述最大文字长度为所述文字显示区域中显示的单行文字长度与文字行数的乘积；

判断所述对应文字信息的文字长度是否小于所述最大文字长度；

若小于，则确定所述文字显示区域能够完整显示所述对应文字信息。

优选的，所述确定所述文字显示区域能够完整显示所述对应文字信息包括：

判断所述对应文字信息的长度是否小于所述文字显示区域显示的单行文字长度；

若小于，则在所述文字显示区域内单行居中显示所述对应文字信息；

若大于，则在所述文字显示区域内折行显示所述对应文字信息。

优选的，所述在所述文字显示区域中对所述对应文字信息进行缩略显示处理包括：

确定所述对应文字信息显示在所述文字显示区域中溢出的文字；

隐藏所述溢出的文字，并在显示的文字后添加省略号，以提示所述文字信息未显示完全；

当所述气泡或所述文字显示区域被选中时，修改所述文字显示区域的显示范围，以显示完整的文字信息。

优选的，当所述气泡或所述文字显示区域被选中，并且所述气泡与相邻气泡存在重叠显示时，所述方法还包括：

修改所述文字信息的字体颜色；

和/或修改所述气泡的背景颜色。

另一方面，本发明还提供了一种气泡图文字展示装置，该装置包括：

获取单元，用于获取气泡图中气泡的数据信息，所述数据信息包括气泡的位置、大小以及对应文字信息；

确定单元，用于根据所述获取单元得到的数据信息确定在所述气泡内用于显示文字信息的文字显示区域；

判断单元，用于判断所述确定单元确定的文字显示区域是否能够完整显示所述获取单元得到的对应文字信息；

显示优化单元，用于当所述判断单元判断所述对应文字信息不能完整显示时，在所述文字显示区域中对所述对应文字信息进行缩略显示处理。

优选的，所述确定单元包括：

获取模块，用于根据所述对应文字信息获取文字字体信息和文字长度；

判断模块，用于利用所述获取模块得到的文字字体信息判断所述气泡内是否能够完整显示单个文字；

确定模块，用于当所述判断模块判断能够完整显示单个文字时，根据所述气泡的位置、大小确定所述气泡内的文字显示区域。

优选的，所述判断单元包括：

确定模块，用于利用文字字体信息确定所述文字显示区域中能够显示的最大文字长度，所述最大文字长度为所述文字显示区域中显示的单行文字长度与文字行数的乘积；

判断模块，用于判断所述对应文字信息的文字长度是否小于所述确定模块确定的最大文字长度；

所述确定模块还用于，当所述判断模块判断所述对应文字信息小于最大文字长度时，确定所述文字显示区域能够完整显示所述对应文字信息。

优选的，所述确定模块包括：

判断子模块，用于判断所述对应文字信息的长度是否小于所述文字显示区域显示的单行文字长度；

显示子模块，用于当所述判断子模块的判断结果为小于时，在所述文字显示区域内单行居中显示所述对应文字信息；

所述显示子模块还用于，用于当所述判断子模块的判断结果为大于时，在所述文字显示区域内折行显示所述对应文字信息。

优选的，所述显示优化单元包括：

确定模块，用于确定所述对应文字信息显示在所述文字显示区域中溢出的文字；

处理模块，用于隐藏所述确定模块确定溢出的文字，并在显示的文字后添加省略号，以提示所述文字信息未显示完全；

修改模块，用于当所述气泡或所述文字显示区域被选中时，修改所述文字显示区域的显示范围，以显示完整的文字信息。

优选的，所述修改模块还用于，当所述气泡或所述文字显示区域被选中，并且所述气泡与相邻气泡存在重叠显示时，修改所述文字信息的字体颜色，和/或修改所述气泡的背景颜色。

依据上述本发明所提出的气泡图文字展示方法及装置，通过在气泡内部确定用于显示文字信息的文字显示区域，由该文字显示区域编辑气泡对应的文字信息，在文字信息较多时，尽可能多的将文字信息显示在文字显示区域中，以显示气泡对应的文字内容。相对于现有的气泡图文字显示方式，本发明所采用的气泡图文字展示方法将文字显示在对应的气泡内部，使得文字与气泡的对应关系更加明确，同时，将文字的显示区域严格限定在气泡内，保证了过多的文字信息不会造成文字溢出，不会影响相邻气泡对应的文字信息显示，从而提高了气泡图的整体展示效果与用户查看体验。此外，对于进行缩略显示处理的文字信息，还可以通过在选中时显示全部文字信息的方式来突出用户的具体操作，以此实现了对用户操作的互动效果，进一步地优化用户使用气泡图的查看体验。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例提出的一种气泡图文字展示方法的流程图；

图2示出了气泡图中气泡内的文字显示区域确定方式示意图；

图3示出了本发明实施例提出的另一种气泡图文字展示方法的流程图；

图4示出的是未经文字展示优化的气泡图示意图；

图5示出的是经过本发明实施例气泡图文字展示方法进行优化后的气泡图示意图；

图6示出了本发明实施例提出的一种气泡图文字展示装置组成框图；

图7示出了本发明实施例提出的另一种气泡图文字展示装置组成框图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

本发明实施例提供了一种气泡图文字展示的方法，如图1所示，该方法应用于优化显示气泡图中气泡对应的文字信息，具体步骤包括：

101、获取气泡图中气泡的数据信息。

其中，气泡的数据信息主要包括气泡的显示信息和气泡的内容信息两方面，气泡的显示信息是指气泡显示在气泡图中的相关信息，如气泡在图中的位置，气泡的大小等，而气泡的内容信息主要是指与气泡关联的文字信息。

进一步的，通过分析气泡的显示信息可以获取气泡中心的位置坐标，气泡的半径大小，进而确定气泡的显示面积，其中，气泡中心的位置坐标也用于表示该气泡在气泡图中的位置，而气泡的大小则通过气泡的半径决定。而通过分析气泡的内容信息可以获取气泡对应文字信息中字体信息，如文字或符号的宽度、高度等，以及文字信息的长度等。

102、根据气泡的数据信息确定在该气泡内用于显示文字信息的文字显示区域。

要在气泡内显示文字信息，首先确保气泡的大小能够显示出完整的文字。因此，在确定用于显示文字信息的文字显示区域之前，应先判断气泡的大小是否能够完整显示出文字信息中的单个文字。该判断可通过步骤101中所获取的数据信息进行具体判断，例如，将文字宽度、高度分别与气泡的直径或半径进行对比。如果气泡的大小无法显示出单个文字，则将该文字显示区域设置在气泡相邻的位置上，如正下方或右侧等，对此种情况，文字信息将不显示在气泡内容，因此，本发明实施例不限定具体的文字显示方式。只有在气泡内能够显示完整的单个文字时，再根据气泡的显示面积确定用于显示文字信息的文字显示区域。

在确定文字显示区域时，由于气泡图中所显示的气泡的形状为圆形，而文字信息的显示区域一般为矩形的块状区域，因此，要在气泡内确定文字显示区域就是在圆形内划分出一个或多个矩形区域，如图2所示，其中A示出的为在气泡中划分出一个矩形区域，在该区域中可以显示三行的文字，而B示出的是在气泡中划分出多个矩形区域，每一个矩形区域可以用于显示一行的文字。通过对比可见，在同一气泡中B方式显然可以展示出更多的文字信息，但是对于方式B而言，要确定出多个矩形区域的计算复杂程度也相对更高，并且还需要在显示文字信息时，保证文字信息在各个区域中显示的连续性。因此，图2中给出的确定方式可根据具体的实际情况来选择具体的方式。

对于图2中给出的确定方式，主要是根据气泡的显示面积来确定文字显示区域的大小，也就是在气泡的显示范围内尽可能大的确定出用于文字显示的区域。除此之外，还可以根据所要显示的具体文字内容来确定文字显示区域，即通过文字信息的长度计算所需的显示区域，再判断该显示区域是否可以设置在气泡的显示区域内，若可以，则将该显示区域确定为最终的文字显示区域，若不能设置，则可按照图2中的方式确定出最终的文字显示区域。

103、判断文字显示区域是否能够完整显示对应文字信息。

在确定了文字显示区域后，就可以将气泡对应的文字信息加载到该文字显示区域中。其中，加载的结果可以分为两种：一种是文字显示区域能够完整显示对应文字信息，另一种是文字显示区域无法完整显示对应文字信息。由于对加载的不同结果需要采用不同的处理方式加以显示，因此，需要对加载的结果进行判断，具体的判断方式本实施例不做具体限定，其中可行的一种是对比气泡对应文字信息的长度与文字显示区域中能够显示的最大文字长度，其中，气泡对应文字信息的长度可以通过字体信息中的文字宽度结合文字信息中的文字数量计算得到，而文字显示区域中能够显示的最大文字长度也可以通过字体信息中的文字宽度、高度结合文字显示区域的宽度、高度计算能够显示的最大文字长度，即最大文字长度是该文字显示区域中所显示的当行文字的长度与能够显示的文字行数的乘积。

当气泡对应文字信息的长度大于文字显示区域中能够显示的最大文字长度时，说明要全部显示气泡对应的文字信息时，文字将会溢出文字显示区域，对于该情况的显示处理，参考步骤104。

当气泡对应文字信息的长度小于文字显示区域中能够显示的最大文字长度时，说明气泡对应的文字信息可以完整地显示在文字显示区域内，而在将气泡对应的文字信息显示在气泡内的文字显示区域中时，文字的具体显示方式还可以根据气泡对应文字信息的长度进行区别显示，如对比气泡对应文字信息的长度与文字显示区域的宽度，也就是判断文字信息是否能够在文字显示区域中进行单行显示，若能够，则将文字信息在文字显示区域内单行居中显示，若不能，则将文字显示区域设置为多行显示，每行的行高可根据文字的字体高度确定，再将文字信息显示方式设置为自动换行，以保证文字信息能够在文字显示区域内折行显示。

104、若不能完整显示，则在所述文字显示区域中对所述对应文字信息进行缩略显示处理。

根据步骤103的判断，当文字显示区域内无法完整显示气泡的文字信息时，就在显示时导致文字溢出文字显示区域，对于此种情况，需要对文字信息中溢出部分的文字进行缩略显示处理。缩略显示处理主要是先确定溢出部分的文字，这可以通过最大文字长度来判断文字信息中的溢出文字，再将溢出部分的文字在显示时进行隐藏，并且在文字显示区域中已显示的文字部分后添加省略号，以提示该气泡对应的文字信息没有显示完全。缩略显示的处理方式可以通过使用通用的控件来实现，也可以根据生成气泡图的技术通过自定义编程的方式来实现。

通过缩略显示的文字信息在气泡图中能够将文字信息尽可能多的展现在对应的气泡内部，充分地利用对应气泡内的显示空间。对于所隐藏的文字部分，也可以通过进一步的操作将其再次显示出来，比如，可以通过查看气泡图的用户手动选择，当气泡或对应的文字显示区域被选中时，文字显示区域将会自动判断其中的文字信息是否进行了缩略显示，若存在，则将隐藏的文字部分通过修改文字显示区域的显示范围将完整的文字信息展示在气泡图中。

进一步的，为了提高用户的操作体验，还可以在用户对气泡图中的气泡进行选中操作时，将被选中的气泡以及对应的文字信息进行优化的显示处理，包括：将文字信息的字体颜色进行高亮处理，或修改为其他的颜色；和/或修改气泡的背景颜色，以提示用户当前选中的气泡。需要特别说明的是，此优化调整的主要目的是为了让用户对所选的目标气泡与其他气泡加以区分，而这种情况特别适用于气泡与相邻气泡存在重叠显示，此时，相互重叠的气泡中所显示的文字信息也可能会重叠导致显示混乱的不良效果，通过该优化，将选中的气泡与对应文字信息进行突出显示，不仅能够更清楚所选中的气泡并将该气泡对应的文字信息进行完整显示，还能够增加气泡图的操作互动效果，增加了气泡图的可操作性。此外，除了修改字体颜色或气泡背景色外，还可以通过将不同的气泡设置不同的图层，在选中时，将选中的气泡图层显示在顶层中加以突出显示也能够达到上述的显示效果。

结合上述的实现方式可以看出，本发明实施例所采用的气泡图文字展示方法，通过在气泡内部确定用于显示文字信息的文字显示区域，由该文字显示区域编辑气泡对应的文字信息，在文字信息较多时，尽可能多的将文字信息显示在文字显示区域中，以显示气泡对应的文字内容。相对于现有的气泡图文字显示方式，本发明所采用的气泡图文字展示方法将文字显示在对应的气泡内部，使得文字与气泡的对应关系更加明确，同时，将文字的显示区域严格限定在气泡内，保证了过多的文字信息不会造成文字溢出，不会影响相邻气泡对应的文字信息显示，从而提高了气泡图的整体展示效果与用户查看体验。

以下为了更加详细地说明本发明提出的一种气泡图文字展示方法，将通过具体的气泡图生成技术来说明气泡对应文字的展示方法，由于生成气泡图的技术手段众多，无法逐一举例说明，本发明实施例中以D3.js技术进行具体说明。需要说明的是，其他生成气泡图的技术虽然具体的实现手段上有所区别，但在实现原理上可依据上述图1所给出的实现方法。

D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作。在此对D3.js的基础知识不再做过多的说明，而是针对气泡图的可视化实现，特别是对气泡内文字的展示进行主要说明，具体步骤如图3所示，包括：

201、获取气泡图中的所有气泡。

针对一张气泡图，首先要获取该图中的所有气泡，并逐一对每个气泡所对应的文字信息进行处理。在D3.js中，scatter-item是d3生成的所有气泡的类(class)，其值根据生成的气泡而改变，因此，通过获取scatter-item的值就可以得到气泡图中各个气泡的参数数据，执行的语句如下：

var scatterItems＝d3.selectAll("circle.scatter-item")

202、获取每一个气泡对应的参数数据。

本实施例中所需要获取的气泡对应的参数数据包括：文字信息，文字显示区域中单行的最大文字数，以及气泡的半径。具体的执行语句如下：

circleR＝Number(d3.select(scatterItems[0][i]).attr("r"))，

textWidth＝2*circleR，

textMaxNum＝Math.floor(textWidth/fontSize)，

textContent＝scatterItems[0][i]._data_.name，

textState＝0；

其中，circleR为气泡的半径；extWidth为气泡的直径或文字显示区域的显示最大宽度；textMaxNum为文字显示区域中单行的最大文字数；fontSize为文字的字体大小；textContent为文字信息；textState表示文字显示区域中是否折行，如果显示文字长度textContent.length小于等于最大显示文字的长度，则设为0，否则代表了文字显示将溢出气泡，textState的值需要设置为1，以增加文字显示的总长度。

203、确定文字显示区域在气泡图中的位置。

本实施例中采用div元素确定文字显示区域。其中，div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。在气泡图中设定每一个div元素对应的宽度为气泡的直径，最大高度为1.6*circle，判断气泡对应的文字是否溢出气泡，并设置div元素的left属性为：

当文字溢出时，

xScale(scatterItems[0][i]._data_.xdata)-fontSize*textMaxNum/2+"px"；

当文字不溢出时：

xScale(scatterItems[0][i]._data_.xdata)-fontSize*textContent.length/2+"px"；

其中，xScale(scatterItems[0][i]._data_.xdata)表示气泡圆心到左边界的距离；fontSize*textMaxNum/2、fontSize*textContent.length/2代表了当前显示的文字容器宽度的一半，两者相减则在水平方向上定位到了气泡的中心；"px"为div元素在气泡图上的显示单元坐标，用于定位div元素的具体位置。

在确定div元素的left属性后，再设置div元素的top属性：

yScale(scatterItems[0][i]._data_.ydata)-scatterDivHeight/2+"px"；

其中，yScale(scatterItems[0][i]._data_.ydata)表示气泡圆心到上边界的距离，

scatterDivHeight/2为当前气泡对应的文字显示区域高度的一半，两者相减，则文字显示区域在竖直方向上定位到了气泡的中心；

在确定出气泡中文字显示区域的左边界与上边界后，由div元素所确定的文字显示区域就基本确定了。最后，将文字信息显示在该区域中即可。通过上述的设置，可以最大程度的利用该气泡内的区域，该区域可以视为为一个矩形的文本编辑框，在该框中加入文字信息，可以是单行的也可以使多行的。

204、对文字溢出的部分进行缩略处理。

存在文字溢出的情况时，文字显示区域中也分为单行显示或多行显示的情况，单行显示一般是该文字显示区域中无法显示多行的文字，而多行显示则是其对应的文字信息过长，在多行显示中，具体的行数可根据字体的高度与文字显示区域的高度比来确定。

对于溢出的文字，本发明实施例给出的缩略处理方法为设置文字显示区域的级联样式表(Cascading Style Sheet)属性，简称“CSS属性”。由于各个浏览器中对CSS属性的设置情况各有区别，这里也不做逐一列举，以谷歌浏览器下需要添加的样式为例进行说明，具体的设置如下：

overflow:hidden；

text-overflow:ellipsis；

-webkit-box-orient:vertical；

display:-webkit-box；

-webkit-line-clamp:line-number；

通过上述的设置，溢出部分的文字将被隐藏，并且在文字显示区域中的所显示的文字部分后添加省略号，以示该内容未完整显示。通过上述的显示优化后，其文字展示的效果可参见图4与图5，其中图4是未进行优化的效果，而图5为相同的图在进行优化过后所展示的效果。

对于缩略处理，本实施例中也可以使用对应于js的控件：clamp.js，是一个换行溢出文字缩略的控件，该控件适用于任何的浏览器，具体如下：

$clamp(document.getElementsByClassName("circleText")[i],{clamp:String(line-number)})；

其中，document.getElementsByClassName("circleText")[i]是生成的每一个文字显示区域，line-number是当前容器的最大显示行数。

通过该控件的优化展示同样能达到图5中的展示效果，此外，在图5中可以看出，如果气泡过小，其内部无法展示文字的，本实施例将不对此类气泡进行优化显示处理。

进一步的，作为对上述方法的实现，本发明实施例提供了一种气泡图文字展示装置，该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。该装置用于展示页面表格的终端中，具体如图6所示，该装置包括：

获取单元31，用于获取气泡图中气泡的数据信息，所述数据信息包括气泡的位置、大小以及对应文字信息；

确定单元32，用于根据所述获取单元31得到的数据信息确定在所述气泡内用于显示文字信息的文字显示区域；

判断单元33，用于判断所述确定单元32确定的文字显示区域是否能够完整显示所述获取单元31得到的对应文字信息；

显示优化单元34，用于当所述判断单元33判断所述对应文字信息不能完整显示时，在所述文字显示区域中对所述对应文字信息进行缩略显示处理。

进一步的，如图7所示，所述确定单元32包括：

获取模块321，用于根据所述对应文字信息获取文字字体信息和文字长度；

判断模块322，用于利用所述获取模块321得到的文字字体信息判断所述气泡内是否能够完整显示单个文字；

确定模块323，用于当所述判断模块322判断能够完整显示单个文字时，根据所述气泡的位置、大小确定所述气泡内的文字显示区域。

进一步的，如图7所示，所述判断单元33包括：

确定模块331，用于利用文字字体信息确定所述文字显示区域中能够显示的最大文字长度，所述最大文字长度为所述文字显示区域中显示的单行文字长度与文字行数的乘积；

判断模块332，用于判断所述对应文字信息的长度是否小于所述确定模块331确定的最大文字长度；

所述确定模块331还用于，当所述判断模块332判断所述对应文字信息小于最大文字长度时，确定所述文字显示区域能够完整显示所述对应文字信息。

进一步的，如图7所示，所述确定模块331包括：

判断子模块3311，用于判断所述对应文字信息的长度是否小于所述文字显示区域显示的单行文字长度；

显示子模块3312，用于当所述判断子模块3311的判断结果为小于时，在所述文字显示区域内单行居中显示所述对应文字信息；

所述显示子模块3312还用于，用于当所述判断子模块3311的判断结果为大于时，在所述文字显示区域内折行显示所述对应文字信息。

进一步的，如图7所示，所述显示优化单元34包括：

确定模块341，用于确定所述对应文字信息显示在所述文字显示区域中溢出的文字；

处理模块342，用于隐藏所述确定模块341确定溢出的文字，并在显示的文字后添加省略号，以提示所述文字信息未显示完全；

修改模块343，用于当所述气泡或所述文字显示区域被选中时，修改所述文字显示区域的显示范围，以显示完整的文字信息。

进一步的，如图7所示，所述修改模块343还用于，当所述气泡或所述文字显示区域被选中，并且所述气泡与相邻气泡存在重叠显示时，修改所述文字信息的字体颜色，和/或修改所述气泡的背景颜色。

综上所述，本发明实施例所采用的气泡图文字展示方法及装置，通过在气泡内部确定用于显示文字信息的文字显示区域，由该文字显示区域编辑气泡对应的文字信息，在文字信息较多时，尽可能多的将文字信息显示在文字显示区域中，以显示气泡对应的文字内容。相对于现有的气泡图文字显示方式，本发明实施例所采用的气泡图文字展示方法将文字显示在对应的气泡内部，使得文字与气泡的对应关系更加明确，同时，将文字的显示区域严格限定在气泡内，保证了过多的文字信息不会造成文字溢出，不会影响相邻气泡对应的文字信息显示，从而提高了气泡图的整体展示效果与用户查看体验。此外，对于进行缩略显示处理的文字信息，还可以通过在选中时显示全部文字信息的方式来突出用户的具体操作，以此实现了对用户操作的互动效果，进一步地优化用户使用气泡图的查看体验。

所述气泡图文字展示装置包括处理器和存储器，上述获取单元、确定单元、判断单元和显示优化单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数将气泡图中气泡对应的文字尽可能多的显示在气泡中，避免相邻气泡对应的文字相互叠加导致的信息显示混乱，提高了气泡图的整体展示效果与用户查看体验。

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

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：获取气泡图中气泡的数据信息，所述数据信息包括气泡的位置、大小以及对应文字信息；根据所述数据信息确定在所述气泡内用于显示文字信息的文字显示区域；判断所述文字显示区域是否能够完整显示所述对应文字信息；若不能完整显示，则在所述文字显示区域中对所述对应文字信息进行缩略显示处理。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

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

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种气泡图文字展示方法，其特征在于，所述方法包括：

获取气泡图中气泡的数据信息，所述数据信息包括气泡的位置、大小以及对应文字信息；

根据所述数据信息确定在所述气泡内用于显示文字信息的文字显示区域；

判断所述文字显示区域是否能够完整显示所述对应文字信息；

若不能完整显示，则在所述文字显示区域中对所述对应文字信息进行缩略显示处理。

2.根据权利要求1所述的方法，其特征在于，根据所述数据信息确定在所述气泡内用于显示文字信息的文字显示区域包括：

根据所述对应文字信息获取文字字体信息和文字长度；

利用所述文字字体信息判断所述气泡内是否能够完整显示单个文字；

若能够，则根据所述气泡的位置、大小确定所述气泡内的文字显示区域。

3.根据权利要求2所述的方法，其特征在于，判断所述文字显示区域是否能够完整显示所述对应文字信息包括：

利用文字字体信息确定所述文字显示区域中能够显示的最大文字长度，所述最大文字长度为所述文字显示区域中显示的单行文字长度与文字行数的乘积；

判断所述对应文字信息的文字长度是否小于所述最大文字长度；

若小于，则确定所述文字显示区域能够完整显示所述对应文字信息。

4.根据权利要求3所述的方法，其特征在于，确定所述文字显示区域能够完整显示所述对应文字信息包括：

判断所述对应文字信息的长度是否小于所述文字显示区域显示的单行文字长度；

若小于，则在所述文字显示区域内单行居中显示所述对应文字信息；

若大于，则在所述文字显示区域内折行显示所述对应文字信息。

5.根据权利要求1-4中任一项所述的方法，其特征在于，在所述文字显示区域中对所述对应文字信息进行缩略显示处理包括：

确定所述对应文字信息显示在所述文字显示区域中溢出的文字；

隐藏所述溢出的文字，并在显示的文字后添加省略号，以提示所述文字信息未显示完全；

当所述气泡或所述文字显示区域被选中时，修改所述文字显示区域的显示范围，以显示完整的文字信息。

6.根据权利要求5所述的方法，其特征在于，当所述气泡或所述文字显示区域被选中，并且所述气泡与相邻气泡存在重叠显示时，所述方法还包括：

修改所述文字信息的字体颜色；

和/或修改所述气泡的背景颜色。

7.一种气泡图文字展示装置，其特征在于，所述装置包括：

获取单元，用于获取气泡图中气泡的数据信息，所述数据信息包括气泡的位置、大小以及对应文字信息；

确定单元，用于根据所述获取单元得到的数据信息确定在所述气泡内用于显示文字信息的文字显示区域；

判断单元，用于判断所述确定单元确定的文字显示区域是否能够完整显示所述获取单元得到的对应文字信息；

显示优化单元，用于当所述判断单元判断所述对应文字信息不能完整显示时，在所述文字显示区域中对所述对应文字信息进行缩略显示处理。

8.根据权利要求7所述的装置，其特征在于，所述确定单元包括：

获取模块，用于根据所述对应文字信息获取文字字体信息和文字长度；

判断模块，用于利用所述获取模块得到的文字字体信息判断所述气泡内是否能够完整显示单个文字；

确定模块，用于当所述判断模块判断能够完整显示单个文字时，根据所述气泡的位置、大小确定所述气泡内的文字显示区域。

9.根据权利要求8所述的装置，其特征在于，所述判断单元包括：

确定模块，用于利用文字字体信息确定所述文字显示区域中能够显示的最大文字长度，所述最大文字长度为所述文字显示区域中显示的单行文字长度与文字行数的乘积；

判断模块，用于判断所述对应文字信息的文字长度是否小于所述确定模块确定的最大文字长度；

所述确定模块还用于，当所述判断模块判断所述对应文字信息小于最大文字长度时，确定所述文字显示区域能够完整显示所述对应文字信息。

10.根据权利要求7-9中任一项所述的装置，其特征在于，所述显示优化单元包括：

确定模块，用于确定所述对应文字信息显示在所述文字显示区域中溢出的文字；

处理模块，用于隐藏所述确定模块确定溢出的文字，并在显示的文字后添加省略号，以提示所述文字信息未显示完全；

修改模块，用于当所述气泡或所述文字显示区域被选中时，修改所述文字显示区域的显示范围，以显示完整的文字信息。