CN110020285B

CN110020285B - 柱状图的处理方法及装置

Info

Publication number: CN110020285B
Application number: CN201710897072.4A
Authority: CN
Inventors: 刘超
Original assignee: Beijing Gridsum Technology Co Ltd
Current assignee: Beijing Gridsum Technology Co Ltd
Priority date: 2017-09-28
Filing date: 2017-09-28
Publication date: 2021-04-27
Anticipated expiration: 2037-09-28
Also published as: CN110020285A

Abstract

本发明提供了一种柱状图的处理方法和处理装置，处理方法首先获得浏览器的显示界面的宽度值；在所述显示界面的宽度值小于预设阈值时，将所述柱状图转换为横条图，其中，所述横条图的横轴的最大宽度值小于或等于所述预设阈值；最后在所述浏览器的显示界面中显示所述横条图。由于本发明中转换后的横条图中的条目所表征的信息均能够被清晰分辨，因此，无需对浏览器的显示界面的显示比例进行调整就可以清晰地显示出所需要显示的内容，且无需改变浏览器中其它显示内容的显示比例，提高用体验。

Description

柱状图的处理方法及装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种柱状图的处理方法及装置。

背景技术

柱状图是为了能够直观地反映出多个维度数据的差异或者体现各个变量的变化趋势，方便研究各类问题，在统计数据时常用的图表。柱状图通常包括两个用于表示不同类型数据的坐标轴，如横轴和纵轴，例如图1中所示，横轴表示类别，纵轴表示数值。

在使用如网页浏览器等工具展示柱状图时，如果柱状图中横轴的条目较多且当前浏览器的显示界面的显示宽度无法将横轴中的所有条目完全展现出来时，通常的做法是缩小浏览器显示界面的显示比例，以便于在浏览器的显示界面中将柱状图中的横轴的所有条目完全显示出来。

但是，此种方式会使得柱状图中横轴的呈堆叠状，用户无法分辨出柱状图的横轴的条目所显示的内容，且浏览器的显示界面中其它的文字或信息也会随比例缩小，影响用户的使用。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种柱状图的处理方法和装置，在不调整显示器的显示界面的显示比例的前提下也可以很清晰地分辨出所需要展现的条目对应的信息，提高用户体验。

为实现上述目的，本发明提供如下技术方案：

本发明提供了一种柱状图的处理方法，包括：

获得浏览器的显示界面的宽度值；

在所述显示界面的宽度值小于预设阈值时，将所述柱状图转换为横条图，其中，所述横条图的横轴的最大宽度值小于或等于所述预设阈值；

在所述浏览器的显示界面中显示所述横条图。

可选的，所述将所述柱状图转换为横条图具体包括：

获取所述柱状图的横轴的数据源以及所述柱状图的纵轴的数据源；

将所述柱状图的横轴的数据源作为横条图的纵轴的数据源；

将所述柱状图的纵轴的数据源作为所述横条图的横轴的数据源；

根据所述横条图的纵轴的数据源以及所述横条图的横轴的数据源绘制所述横条图。

可选的，所述将所述柱状图转换为横条图具体包括：

将所述柱状图旋转90度形成横条图；

将所述横条图的横轴的显示比例进行调整，使得调整后所述横条图的横轴的长度值小于或等于所述预设阈值。

可选的，还包括：

将所述横条图的纵轴的文字显示格式转换为纵向格式；

将所述横条图的横轴的文字显示格式转换为横向格式。

本发明另一方面提供了一种柱状图的处理装置，包括：

获取装置，用于获得浏览器的显示界面的宽度值；

转换装置，用于在所述显示界面的宽度值小于预设阈值时，将所述柱状图转换为横条图，其中，所述横条图的横轴的最大宽度值小于或等于所述预设阈值；

显示装置，用于在所述浏览器的显示界面中显示所述横条图。

可选的，所述转换装置包括：

获取单元，用于获取所述柱状图的横轴的数据源以及所述柱状图的纵轴的数据源；

第一选择单元，用于将所述柱状图的横轴的数据源作为横条图的纵轴的数据源；

第二选择单元，用于将所述柱状图的纵轴的数据源作为所述横条图的横轴的数据源；

绘制单元，用于根据所述横条图的纵轴的数据源以及所述横条图的横轴的数据源绘制所述横条图。

可选的，所述转换装置包括：

转换单元，用于将所述柱状图旋转90度形成横条图；

调整单元，用于将所述横条图的横轴的显示比例进行调整，使得调整后所述横条图的横轴的长度值小于或等于所述预设阈值。

可选的，还包括：

第一处理单元，用于将所述横条图的纵轴的文字显示格式转换为纵向格式；

第二处理单元，用于将所述横条图的横轴的文字显示格式转换为横向格式。

本发明另一方面提供了一种存储介质，所述存储介质包括存储的程序，其中，所述程序执行上述所述的柱状图的处理方法。

本发明另一方面提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述所述的柱状图的处理方法。

借由上述技术方案，本发明提供的一种柱状图的处理方法首先获得浏览器的显示界面的宽度值；在所述显示界面的宽度值小于预设阈值时，将所述柱状图转换为横条图，其中，所述横条图的横轴的最大宽度值小于或等于所述预设阈值；最后在所述浏览器的显示界面中显示所述横条图。由于本发明中转换后的横条图中的条目所表征的信息均能够被清晰分辨，因此，无需对浏览器的显示界面的显示比例进行调整就可以清晰地显示出所需要显示的内容，且无需改变浏览器中其它显示内容的显示比例，提高用体验。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

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

图1示出了本发明的现有技术中柱状图的显示方式；

图2示出了本发明实施例提供的一种柱状图的处理方法的流程示意图；

图3示出了本发明实施例提供的一种柱状图的处理方法的另一种流程示意图；

图4示出了本发明实施例提供的一种柱状图的处理方法的又一种流程示意图；

图5示出了本发明实施例中处理装置的结构示意图；

图6示出了本发明实施例中处理装置的硬件结构示意图。

具体实施方式

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

本发明公开了一种柱状图的处理方法，用以在不改变浏览器的显示界面的显示比例的前提下，也可以清楚的展现所要显示的信息，提高用户的体验。

本发明主要的应用场景可以为屏幕较小的电子设备中，如手机、PAD、智能手表等。当用户使用这些电子设备的浏览器浏览网页时，经常会遇到柱状图的横轴中的条目无法完全展现的情况，针对此种问题，本发明中提供了一种柱状图的处理方法，以便于在浏览到柱状图时，不需要调整浏览器的显示比例，就可以清楚的展现所要显示的信息。

参见图2，图2是本发明提供的一种柱状图的处理方法的流程示意图，所述处理方法包括：

S101、获得浏览器的显示界面的宽度值；

本发明实施例中，获得浏览器的显示界面的宽度值。可以理解的是，所述宽度值是浏览器界面实时的宽度值。获得该宽度值的具体方式可以包括通过调用浏览器的数据接口，获取浏览器的属性信息中显示界面的宽度值。还可以调用预设的程序插件，所述程序插件用于实时监控所述浏览器的运行状态，获取浏览器的属性数据，所述属性数据包括浏览器的显示界面当前的宽度值。

S102、在显示界面的宽度值小于预设阈值时，将柱状图转换为横条图，其中，横条图的横轴的最大宽度值小于或等于预设阈值；

本发明实施例中，预先对所要显示的柱状图的横轴的预设阈值进行了设置，其中，预设阈值用于表征柱状图的横轴中每一个条目所表征的信息能够被清晰分辨时横轴的最小宽度值。该预设阈值是根据产品需要进行设置的，例如，柱状图的横轴中需要展现30个条目，而每一个条目的最佳显示像素为20PPI，则此预设阈值设置为600PPI。预设阈值可以根据实际需要进行设置，每个柱状图对应的预设阈值可以不同。实际使用中，预先对每一个要显示的柱状图均进行了设置。

在显示界面的宽度值小于预设阈值时，将柱状图转换为横条图，其中，横条图的横轴的最大宽度值小于或等于预设阈值；保证在浏览器的显示界面中可以将柱状图的横轴中所要展现的数据完全显示出来。将柱状图转换为横条图的具体过程在后面进行详细介绍。

需要说明的是，在步骤S102之前也可以包括判断浏览器的显示界面的显示比例是否发生变化，如果是，才会执行步骤S102。

S103、在浏览器的显示界面中显示横条图。

最后，将转换后得到的横条图在浏览器的显示界面中进行显示。

上述实施例中介绍了将柱状图转换为横条图的过程，下面对此过程进行详细介绍。

参见图3，图3是本发明实施例中提供的一种柱状图的处理方法的另一个流程示意图。本发明的柱状图的处理方法包括：

S201、获得浏览器的显示界面当前的宽度值；

S202、判断显示界面的宽度值是否小于预设阈值；

其中，步骤S201-S202与步骤S101-S102可以相互参照，在此不进行赘述。

S203、如果显示界面的宽度值小于预设阈值，获取柱状图的横轴的数据源以及柱状图的纵轴的数据源；

本发明实施例中，当显示界面的宽度值小于预设阈值时，获取柱状图的横轴的数据源以及纵轴的数据源。

获取的方式可以是通过柱状图的属性中横轴或纵轴的属性信息中获取相应的路径，根据路径确定对应的数据源。

S204、将柱状图的横轴的数据源作为横条图的纵轴的数据源；

将柱状图的纵轴的数据源作为横条图的横轴的数据源；

本发明实施例中，确定了柱状图的横轴的数据源以及柱状图的纵轴的数据源后，将柱状图的横轴的数据源作为横条图的纵轴的数据源，将柱状图的纵轴的数据源作为横条图的横轴的数据源。

可以理解的是，S204中不限定执行的先后顺序。

如此的目的是将所要建立的横条图中，横条图的纵轴的数据与柱状图的横轴的数据相对应。

S205、根据横条图的纵轴的数据源以及横条图的横轴的数据源绘制横条图。

之后，绘制横条图，得到的横条图中的横轴的数据与柱状图的纵轴的数据相对应，横条图中的纵轴的数据与柱状图的横轴的数据相对应。

可以理解的是，横条图的纵轴的条目之间的显示比例与柱状图的横轴的条目之间的显示比例相同。

S206、在浏览器的显示界面中显示横条图。

最后，在浏览器的显示界面中显示横条图。

除了上述实施例之外，还有一种将柱状图转换为横条图的方式，参见图4，图4是本发明实施例中提供的一种柱状图的处理方法的又一个流程示意图。

S301、获得浏览器的显示界面当前的宽度值；

S302、判断显示界面的宽度值是否小于预设阈值；

其中，步骤S301-步骤S302可以参照步骤S101-步骤S102，在此，不进行赘述。

S303、如果显示界面的宽度值是否小于预设阈值，将柱状图旋转90度形成横条图；

将横条图的横轴的显示比例进行调整，使得调整后横条图的横轴的长度值小于或等于预设阈值。

本发明实施例中，还可以直接对柱状图进行旋转，使之成为横条图。但是成为横条图后，横条图中横轴的宽度值还是可能会超出显示界面的宽度值，因此，将横条图的横轴的显示比例进行调整，使得调整后横条图的横轴的长度值小于或等于预设阈值。

可选的，将柱状图顺时针或逆时针旋转90度旋转形成横条图。

需要说明的是，顺时针或逆时针都可以将柱状图旋转成为横条图，在此并不具体限定旋转的方式。

当然，为了使显示更平滑，还可以在旋转过程中加入动画，例如，使用淡入淡出的效果进行旋转，或者使用渐变的方式进行旋转。

S304、在浏览器的显示界面中显示横条图。

最后，显示横条图。

优选的，还包括：

将横条图的纵轴的文字显示格式转换为纵向格式；

将横条图的横轴的文字显示格式转换为横向格式。

由于转换方向以后的文字的方向也会随着旋转发生变化，因此，本发明实施例会对转换后的横条图中所显示的文字的显示格式进行修改，将横条图的纵轴的文字显示格式转换为纵向格式，将横条图的横轴的文字显示格式转换为横向格式。提高用户体验。

本发明另一方面提供了一种柱状图的处理装置，参见图5，图5示出了本发明实施例中处理装置的结构示意图。

本发明提供的一种柱状图的处理装置，包括：

获取装置41，用于获得浏览器的显示界面的宽度值；

转换装置42，用于在所述显示界面的宽度值小于预设阈值时，将所述柱状图转换为横条图，其中，所述横条图的横轴的最大宽度值小于或等于所述预设阈值；

图表显示装置43，用于在所述浏览器的显示界面中显示所述横条图。

优选的，所述转换装置包括：

转换单元，用于将所述柱状图旋转90度形成横条图；

优选的，还包括：

本发明提供的一种柱状图的处理装置中各个模块的实现方式可以参照一种柱状图的处理方法，用于实现上述方法实施例中的全部技术方案，其各个模块的功能可以根据上述方法实施例中的方法具体实现，其具体实现过程可参照上述实施例中的相关描述，此处不再赘述。

本发明提供的一种柱状图的处理装置获取装置首先获得浏览器的显示界面的宽度值；转换装置在所述显示界面的宽度值小于预设阈值时，将所述柱状图转换为横条图，其中，所述横条图的横轴的最大宽度值小于或等于所述预设阈值；显示装置最后在所述浏览器的显示界面中显示所述横条图。由于本发明中转换后的横条图中的条目所表征的信息均能够被清晰分辨，因此，无需对浏览器的显示界面的显示比例进行调整就可以清晰地显示出所需要显示的内容，且无需改变浏览器中其它显示内容的显示比例，提高用体验。

另外，参见图6，图6示出了本发明实施例中处理装置的硬件结构示意图。

所述一种柱状图的处理装置包括处理器61和存储器62，上述X获取装置41、转换装置42、显示装置43等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来在不改变浏览器的显示界面的显示比例的前提下，也可以清楚的展现所要显示的信息，提高用户的体验。

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

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

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

本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：

获得浏览器的显示界面的宽度值；

在所述浏览器的显示界面中显示所述横条图。

可选的，所述将所述柱状图转换为横条图具体包括：

将所述柱状图的横轴的数据源作为横条图的纵轴的数据源；

可选的，所述将所述柱状图转换为横条图具体包括：

将所述柱状图旋转90度形成横条图；

可选的，还包括：

将所述横条图的纵轴的文字显示格式转换为纵向格式；

将所述横条图的横轴的文字显示格式转换为横向格式。

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

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

获得浏览器的显示界面的宽度值；

在所述浏览器的显示界面中显示所述横条图。

可选的，所述将所述柱状图转换为横条图具体包括：

将所述柱状图的横轴的数据源作为横条图的纵轴的数据源；

可选的，所述将所述柱状图转换为横条图具体包括：

将所述柱状图旋转90度形成横条图；

可选的，还包括：

将所述横条图的纵轴的文字显示格式转换为纵向格式；

将所述横条图的横轴的文字显示格式转换为横向格式。

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

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

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

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

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

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

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

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

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

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

Claims

1.一种柱状图的处理方法，其特征在于，包括：

获得浏览器的显示界面的宽度值；

在所述浏览器的显示界面中显示所述横条图；

所述将所述柱状图转换为横条图具体包括：

将所述柱状图旋转90度形成横条图；

2.根据权利要求1所述的处理方法，其特征在于，所述将所述柱状图转换为横条图具体包括：

将所述柱状图的横轴的数据源作为横条图的纵轴的数据源；

3.根据权利要求1所述的处理方法，其特征在于，还包括：

将所述横条图的纵轴的文字显示格式转换为纵向格式；

将所述横条图的横轴的文字显示格式转换为横向格式。

4.一种柱状图的处理装置，其特征在于，包括：

获取装置，用于获得浏览器的显示界面的宽度值；

显示装置，用于在所述浏览器的显示界面中显示所述横条图；

所述转换装置包括：

转换单元，用于将所述柱状图旋转90度形成横条图；

5.根据权利要求4所述的处理装置，其特征在于，所述转换装置具体包括：

6.根据权利要求4所述的处理装置，其特征在于，还包括：

7.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序执行权利要求1至3中任意一项所述的柱状图的处理方法。

8.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至3中任意一项所述的柱状图的处理方法。