CN116048699A - 一种图表显示方法、装置、设备及介质 - Google Patents

Abstract

本申请实施例提供了一种图表显示方法、装置、设备及介质，用以解决现有技术中显示图表时，电子设备的内存消耗大且容易出现异常的问题。由于在本申请实施例中，电子设备生成与显示区域的大小匹配的Canvas画布，并基于该Canvas画布显示待显示图表的初始内容，也就是说生成的Canvas画布较小，从而可以降低对电子设备的内存消耗，从而可以保证电子设备正常运行，在本申请实施例中，电子设备若接收到调整操作，则根据调整操作确定显示在Canvas画布上的目标内容并显示，从而可以根据调整操作调整显示的待显示图表的内容，即可以在降低电子设备的内存消耗，且使得电子设备可以正常运行的情况下，实现对待显示图表的显示。

Description

一种图表显示方法、装置、设备及介质

技术领域

本申请涉及图表处理技术领域，尤其涉及一种图表显示方法、装置、设备及介质。

背景技术

在万维网(World Wide web，web)领域，复杂的图表通常基于Canvas画布来显示，具体的，电子设备生成与图表大小匹配的Canvas画布，基于该生成的Canvas画布显示图表。然而电子设备对于Canvas画布有一定的尺寸限制，一旦Canvas画布的尺寸超出电子设备允许的最大尺寸，则会导致电子设备的内存消耗严重、显示时黑屏或者崩溃等问题。

现有技术中，通过拼接多个小的Canvas画布来实现图表的显示，然而多个Canvas画布的使用会消耗电子设备的内存，累计使用的Canvas画布的数量超出限制也会导致电子设备出现异常。

发明内容

本申请实施例提供了一种图表显示方法、装置、设备及介质，用以解决现有技术中显示图表时，电子设备的内存消耗大且容易出现异常的问题。

第一方面，本申请实施例提供了一种图表显示方法，所述方法包括：

生成与显示区域的大小匹配的Canvas画布；

基于所述Canvas画布显示待显示图表的初始内容；

若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

进一步地，所述基于所述Canvas画布显示待显示图表的初始内容包括：

根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；

确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；

根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

进一步地，所述根据所述调整操作，确定显示在所述Canvas画布上的目标内容包括：

获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的滑动的待显示图表的目标距离；

根据所述调整方向、所述目标距离、所述待显示图表中的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；

根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

进一步地，所述根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号包括：

确定所述调整行数或调整列数与预设数值的第一和值；

根据所述第一和值、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

进一步地，所述方法还包括：

若所述目标结束行序号超过所述待显示图表的最大行序号，则确定所述最大行序号为目标结束行序号，并根据所述目标结束行序号及所述Canvas画布可显示的目标行数，确定目标起始行序号；

若所述目标起始行序号小于所述待显示图表的最小行序号，则确定所述最小行序号为目标起始行序号，并根据所述目标起始行序号及所述Canvas画布可显示的目标行数，确定目标结束行序号；

若所述目标结束列序号超过所述待显示图表的最大列序号，则确定所述最大列序号为目标结束列序号，并根据所述目标结束列序号及所述Canvas画布可显示的目标列数，确定目标起始列序号；

若所述目标起始列序号小于所述待显示图表的最小列序号，则确定所述最小列序号为目标起始列序号，并根据所述目标起始列序号及所述Canvas画布可显示的目标列数，确定目标结束列序号。

第二方面，本申请实施例还提供了一种图表显示装置，所述装置包括：

生成模块，用于生成与显示区域的大小匹配的Canvas画布；

显示模块，用于基于所述Canvas画布显示待显示图表的初始内容；

处理模块，用于若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

进一步地，所述显示模块，具体用于根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

进一步地，所述处理模块，具体用于获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的滑动的待显示图表的目标距离；根据所述调整方向、所述目标距离、所述待显示图表中的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

进一步地，所述处理模块，具体用于确定所述调整行数或调整列数与预设数值的第一和值；根据所述第一和值、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

进一步地，所述处理模块，还用于若所述目标结束行序号超过所述待显示图表的最大行序号，则确定所述最大行序号为目标结束行序号，并根据所述目标结束行序号及所述Canvas画布可显示的目标行数，确定目标起始行序号；若所述目标起始行序号小于所述待显示图表的最小行序号，则确定所述最小行序号为目标起始行序号，并根据所述目标起始行序号及所述Canvas画布可显示的目标行数，确定目标结束行序号；若所述目标结束列序号超过所述待显示图表的最大列序号，则确定所述最大列序号为目标结束列序号，并根据所述目标结束列序号及所述Canvas画布可显示的目标列数，确定目标起始列序号；若所述目标起始列序号小于所述待显示图表的最小列序号，则确定所述最小列序号为目标起始列序号，并根据所述目标起始列序号及所述Canvas画布可显示的目标列数，确定目标结束列序号。

第三方面，本申请实施例还提供了一种电子设备，所述电子设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如上述任一所述图表显示方法的步骤。

第四方面，本申请实施例还提供了一种计算机可读存储介质，其存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一所述图表显示方法的步骤。

在本申请实施例中，电子设备生成与显示区域的大小匹配的Canvas画布，基于生成的Canvas画布显示待显示图表的初始内容，若接收到调整操作，则根据该调整操作，确定显示在Canvas画布上的目标内容并显示。由于在本申请实施例中，电子设备生成与显示区域的大小匹配的Canvas画布，并基于该Canvas画布显示待显示图表的初始内容，也就是说生成的Canvas画布较小，从而可以降低对电子设备的内存消耗，从而可以保证电子设备正常运行，在本申请实施例中，电子设备若接收到调整操作，则根据调整操作确定显示在Canvas画布上的目标内容并显示，从而可以根据调整操作调整显示的待显示图表的内容，即可以在降低电子设备的内存消耗，且使得电子设备可以正常运行的情况下，实现对待显示图表的显示。

附图说明

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

图1为本申请实施例提供的一种图表显示过程示意图；

图2为本申请实施例提供的一种待显示图表及Canvas画布示意图；

图3为本申请实施例提供的一种显示的示意图；

图4为本申请实施例提供的一种待显示图表显示的详细过程示意图；

图5为本申请实施例提供的一种图表显示装置结构示意图；

图6为本申请实施例提供的一种电子设备结构示意图。

具体实施方式

下面将结合附图对本申请作进一步地详细描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

为了降低对电子设备内存的消耗并使得电子设备可以正常运行，本申请实施例提供了一种图表显示方法、装置、设备及介质。该图表显示方法包括：生成与显示区域的大小匹配的Canvas画布，基于生成的Canvas画布显示待显示图表的初始内容，若接收到调整操作，则根据该调整操作，确定显示在Canvas画布上的目标内容并显示，采用该图表显示方法可以基于一个较小的Canvas画布显示较大的待显示图表，从而可以降低对电子设备的内存的消耗，并且可以使得电子设备正常运行。

实施例1：

图1为本申请实施例提供的一种图表显示过程示意图，该过程包括以下步骤：

S101：生成与显示区域的大小匹配的Canvas画布。

本申请实施例提供的图表显示方法应用于电子设备，该电子设备可以为桌面计算机、便携式计算机、智能手机、平板电脑、网络侧设备等能够采用HTML(HyperText MarkupLanguage，超级文本标记语言)的Canvas对象绘图的电子设备。

在进行图表显示时，电子设备可以获取显示区域的大小，其中，该显示区域为对待显示图表进行显示的区域，显示区域的大小可以为显示区域的长度和宽度，在获取到显示区域的大小后，电子设备可以生成与显示区域的大小匹配的Canvas画布，其中，与显示区域的大小匹配的Canvas画布，可以是长度和宽度分别与显示区域的长度及宽度一致的Canvas画布，也可以是长度和宽度分别比显示区域的长度和宽度小预设距离的Canvas画布，具体该预设距离为多少，在此不做限制。

S102：基于所述Canvas画布显示待显示图表的初始内容。

在本申请实施例中，电子设备在生成Canvas画布后，可以获取待显示图表的初始内容，其中，该初始内容所在的区域的大小与Canvas画布大小一致，且该初始内容为待显示图表中的部分内容，例如可以为待显示图表左上角处的内容(此处所描述的上下左右为待显示图表中的上下左右)。电子设备可以基于Canvas画布显示待显示图表的初始内容。

其中，该待显示图表可以为业务人员采用大量的普通标签进行绘制的，该普通标签包括区隔标记(DIVision，div)标签、无序列表(Unordered List，ul)标签等。具体的，业务人员可以采用大量的普通标签绘制待显示图表对应的图表数据。在获取待显示图表的初始内容时，电子设备可以获取待显示图表的初始内容对应的数据，对该获取到的数据进行渲染，生成待显示图表的初始内容。具体如何通过普通标签绘制待显示图表的图表数据，并且如何获取某一预设内容对应的数据，如何对数据进行渲染生成对应的内容均为现有技术，在此不再赘述。

S103：若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

在本申请实施例中，在用户有查看待显示图表的其他内容的需求时，用户可以通过调整操作控制显示内容的变化，具体的，显示区域中可以显示有滚动条，用户可以对该滚动条进行拖动操作，电子设备即可获取到调整操作，若电子设备为可以外接鼠标的设备，则用户还可以通过电子设备连接的鼠标进行滚动，电子设备即可获取到调整操作。

电子设备在获取到调整操作之后，可以根据调整操作确定显示在Canvas画布上的目标内容，具体的，电子设备可以获取该调整操作对应的调整方向，将待显示图表中，当前显示的内容该调整方向侧的与Canvas画布大小一致的内容，确定为目标内容。例如该调整方向为右(此处所描述的左右为待显示图表中的左右)，则可以待显示图表中，当前显示的内容右侧与Canvas画布大小一致的内容，确定为目标内容。电子设备在获取到目标内容后可以基于Canvas画布显示该目标内容，在本申请实施例中，相当于在Canvas画布上对待显示图表进行调整操作，通过调整操作调整Canvas画布上显示的内容。从而可以在待显示图表的大小大于Canvas画布的大小时，采用较小的Canvas画布对待显示图表进行显示，避免由于Canvas画布的尺寸较大或采用Canvas画布的数量较多，导致电子设备异常的问题。

本申请实施例所描述的待显示图表相当于虚拟列表，采用本申请实施例提供的方案相当于实现了虚拟Canvas画布对虚拟列表进行显示，本申请实施例提供的方案解决了复杂图表基于Canvas画布进行显示的瓶颈，即生成的Canvas画布较大或者生成的Canvas画布数量较多的问题，减少了内存占用，优化了用户体验，实现了尺寸较大的待显示图表的显示，具体实现了长度较长或宽度较宽的待显示图表的显示。

由于在本申请实施例中，电子设备生成与显示区域的大小匹配的Canvas画布，并基于该Canvas画布显示待显示图表的初始内容，也就是说生成的Canvas画布较小，从而可以降低对电子设备的内存消耗，从而可以保证电子设备正常运行，在本申请实施例中，电子设备若接收到调整操作，则根据调整操作确定显示在Canvas画布上的目标内容并显示，从而可以根据调整操作调整显示的待显示图表的内容，即可以在降低电子设备的内存消耗，且使得电子设备可以正常运行的情况下，实现对待显示图表的显示。

实施例2：

为了准确地确定初始内容，在上述实施例的基础上，在本申请实施例中，所述基于所述Canvas画布显示待显示图表的初始内容包括：

根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；

确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；

根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

在本申请实施例中，电子设备可以根据待显示图表的行高和Canvas画布的高度值，确定可以基于Canvas画布显示的待显示图表的目标行数，其中，该目标行数可以为非整数的值，电子设备可以根据待显示图表的列宽和Canvas画布的宽度值，确定可以基于Canvas画布显示的待显示图表的目标列数。在确定可以基于Canvas显示的待显示图表的目标行数以及目标列数后，电子设备可以确定预设行序号为起始行序号，并确定预设列序号为起始列序号，其中，该预设行序号通常为待显示图表的行序号中最小行序号，该预设列序号通常为待显示图表的列序号中最小列序号。电子设备根据该起始行序号及所确定的目标行数，确定结束行序号，具体的，电子设备可以确定起始行序号和目标行数的和值，并确定该和值与预设数值的差值为结束行序号，该预设数值通常为1，并根据该起始行序号及所确定的目标列数，确定结束行序号，例如，起始行序号为10，目标行数为5，则在确定结束行序号时，可以先确定起始行序号和目标行数的和值，该和值为15，并确定该和值与预设数值的差值，该差值为14，则可以将14确定为结束行序号。电子设备可以确定起始列序号和目标列数的和值，并确定该和值与预设数值的差值为结束列序号，该预设数值通常为1。其中，该起始行序号及结束行序号可以为非整数的值。例如，起始列序号为9，目标列数为5，则在确定结束列序号时，可以先确定起始列序号和目标列数的和值，该和值为14，并确定该和值与预设数值的差值，该差值为14，则可以将13确定为结束列序号。

在确定起始行序号、起始列序号、结束行序号及结束列序号之后，电子设备可以根据该起始行序号、起始列序号、结束行序号及结束列序号，确定显示在Canvas画布上的初始内容并显示。具体的，如何根据行序号、起始列序号、结束行序号及结束列序号，确定待显示图表中的内容为现有技术，在此不再赘述。

图2为本申请实施例提供的一种待显示图表及Canvas画布示意图。

图2中Canvas画布的大小小于待显示图表的大小，图2中虚线部分代表待显示图表，实线部分代表Canvas画布，其中，显示区域的大小可以与Canvas画布的大小一致，并且图2中Canvas画布处的内容即为待显示图表的初始内容。由图2可知，本申请实施例中，Canvas画布显示的内容分为3个部分，分别为待显示图表的行序号区域、列序号区域以及待显示图表中数据对应的区域。

业务人员在绘制待显示图表时，可以设置父元素即Canvas画布的长度及宽度分别为显示区域的长度及宽度，根据想要绘制的待显示图表的行数、列数、行高和列宽，并可以设置，电子设备可以根据该想要绘制的待显示图表的行数、列数、行高和列宽，计算出待显示图表的长度和宽度。

实施例3：

为了准确地确定显示在Canvas画布上的目标内容，在上述各实施例的基础上，在本申请实施例中，所述根据所述调整操作，确定显示在所述Canvas画布上的目标内容包括：

获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的调整的待显示图表的目标距离；

根据所述调整方向、所述目标距离、所述待显示图表中的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；

根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

在本申请实施例中，电子设备在获取到调整操作之后，可以获取调整操作对应的调整方向及调整距离，并根据预先保存的调整操作对应的距离与调整的待显示图表的距离的对应关系，确定该调整操作中携带的调整距离对应的待显示图表的距离，将该距离确定为此次调整操作调整的待显示图表的目标距离。在确定该目标距离后，电子设备可以根据调整方向、该目标距离、待显示图表中的行高及列宽，确定调整行数或调整列数。具体的，若该调整方向为调整行序号对应的方向，则电子设备可以将目标距离和待显示图表的行高的比值，确定为调整行数，其中，该调整行数可以为非整数的值，若该调整方向为调整列序号对应的方向，则电子设备可以将目标距离和待显示图表的列宽的比值，确定为调整列数，其中，该调整列数可以为非整数的值。其中，该调整距离可以被称为偏移量。

在确定调整行数或调整列数之后，电子设备可以获取当前显示的起始行序号、起始列序号、结束行序号及结束列序号，若该调整方向为调整行序号对应的方向，则电子设备可以确定当前显示的起始列序号为目标起始列序号，确定当前显示的结束列序号为目标结束列序号，并根据调整方向、当前显示的起始行序号、结束行序号及调整行数，确定目标起始行序号及目标结束行序号。具体的，若该调整方向为增加行序号对应的方向，则电子设备可以确定起始行序号与调整行数的和值为目标起始行序号，并确定结束行序号与调整行数的和值为目标结束行序号，若该调整方向为减少行序号对应的方向，则电子设备可以确定起始行序号与调整行数的差值为目标起始行序号，并确定结束行序号与调整行数的差值为目标结束行序号。若该调整方向为调整列序号对应的方向，则电子设备可以确定当前显示的起始行序号为目标起始行序号，确定当前显示的结束列序号为目标结束列序号，并根据调整方向、当前显示的起始列序号、结束列序号及调整列数，确定目标起始列序号及目标结束列序号。具体的，若该调整方向为增加列序号对应的方向，则电子设备可以确定起始列序号与调整列数的和值为目标起始列序号，并确定结束列序号与调整列数的和值为目标结束列序号，若该调整方向为减少列序号对应的方向，则电子设备可以确定起始列序号与调整列数的差值为目标起始列序号，并确定结束列序号与调整列数的差值为目标结束列序号。

在确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号之后，电子设备可以根据该目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号，确定显示在Canvas画布上的目标内容。具体的，如何根据起始行序号、起始列序号、结束行序号及结束列序号，确定待显示图表中的内容为现有技术，在此不再赘述。

在本申请实施例中，相当于通过虚拟列表的方法进行待显示图表的显示，业务人员预先设置自定义的滚动条，用户对滚动条进行操作，电子设备获取对应的目标距离，确定待显示图表的目标起始行序号、目标结束行序号、目标起始列序号及目标结束列序号对应的目标内容，每次获取到调整操作都确定对应的目标区域。

其中，在本申请实施例中，在获取到调整操作后，可以固定显示待显示图表的表头行序号和左侧(此处描述的左右指的是待显示图表中的左右)列序号，即固定显示待显示图表的第一行及第一列，提升表格使用体验。具体的，业务人员预先固定表格的表头行序号，和对应的标签及左侧(此处描述的左右指的是待显示图表中的左右)列序号对应的标签，并设置行序号渲染函数及列序号渲染函数。业务人员可以设置表格头行序号的兄弟元素div标签，作为行序号对应的标签，待显示图表数据对应的标签和Canvas画布标签的父元素，实现对待显示图表的绘制。在本申请实施例中，为了实现对待显示图表的滚动，业务人员可以增加滚动事件的回调函数，从而实现真实模拟滚动条的显示效果。并且，为了实现滚动效果，业务人员可以设置待显示图表的位置(position)属性为相对定位(relative)。可以设置Canvas画布的偏移属性，实现虚拟Canvas效果，即实现模拟滚动条的显示效果，具体可以设置Canvas画布的WebkitTransform属性中x、y值为不同调整方向对应的调整距离，当滚动条滚动时，Canvas画布上显示的目标内容也会随之滚动，以实现虚拟Canvas画布效果，本申请实施例提供的方案可以减少了渲染导致的显示卡顿，体验不流畅问题。

图3为本申请实施例提供的一种显示的示意图。

图3中，虚线部分为待显示图表未显示的部分内容，实线部分为基于Canvas画布显示的待显示图表的目标内容，其中，图3中显示的目标内容为待显示图表中的内容，在此不做描述，由图3可知，显示的目标内容中可以固定包含待显示图表的表头行序号及左侧(此处所描述的左右为待显示图表的左右)列序号。并且显示时包含滚动条，用户可以通过调整该滚动条实现对待显示图表的调整。

实施例4：

为了准确地确定待显示图表中的目标内容，在上述各实施例的基础上，在本申请实施例中，所述根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号包括：

确定所述调整行数或调整列数与预设数值的第一和值；

根据所述第一和值、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

在本申请实施例中，为了提高用户的使用感受，电子设备在确定调整行数或调整列数后，可以确定调整行数或调整列数与预设数值的第一和值，其中，该预设数值通常为较小的数值，例如可以为1，并根据该第一和值、调整方向、当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

具体的，该调整方向为调整行序号对应的方向，则电子设备可以确定当前显示的起始列序号为目标起始列序号，确定当前显示的结束列序号为目标结束列序号，并根据调整方向、当前显示的起始行序号、结束行序号及第一和值，确定目标起始行序号及目标结束行序号。具体的，若该调整方向为增加行序号对应的方向，则电子设备可以确定起始行序号与第一和值的和值为目标起始行序号，并确定结束行序号与第一和值的和值为目标结束行序号，若该调整方向为减少行序号对应的方向，则电子设备可以确定起始行序号与第一和值的差值为目标起始行序号，并确定结束行序号与第一和值的差值为目标结束行序号。若该调整方向为调整列序号对应的方向，则电子设备可以确定当前显示的起始行序号为目标起始行序号，确定当前显示的结束列序号为目标结束列序号，并根据调整方向、当前显示的起始列序号、结束列序号及第一和值，确定目标起始列序号及目标结束列序号。具体的，若该调整方向为增加列序号对应的方向，则电子设备可以确定起始列序号与第一和值的和值为目标起始列序号，并确定结束列序号与调整列数的和值为目标结束列序号，若该调整方向为减少列序号对应的方向，则电子设备可以确定起始列序号与第一和值的差值为目标起始列序号，并确定结束列序号与调整列数的差值为目标结束列序号。

实施例5：

为了准确地确定待显示图表的目标内容，在上述各实施例的基础上，在本申请实施例中，所述方法还包括：

若所述目标结束行序号超过所述待显示图表的最大行序号，则确定所述最大行序号为目标结束行序号，并根据所述目标结束行序号及所述Canvas画布可显示的目标行数，确定目标起始行序号；

若所述目标起始行序号小于所述待显示图表的最小行序号，则确定所述最小行序号为目标起始行序号，并根据所述目标起始行序号及所述Canvas画布可显示的目标行数，确定目标结束行序号；

若所述目标结束列序号超过所述待显示图表的最大列序号，则确定所述最大列序号为目标结束列序号，并根据所述目标结束列序号及所述Canvas画布可显示的目标列数，确定目标起始列序号；

若所述目标起始列序号小于所述待显示图表的最小列序号，则确定所述最小列序号为目标起始列序号，并根据所述目标起始列序号及所述Canvas画布可显示的目标列数，确定目标结束列序号。

在实际应用场景中，采用上述实施例所描述的方式所确定的目标结束行序号或目标结束列序号，可能会大于待显示图表的最大行序号或最大列序号，所确定的目标起始行序号或目标起始列序号，可能会小于待显示图表的最小行序号或最小列序号，此时可能无法确定当前显示的待显示区域的目标内容，在此种情况下，电子设备可以根据待显示图表的最大行序号或最大列序号或最小行序号或最小列序号，对目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号进行确定。

具体的，在本申请实施例中，若目标起始行序号小于待显示图表的最小行序号，则电子设备可以确定最小行序号为目标起始行序号，并根据目标起始行序号及Canvas画布可显示的目标行数，确定目标结束行序号。若目标结束列序号超过待显示图表的最大列序号，则电子设备可以确定最大列序号为目标结束列序号，并根据目标结束列序号及Canvas画布可显示的目标列数，确定目标起始列序号；若目标起始列序号小于待显示图表的最小列序号，则电子设备可以确定最小列序号为目标起始列序号，并根据目标起始列序号及Canvas画布可显示的目标列数，确定目标结束列序号。

图4为本申请实施例提供的一种待显示图表显示的详细过程示意图，该过程包括以下步骤：

S401：生成与显示区域的大小匹配的Canvas画布。

S402：获取待显示图表的初始内容。

S403：基于Canvas画布显示待显示图表的初始内容。

S404：获取调整操作，根据该调整操作对应的调整方向及调整距离，确定待显示图表对应的目标起始行序号、目标起始列序号、目标结束行序号、目标结束列序号。

S405：根据该目标起始行序号、目标起始列序号、目标结束行序号、目标结束列序号，确定待显示图表的目标内容。

S406：基于Canvas画布显示该目标内容。

实施例6：

图5为本申请实施例提供的一种图表显示装置结构示意图，该装置包括：

生成模块501，用于生成与显示区域的大小匹配的Canvas画布；

显示模块502，用于基于所述Canvas画布显示待显示图表的初始内容；

处理模块503，用于若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

在一种可能的实施方式中，所述显示模块502，具体用于根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

在一种可能的实施方式中，所述处理模块503，具体用于获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的滑动的待显示图表的目标距离；根据所述调整方向、所述目标距离、所述待显示图表中的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

在一种可能的实施方式中，所述处理模块503，具体用于确定所述调整行数或调整列数与预设数值的第一和值；根据所述第一和值、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

在一种可能的实施方式中，所述处理模块503，还用于若所述目标结束行序号超过所述待显示图表的最大行序号，则确定所述最大行序号为目标结束行序号，并根据所述目标结束行序号及所述Canvas画布可显示的目标行数，确定目标起始行序号；若所述目标起始行序号小于所述待显示图表的最小行序号，则确定所述最小行序号为目标起始行序号，并根据所述目标起始行序号及所述Canvas画布可显示的目标行数，确定目标结束行序号；若所述目标结束列序号超过所述待显示图表的最大列序号，则确定所述最大列序号为目标结束列序号，并根据所述目标结束列序号及所述Canvas画布可显示的目标列数，确定目标起始列序号；若所述目标起始列序号小于所述待显示图表的最小列序号，则确定所述最小列序号为目标起始列序号，并根据所述目标起始列序号及所述Canvas画布可显示的目标列数，确定目标结束列序号。

实施例7：

在上述实施例的基础上，本申请实施例还提供了一种电子设备，图6为本申请实施例提供的一种电子设备结构示意图，如图6所示，包括：处理器601、通信接口602、存储器603和通信总线604，其中，处理器601，通信接口602，存储器603通过通信总线604完成相互间的通信；

存储器603中存储有计算机程序，当程序被处理器601执行时，使得处理器601执行如下步骤：

生成与显示区域的大小匹配的Canvas画布；

基于所述Canvas画布显示待显示图表的初始内容；

若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

进一步地，所述处理器601，具体用于根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；

确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；

根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

进一步地，所述处理器601，具体用于获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的滑动的待显示图表的目标距离；

根据所述调整方向、所述目标距离、所述待显示图表中的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；

根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

进一步地，所述处理器601，具体用于确定所述调整行数或调整列数与预设数值的第一和值；

根据所述第一和值、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

进一步地，所述处理器601，还用于若所述目标结束行序号超过所述待显示图表的最大行序号，则确定所述最大行序号为目标结束行序号，并根据所述目标结束行序号及所述Canvas画布可显示的目标行数，确定目标起始行序号；

若所述目标起始行序号小于所述待显示图表的最小行序号，则确定所述最小行序号为目标起始行序号，并根据所述目标起始行序号及所述Canvas画布可显示的目标行数，确定目标结束行序号；

若所述目标结束列序号超过所述待显示图表的最大列序号，则确定所述最大列序号为目标结束列序号，并根据所述目标结束列序号及所述Canvas画布可显示的目标列数，确定目标起始列序号；

若所述目标起始列序号小于所述待显示图表的最小列序号，则确定所述最小列序号为目标起始列序号，并根据所述目标起始列序号及所述Canvas画布可显示的目标列数，确定目标结束列序号。

上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口602用于上述电子设备与其他设备之间的通信。存储器可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-VolatileMemory，NVM)，例如至少一个磁盘存储器。可选地，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述处理器可以是通用处理器，包括中央处理器、网络处理器(NetworkProcessor，NP)等；还可以是数字指令处理器(Digital Signal Processing，DSP)、专用集成电路、现场可编程门陈列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。

实施例8：

在上述各实施例的基础上，本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质内存储有可由处理器执行的计算机程序，当程序在处理器上运行时，使得处理器执行时实现如下步骤：

生成与显示区域的大小匹配的Canvas画布；

基于所述Canvas画布显示待显示图表的初始内容；

若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

在一种可能的实施方式中，所述基于所述Canvas画布显示待显示图表的初始内容包括：

根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；

确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；

根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

在一种可能的实施方式中，所述根据所述调整操作，确定显示在所述Canvas画布上的目标内容包括：

获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的滑动的待显示图表的目标距离；

根据所述调整方向、所述目标距离、所述待显示图表中的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；

根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

在一种可能的实施方式中，所述根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号包括：

确定所述调整行数或调整列数与预设数值的第一和值；

根据所述第一和值、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

在一种可能的实施方式中，所述方法还包括：

若所述目标结束行序号超过所述待显示图表的最大行序号，则确定所述最大行序号为目标结束行序号，并根据所述目标结束行序号及所述Canvas画布可显示的目标行数，确定目标起始行序号；

若所述目标起始行序号小于所述待显示图表的最小行序号，则确定所述最小行序号为目标起始行序号，并根据所述目标起始行序号及所述Canvas画布可显示的目标行数，确定目标结束行序号；

若所述目标结束列序号超过所述待显示图表的最大列序号，则确定所述最大列序号为目标结束列序号，并根据所述目标结束列序号及所述Canvas画布可显示的目标列数，确定目标起始列序号；

若所述目标起始列序号小于所述待显示图表的最小列序号，则确定所述最小列序号为目标起始列序号，并根据所述目标起始列序号及所述Canvas画布可显示的目标列数，确定目标结束列序号。

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

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

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

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

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种图表显示方法，其特征在于，所述方法包括：

生成与显示区域的大小匹配的Canvas画布；

基于所述Canvas画布显示待显示图表的初始内容；

若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

2.根据权利要求1所述的方法，其特征在于，所述基于所述Canvas画布显示待显示图表的初始内容包括：

根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；

确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；

根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

3.根据权利要求1所述的方法，其特征在于，所述根据所述调整操作，确定显示在所述Canvas画布上的目标内容包括：

获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的滑动的待显示图表的目标距离；

根据所述调整方向、所述目标距离、所述待显示图表的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；

根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

4.根据权利要求3所述的方法，其特征在于，所述根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号包括：

确定所述调整行数或调整列数与预设数值的第一和值；

根据所述第一和值、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号。

5.根据权利要求3或4所述的方法，其特征在于，所述方法还包括：

若所述目标结束行序号超过所述待显示图表的最大行序号，则确定所述最大行序号为目标结束行序号，并根据所述目标结束行序号及所述Canvas画布可显示的目标行数，确定目标起始行序号；

若所述目标起始行序号小于所述待显示图表的最小行序号，则确定所述最小行序号为目标起始行序号，并根据所述目标起始行序号及所述Canvas画布可显示的目标行数，确定目标结束行序号；

若所述目标结束列序号超过所述待显示图表的最大列序号，则确定所述最大列序号为目标结束列序号，并根据所述目标结束列序号及所述Canvas画布可显示的目标列数，确定目标起始列序号；

若所述目标起始列序号小于所述待显示图表的最小列序号，则确定所述最小列序号为目标起始列序号，并根据所述目标起始列序号及所述Canvas画布可显示的目标列数，确定目标结束列序号。

6.一种图表显示装置，其特征在于，所述装置包括：

生成模块，用于生成与显示区域的大小匹配的Canvas画布；

显示模块，用于基于所述Canvas画布显示待显示图表的初始内容；

处理模块，用于若获取到调整操作，则根据所述调整操作，确定显示在所述Canvas画布上的目标内容并显示。

7.根据权利要求6所述的装置，其特征在于，所述显示模块，具体用于根据所述待显示图表的行高、列宽以及所述Canvas画布的高度值和宽度值，确定所述Canvas画布可显示的目标行数及目标列数；确定预设行序号及预设列序号为起始行序号及起始列序号，并根据所述起始行序号、所述起始列序号、所述目标行数及所述目标列数，确定结束行序号及结束列序号；根据所述起始行序号、所述起始列序号、所述结束行序号及所述结束列序号，确定显示在所述Canvas画布上的初始内容并显示。

8.根据权利要求6所述的装置，其特征在于，所述处理模块，具体用于获取所述调整操作对应的调整方向及调整距离；确定针对所述调整距离对应保存的滑动的待显示图表的目标距离；根据所述调整方向、所述目标距离、所述待显示图表中的行高及列宽，确定调整行数或调整列数；根据所述调整行数或调整列数、所述调整方向及当前显示的起始行序号、起始列序号、结束行序号及结束列序号，确定目标起始行序号、目标起始列序号、目标结束行序号及目标结束列序号；根据所述目标起始行序号、所述目标起始列序号、所述目标起始列序号及所述目标结束列序号，确定显示在所述Canvas画布上的目标内容。

9.一种电子设备，其特征在于，所述电子设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1-5任一所述图表显示方法的步骤。

10.一种计算机可读存储介质，其特征在于，其存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1-5中任一所述图表显示方法的步骤。

Images