标签文本的显示方法及装置制造方法及图纸

本发明专利技术公开了一种标签文本的显示方法及装置，涉及信息技术领域，解决了标签文本过长无法显示的问题并且不会对页面布局和美观性带来影响，所述方法包括：首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。本发明专利技术适用于图表标签文本的显示。

Method and device for displaying label text

The invention discloses a method and a device for displaying a text label, relates to the field of information technology, to solve the problem of unable to display the label text is too long and not on the page layout and appearance of the impact, the method includes displaying the label text width corresponding to the first calculation chart, and calculate the chart label text the maximum width of the display area; then detecting the display width is greater than the maximum width; if the display width is greater than the maximum width, according to the display width and the maximum width is determined, the label text to wrap the starting position part; when displaying the text label and according to the starting position of the label text to wrap the display part for line display. The invention is suitable for displaying a chart label text.

【技术实现步骤摘要】
标签文本的显示方法及装置
本专利技术涉及信息
，尤其涉及一种标签文本的显示方法及装置。
技术介绍
近些年来，随着互联网、云计算、大数据的飞速发展，数据可视化对互联网产品的影响越来越大，为了更好的展现产品中的数据，可以采用图表显示的方式。目前有许多的图表提供软件，但是有时会存在图表中的标签文本在过长的情况下无法全部显示的问题。例如，Echart是百度公司推出的一款数据可视化产品，以其开源、免费、易用、图表类型丰富、拓展方便的优点迅速占领了全球数据可视化产品的市场。Echart数据图表类型丰富，环形图是其产品中使用较广泛的图表类型之一，但是Echart中的环形图标签文本在过长的情况下，超出Echart环形图所在父容器区域的部分会被隐藏，用户无法看见，影响了用户体验。目前为了解决上述问题，可以修改标签文本的长度，进而实现缩短标签文本长度的目的，然而，有时标签文本的内容需要全部进行显示，这样会限制业务的发展；还可以通过增大图表所在父容器的尺寸的方式，实现将图表中的标签文本进行全部显示，但是在大多数情况下网页中除了图表外还有其他网页元素，通过增大图表所在父容器的尺寸的方式会对整个页面的布局、排版造成影响，导致整个网页布局紊乱或者不够美观。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的标签文本的显示方法及装置。为了达到上述目的，本专利技术主要提供如下技术方案：一方面，本专利技术提供了一种标签文本的显示方法，该方法包括：计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。另一方面，本专利技术提供了一种标签文本的显示装置，该装置包括：计算单元，用于计算图表对应的标签文本的显示宽度；所述计算单元，还用于计算所述图表中的标签文本显示区域的最大宽度；检测单元，用于检测所述计算单元计算的显示宽度是否大于所述最大宽度；确定单元，用于若所述检测单元检测出所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；显示单元，用于当显示所述标签文本时，根据所述确定单元确定的起始位置，对所述标签文本中待换行显示部分进行换行显示。借由上述技术方案，本专利技术实施例提供的技术方案至少具有下列优点：本专利技术提供的一种标签文本的显示方法及装置，首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。与现有技术相比，本专利技术不需要修改标签文本长度，不会对图表的数据展示效果以及用户理解带来影响，并且不需要修改图表所在父容器的尺寸，不会造成整个页面布局紊乱或者对页面整体的美观性及用户体验带来影响，而且对图表空白区域做了充分、合理的利用，既解决了标签文本过长无法显示的问题又不会对页面布局和美观性带来影响。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1示出了本专利技术实施例提供的一种标签文本的显示方法流程示意图；图2示出了本专利技术实施例提供的另一种标签文本的显示方法流程示意图；图3示出了本专利技术实施例提供的一种标签文本的显示装置结构示意图；图4示出了本专利技术实施例提供的另一种标签文本的显示装置结构示意图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。本专利技术实施例提供的一种标签文本的显示方法，如图1所示，该方法包括：101、计算图表对应的标签文本的显示宽度，以及计算图表中的标签文本显示区域的最大宽度。其中，所述图表对应的标签文本在标签文本显示区域中进行显示，对于本专利技术实施例，通过计算图表中的标签文本显示区域的最大宽度，可以得到标签文本可显示的最大宽度。102、检测标签文本的显示宽度是否大于标签文本显示区域的最大宽度。对于本专利技术实施例，当检测出标签文本的显示宽度大于标签文本显示区域的最大宽度时，可以确定该标签文本在显示时存在不能显示的部分；当检测出标签文本的显示宽度小于或等于标签文本显示区域的最大宽度时，可以确定该标签文本在显示时能够完整显示，不存在不能显示的部分。103、若标签文本在网页中的显示宽度大于标签文本显示区域的最大宽度，则根据显示宽度以及最大宽度，确定标签文本中待换行显示部分的起始位置。对于本专利技术实施例，根据标签文本在网页中的显示宽度以及标签文本显示区域的最大宽度，可以计算得到标签文本中待换行显示部分的宽度，进而根据标签文本中待换行显示部分的宽度以及标签文本在网页中的显示宽度，可以确定标签文本中待换行显示部分的起始位置。104、当显示标签文本时，根据标签文本中待换行显示部分的起始位置，对标签文本中待换行显示部分进行换行显示。对于本专利技术实施例，根据标签文本中待换行显示部分的起始位置，可以确定标签文本中需要进行换行显示的部分，对需要进行换行显示的部分进行换行显示，进而实现对标签文本中待换行显示部分进行换行显示。进一步地，在确定标签文本中需要进行换行显示的部分之后，还可以包括：检测标签文本中需要进行换行显示部分的宽度是否大于图表中的标签文本显示区域的最大宽度；若大于，则确定换行显示部分中待换行显示部分的起始位置；根据换行显示部分中待换行显示部分的起始位置，确定换行显示部分中需要进行换行显示的部分。以此类推，得到所有需要进行换行显示的部分，最后对这些部分进行换行显示。本专利技术提供的一种标签文本的显示方法，首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。与现有技术相比，本专利技术不需要修改标签文本长度，不会对图表的数据展示效果以及用户理解带来影响，并且不需要修改图表所在父容器的尺寸，不会造成整个页面布局紊乱或者对页面整体的美观性及用户体验带来影响，而且对图表空白区域做了充分、合理的利用，既解决了标签文本过长无法显示的问题又不会对页面布局和美观性带来影响。具体的，本专利技术实施例提供了另一种标签文本的显示方法，以Echart中的环形图为例，如图2所示，该方法包括：201、获本文档来自技高网...

【技术保护点】
一种标签文本的显示方法，其特征在于，包括：计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。

【技术特征摘要】
1.一种标签文本的显示方法，其特征在于，包括：计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。2.根据权利要求1所述的标签文本的显示方法，其特征在于，所述计算图表对应的标签文本的显示宽度之前，所述方法还包括：获取所述标签文本对应的字符串长度；所述计算图表对应的标签文本的显示宽度包括：计算所述字符串长度与预置字体尺寸的乘积，得到所述标签文本的显示宽度。3.根据权利要求2所述的标签文本的显示方法，其特征在于，当所述图表位于所述图表对应的父容器的中间区域时，所述计算所述图表中的标签文本显示区域的最大宽度包括：获取所述图表对应的父容器的宽度以及所述图表的宽度；计算所述父容器的宽度与所述图表的宽度之间的差值，并将所述差值除以2得到所述图表中的标签文本显示区域的最大宽度。4.根据权利要求2所述的标签文本的显示方法，其特征在于，所述根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置包括：计算所述最大宽度与所述显示宽度之间的差值，得到所述标签文本中待换行显示部分的宽度；将所述标签文本中待换行显示部分的宽度除以所述预置字体尺寸，得到所述标签文本中待换行显示部分的字符串长度；根据所述标签文本对应的字符串长度和所述标签文本中待换行显示部分的字符串长度，确定所述标签文本中待换行显示部分的起始位置。5.根据权利要求1所述的标签文本的显示方法，其特征在于，所述根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示包括：通过预置substr函数在所述起始位置处插入预置换行字符串，以便实现对所述标签文本中待换行显示部分进行换行显示。6.一种标签文本的...

【专利技术属性】
技术研发人员：程水强，
申请(专利权)人：北京国双科技有限公司，
类型：发明
国别省市：北京,11