标签文本的显示方法及装置与流程

本发明涉及信息技术领域，尤其涉及一种标签文本的显示方法及装置。

背景技术：

近些年来，随着互联网、云计算、大数据的飞速发展，数据可视化对互联网产品的影响越来越大，为了更好的展现产品中的数据，可以采用图表显示的方式。目前有许多的图表提供软件，但是有时会存在图表中的标签文本在过长的情况下无法全部显示的问题。例如，Echart是百度公司推出的一款数据可视化产品，以其开源、免费、易用、图表类型丰富、拓展方便的优点迅速占领了全球数据可视化产品的市场。Echart数据图表类型丰富，环形图是其产品中使用较广泛的图表类型之一，但是Echart中的环形图标签文本在过长的情况下，超出Echart环形图所在父容器区域的部分会被隐藏，用户无法看见，影响了用户体验。

目前为了解决上述问题，可以修改标签文本的长度，进而实现缩短标签文本长度的目的，然而，有时标签文本的内容需要全部进行显示，这样会限制业务的发展；还可以通过增大图表所在父容器的尺寸的方式，实现将图表中的标签文本进行全部显示，但是在大多数情况下网页中除了图表外还有其他网页元素，通过增大图表所在父容器的尺寸的方式会对整个页面的布局、排版造成影响，导致整个网页布局紊乱或者不够美观。

技术实现要素：

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的标签文本的显示方法及装置。

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

一方面，本发明提供了一种标签文本的显示方法，该方法包括：

计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文 本显示区域的最大宽度；

检测所述显示宽度是否大于所述最大宽度；

若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；

当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。

另一方面，本发明提供了一种标签文本的显示装置，该装置包括：

计算单元，用于计算图表对应的标签文本的显示宽度；

所述计算单元，还用于计算所述图表中的标签文本显示区域的最大宽度；

检测单元，用于检测所述计算单元计算的显示宽度是否大于所述最大宽度；

确定单元，用于若所述检测单元检测出所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；

显示单元，用于当显示所述标签文本时，根据所述确定单元确定的起始位置，对所述标签文本中待换行显示部分进行换行显示。

借由上述技术方案，本发明实施例提供的技术方案至少具有下列优点：

本发明提供的一种标签文本的显示方法及装置，首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。与现有技术相比，本发明不需要修改标签文本长度，不会对图表的数据展示效果以及用户理解带来影响，并且不需要修改图表所在父容器的尺寸，不会造成整个页面布局紊乱或者对页面整体的美观性及用户体验带来影响，而且对图表空白区域做了充分、合理的利用，既解决了标签文本过长无法显示的问题又不会对页面布局和美观性带来影响。

附图说明

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

图1示出了本发明实施例提供的一种标签文本的显示方法流程示意图；

图2示出了本发明实施例提供的另一种标签文本的显示方法流程示意图；

图3示出了本发明实施例提供的一种标签文本的显示装置结构示意图；

图4示出了本发明实施例提供的另一种标签文本的显示装置结构示意图。

具体实施方式

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

本发明实施例提供的一种标签文本的显示方法，如图1所示，该方法包括：

101、计算图表对应的标签文本的显示宽度，以及计算图表中的标签文本显示区域的最大宽度。

其中，所述图表对应的标签文本在标签文本显示区域中进行显示，对于本发明实施例，通过计算图表中的标签文本显示区域的最大宽度，可以得到标签文本可显示的最大宽度。

102、检测标签文本的显示宽度是否大于标签文本显示区域的最大宽度。

对于本发明实施例，当检测出标签文本的显示宽度大于标签文本显示 区域的最大宽度时，可以确定该标签文本在显示时存在不能显示的部分；当检测出标签文本的显示宽度小于或等于标签文本显示区域的最大宽度时，可以确定该标签文本在显示时能够完整显示，不存在不能显示的部分。

103、若标签文本在网页中的显示宽度大于标签文本显示区域的最大宽度，则根据显示宽度以及最大宽度，确定标签文本中待换行显示部分的起始位置。

对于本发明实施例，根据标签文本在网页中的显示宽度以及标签文本显示区域的最大宽度，可以计算得到标签文本中待换行显示部分的宽度，进而根据标签文本中待换行显示部分的宽度以及标签文本在网页中的显示宽度，可以确定标签文本中待换行显示部分的起始位置。

104、当显示标签文本时，根据标签文本中待换行显示部分的起始位置，对标签文本中待换行显示部分进行换行显示。

对于本发明实施例，根据标签文本中待换行显示部分的起始位置，可以确定标签文本中需要进行换行显示的部分，对需要进行换行显示的部分进行换行显示，进而实现对标签文本中待换行显示部分进行换行显示。

进一步地，在确定标签文本中需要进行换行显示的部分之后，还可以包括：检测标签文本中需要进行换行显示部分的宽度是否大于图表中的标签文本显示区域的最大宽度；若大于，则确定换行显示部分中待换行显示部分的起始位置；根据换行显示部分中待换行显示部分的起始位置，确定换行显示部分中需要进行换行显示的部分。以此类推，得到所有需要进行换行显示的部分，最后对这些部分进行换行显示。

本发明提供的一种标签文本的显示方法，首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。与现有技术相比，本发明不需要修改标签文本长度，不会对图表的数据展示效果以及用户理解带来影响，并且不需要修改图表所在父容器的尺寸，不会造成整个页面布局 紊乱或者对页面整体的美观性及用户体验带来影响，而且对图表空白区域做了充分、合理的利用，既解决了标签文本过长无法显示的问题又不会对页面布局和美观性带来影响。

具体的，本发明实施例提供了另一种标签文本的显示方法，以Echart中的环形图为例，如图2所示，该方法包括：

201、获取标签文本对应的字符串长度。

需要说明的是，可以通过预置Javascript代码计算得到标签文本对应的字符串长度，具体为：

202、计算字符串长度与预置字体尺寸的乘积，得到标签文本的显示宽度。

其中，所述预置字体尺寸可以根据实际需求进行配置，例如，网页中常见的度量单位是像素(单位：px)，预置字体尺寸可以配置为12px。对于一段字符串长度为len的标签文本，其在网页中占用的宽度tagWidth＝12*len(单位：px)。

203、计算环形图中的标签文本显示区域的最大宽度。

对于本发明实施例，当环形图位于该环形图对应的父容器的中间区域时，所述步骤203具体包括：获取所述环形图对应的父容器的宽度以及所述环形图的宽度；计算所述父容器的宽度与所述环形图的宽度之间的差值，并将所述差值除以2得到所述环形图中的标签文本显示区域的最大宽度。

具体地，echarts的环形图显示在其父容器的中间区域，环形图中的标签文本会向两侧呈水平状显示，所以环形图中标签文本显示区域的最大宽度等于父容器的宽度与环形图的宽度之间的差值再除以2，即环形图父容器宽度parentWidth减去环形图直径chartWidth再除以2，环形图中标签文本显示区域的最大宽度能通过公式maxWidth＝ (parentWidth-chartWidth)/2直接求出(单位：像素)。

204、检测标签文本的显示宽度是否大于标签文本显示区域的最大宽度。

对于本发明实施例，步骤202中计算出了环形图中标签文本的宽度tagWidth＝12*len px(len是标签文本的字符串长度)，步骤203中计算出了环形图中的标签文本显示区域的最大宽度maxWidth＝(parentWidth-chartWidth)/2px，如果标签文本的宽度tagWidth大于标签文本显示区域的最大宽度maxWidth，则标签文本无法全部显示，否则标签文本可以正常全部显示出来。

205、若标签文本的显示宽度大于标签文本显示区域的最大宽度，则根据显示宽度以及最大宽度，确定标签文本中待换行显示部分的起始位置。

对于本发明实施例，所述根据显示宽度以及最大宽度，确定标签文本中待换行显示部分的起始位置包括：计算所述最大宽度与所述显示宽度之间的差值，得到所述标签文本中待换行显示部分的宽度；将所述标签文本中待换行显示部分的宽度除以网页对应的预置字体尺寸，得到所述标签文本中待换行显示部分的字符串长度；根据所述标签文本对应的字符串长度和所述标签文本中待换行显示部分的字符串长度，确定所述标签文本中待换行显示部分的起始位置。

206、当显示标签文本时，根据标签文本中待换行显示部分的起始位置，对标签文本中待换行显示部分进行换行显示。

对于本发明实施例，所述根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示包括：通过预置substr函数在所述起始位置处插入预置换行字符串，以便实现对所述标签文本中待换行显示部分进行换行显示。其中，所述预置substr函数可以配置为javascript中截取子字符串substr函数。所述预置换行字符串可以配置为换行字符串“\n”。

具体地，对于无法全部显示的标签文本其不可见部分宽度等于(maxWidth-tagWidth)px，标签文本字体的大小是12px，所以标签文本不可见部分文本长度hiddenLen＝(maxWidth-tagWidth)/12。echarts环形图中的标签文本是通过echarts接口配置数据传递到echarts控件进行标签文本 的显示，标签文本如果想换行需要在文本换行位置插入一个换行字符串“\n”。对于一段字符串长度为tagLen的标签文本已经计算出来其待换行显示部分的文本长度是hiddenLen，现在通过javascript中截取子字符串substr函数分别截取标签文本换行位置前、后字符串再拼接成一个完整的字符串然后传给echars接口配置数据即可实现标签文本的换行显示效果。通过预置substr函数在标签文本中待换行显示部分的起始位置处插入预置换行字符串，得到可换行的标签文本字符串代码如下：

tagText.substr(0,tagLen-hiddenLen)+“\n”+

tagText.substr(tagLen-hiddenLen,hiddenLen)

其中，上述代码中tagText代表标签文本字符串，tagLen是标签文本字符串的长度，hiddenLen代表标签文本中待换行显示部分的长度。

本发明提供的另一种标签文本的显示方法，首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。与现有技术相比，本发明不需要修改标签文本长度，不会对图表的数据展示效果以及用户理解带来影响，并且不需要修改图表所在父容器的尺寸，不会造成整个页面布局紊乱或者对页面整体的美观性及用户体验带来影响，而且对图表空白区域做了充分、合理的利用，既解决了标签文本过长无法显示的问题又不会对页面布局和美观性带来影响。

进一步地，作为图1所示方法的具体实现，本发明实施例提供了一种标签文本的显示装置，如图3所示，所述装置包括：计算单元31、检测单元32、确定单元33、显示单元34。

所述计算单元31，可以用于计算图表对应的标签文本的显示宽度。

所述计算单元31，还可以用于计算所述图表中的标签文本显示区域的最大宽度。

所述检测单元32，可以用于检测所述计算单元31计算的显示宽度是否 大于所述最大宽度。

所述确定单元33，可以用于若所述检测单元32检测出所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置。

所述显示单元34，可以用于当显示所述标签文本时，根据所述确定单元确定的起始位置，对所述标签文本中待换行显示部分进行换行显示。

需要说明的是，本发明实施例提供的一种标签文本的显示装置所涉及各功能单元的其他相应描述，可以参考图1的对应描述，在此不再赘述。

本发明提供的一种标签文本的显示装置，首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。与现有技术相比，本发明不需要修改标签文本长度，不会对图表的数据展示效果以及用户理解带来影响，并且不需要修改图表所在父容器的尺寸，不会造成整个页面布局紊乱或者对页面整体的美观性及用户体验带来影响，而且对图表空白区域做了充分、合理的利用，既解决了标签文本过长无法显示的问题又不会对页面布局和美观性带来影响。

进一步地，作为图2所示方法的具体实现，本发明实施例提供了另一种标签文本的显示装置，如图4所示，所述装置包括：计算单元41、检测单元42、确定单元43、显示单元44。

所述计算单元41，可以用于计算图表对应的标签文本的显示宽度。

所述计算单元41，还可以用于计算所述图表中的标签文本显示区域的最大宽度。

所述检测单元42，可以用于检测所述计算单元41计算的显示宽度是否大于所述最大宽度。

所述确定单元43，可以用于若所述检测单元42检测出所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签 文本中待换行显示部分的起始位置。

所述显示单元44，可以用于当显示所述标签文本时，根据所述确定单元确定的起始位置，对所述标签文本中待换行显示部分进行换行显示。

进一步地，所述装置还包括：获取单元45。

所述获取单元45，可以用于获取所述标签文本对应的字符串长度。

所述计算单元41，可以用于计算所述字符串长度与预置字体尺寸的乘积，得到所述标签文本的显示宽度。

进一步地，所述计算单元41包括：获取模块411、计算模块412。

所述获取模块411，可以用于当所述图表位于所述图表对应的父容器的中间区域时，获取所述图表对应的父容器的宽度以及所述图表的宽度。

所述计算模块412，可以用于计算所述获取模块411获取的父容器的宽度与所述图表的宽度之间的差值，并将所述差值除以2得到所述图表中的标签文本显示区域的最大宽度。

进一步地，所述确定单元43包括：计算模块431、确定模块432。

所述计算模块431，可以用于计算所述最大宽度与所述显示宽度之间的差值，得到所述标签文本中待换行显示部分的宽度。

所述计算模块431，还可以用于将所述标签文本中待换行显示部分的宽度除以所述预置字体尺寸，得到所述标签文本中待换行显示部分的字符串长度。

所述确定模块432，可以用于根据所述标签文本对应的字符串长度和所述计算模块431计算的标签文本中待换行显示部分的字符串长度，确定所述标签文本中待换行显示部分的起始位置。

所述显示单元44，具体可以用于通过预置substr函数在所述起始位置处插入预置换行字符串。

进一步地，以便实现对所述标签文本中待换行显示部分进行换行显示。

需要说明的是，本发明实施例提供的另一种标签文本的显示装置所涉及各功能单元的其他相应描述，可以参考图2的对应描述，在此不再赘述。

本发明提供的另一种标签文本的显示装置，首先计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度； 然后检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。与现有技术相比，本发明不需要修改标签文本长度，不会对图表的数据展示效果以及用户理解带来影响，并且不需要修改图表所在父容器的尺寸，不会造成整个页面布局紊乱或者对页面整体的美观性及用户体验带来影响，而且对图表空白区域做了充分、合理的利用，既解决了标签文本过长无法显示的问题又不会对页面布局和美观性带来影响。

所述标签文本的显示装置包括处理器和存储器，上述计算单元、检测单元、确定单元、显示单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来解决现有技术中会限制业务发展以及会对整个页面的布局、排版造成影响的问题。

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

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：计算图表对应的标签文本的显示宽度，以及计算所述图表中的标签文本显示区域的最大宽度；检测所述显示宽度是否大于所述最大宽度；若所述显示宽度大于所述最大宽度，则根据所述显示宽度以及所述最大宽度，确定所述标签文本中待换行显示部分的起始位置；当显示所述标签文本时，根据所述起始位置，对所述标签文本中待换行显示部分进行换行显示。

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

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

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

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

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

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

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

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