CN111538921A - 展示方法与电子设备 - Google Patents

Abstract

本发明实施例涉及计算机技术领域，公开了一种展示方法与电子设备。展示方法，包括：遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据；根据多个版本数据与节点数据，得到节点数据在时间轴线上的节点插入位置；将节点数据插入到时间轴线上对应节点插入位置。本发明中，将多个版本数据在时间轴线上进行展示，利用时间轴线来展示版本的演化；并且，能够在时间轴线上自动插入待展示的版本数据，无需在版本数据修改或更新时调整代码，易于扩展。

Description

展示方法与电子设备

技术领域

本发明实施例涉及计算机技术领域，特别涉及一种展示方法与电子设备。

背景技术

在展示系统版本演化升级的过程或重要的里程碑时，可以利用时间线来进行展示。时间线上可以展示的要素有年份、日期、事件等，以便于通过时间线直观的展示出系统版本的演化过程，以供用户查看。

发明人发现现有技术中至少存在如下问题：目前时间线主要是以CSS特效的方式展示，针对不同的数据或展示区域需要对应的调整代码，不易扩展。

发明内容

本发明实施方式的目的在于提供一种展示方法与电子设备，将多个版本数据在时间轴线上进行展示，利用时间轴线来展示版本的演化；并且，能够在时间轴线上自动插入待展示的版本数据，无需在版本数据修改或更新时调整代码，易于扩展。

为解决上述技术问题，本发明的实施方式提供了一种展示方法，包括：遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据；根据多个版本数据与节点数据，得到节点数据在时间轴线上的节点插入位置；将节点数据插入到时间轴线上对应节点插入位置。

本发明的实施方式还提供了一种电子设备，包括至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行上述的展示方法。

本发明实施方式相对于现有技术而言，在时间轴线上插入多个版本数据时，首先遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据，再根据多个版本数据与节点数据，得到节点数据在时间轴线上的节点插入位置，得到了该节点数据在时间轴线上插入位置，然后将该节点数据插入到时间轴线上对应节点插入位置，从而将多个版本数据在时间轴线上进行展示，利用时间轴线来展示版本的演化；并且，能够在时间轴线上自动插入待展示的版本数据，无需在版本数据修改或更新时调整代码，易于扩展。

另外，遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据，包括：判断当前版本数据的年份与前一个版本数据的年份是否相同；若当前版本数据的年份与前一个版本数据的年份相同，确定当前版本数据为头节点数据；若当前版本数据的年份与前一个版本数据的年份不相同，确定当前版本数据为分支节点数据。本实施方式提供了确定头节点数据与分支节点数据的一种具体实现方式。

另外，根据多个版本数据与节点数据，得到节点数据在时间轴线上的节点插入位置，包括：若当前版本数据为头节点数据，在时间轴线的当前节点插入位置插入头节点标志，并将基于头节点标志绘制的延长线的终点作为头节点数据的节点插入位置；若当前版本数据为分支节点数据，将时间轴上以当前节点插入位置为起点的延长线的终点作为分支节点数据的节点插入位置。本实施方式中，在展示多个版本数据时，基于版本数据中的头节点数据在时间轴线上设置对应的头节点标志，从而能够将多个版本数据按照年份进行分割展示，能够更清楚展示版本的演化过程，便于用户查看各个年度的版本数据。

另外，在将节点数据插入到时间轴线上对应节点插入位置之后，还包括：判断节点数据是否为最后一个节点数据；若节点数据是最后一个节点，以节点数据的节点插入位置为起点在时间轴线上绘制延长线。本实施方式中，在当前插入的分支节点数据是最后一个节点时，在时间轴线上绘制延长线，更加美观。

另外，遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据，包括：对于当前版本数据，确定当前版本数据在时间轴线上的节点数据与节点数据的分支方向；将节点数据插入到时间轴线上对应节点插入位置，包括：以节点数据的节点插入位置为起点，沿节点数据的分支方向绘制分支线；在分支线的终点处绘制文本框，并在文本框中插入节点数据的日期和/或版本号；根据分支方向，将当前版本数据的功能清单信息插入到时间轴线。本实施方式提供了将各节点数据插入到时间轴线上对应节点插入位置的一种具体实现方式，时间轴线上同时展示日期、版本号、功能清单信息等多种元素，便于清楚、高效的对版本的演化过程进行展示。

另外，根据分支方向，将当前版本数据的功能清单信息插入到时间轴线，包括：若分支方向为向上，根据分支线的终点位置与预设的偏移参数，确定功能清单信息的插入位置并插入；若分支方向为向下，根据节点插入位置与预设的偏移参数，确定功能清单信息的插入位置并插入。本实施方式提供了根据分支方向，将当前版本数据的功能清单信息插入到时间轴线的一种具体实现方式。

另外，偏移参数包括向下偏移值与向右偏移值。

另外，文本框为矩形，在分支线的终点处绘制文本框，包括：根据分支线的终点坐标与矩形的长和宽，确定矩形的文本框的顶点坐标，并绘制矩形的文本框。本实施方式提供了绘制矩形文本框的一种具体实现方式。

另外，在时间轴线的当前节点插入位置插入头节点标志，包括：根据头节点数据的年份，确定头节点标志的背景颜色；根据确定的背景颜色，将包括头节点数据的年份的头节点标志插入到头节点标志位置。本实施方式中，能够对不同年份的头节点标志设置不同的颜色，年份展示效果更加美观、清晰。

附图说明

一个或多个实施例通过与之对应的附图中的图片进行示例性说明，这些示例性说明并不构成对实施例的限定，附图中具有相同参考数字标号的元件表示为类似的元件，除非有特别申明，附图中的图不构成比例限制。

图1是根据本发明第一实施方式中的展示方法的具体流程图；

图2是根据本发明第二实施方式中的展示方法的具体流程图；

图3是根据本发明第三实施方式中的展示方法的具体流程图；

图4是根据本发明第三实施方式中的界面可视区域中时间轴线的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的各实施方式进行详细的阐述。然而，本领域的普通技术人员可以理解，在本发明各实施方式中，为了使读者更好地理解本申请而提出了许多技术细节。但是，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请所要求保护的技术方案。

本发明的第一实施方式涉及一种展示方法，应用于电子设备，电子设备例如为手机、平板电脑等，电子设备应用本实施例的展示方法能够在界面可视区域中的时间轴线上展示系统版本信息数据，系统版本信息数据包括多个版本数据。

本实施方式的展示方法的具体流程如图1所示。

步骤101，遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据。

具体而言，待展示的系统版本信息数据包括多个版本数据，每个版本数据中包括年份、日期、版本号以及功能清单等信息。若多个版本数据是无序的，则可以按照时间对这多个版本数据进行排序，例如根据各版本数据中的年份和月日或各版本数据的版本号，便可以将这多个版本数据按照时间进行排序，对于每个版本数据，能够得到该版本数据用于展示在时间轴线上的节点数据。其中，排序方式可以为时间正序或时间倒序，本实施例以及之后的实施例中均以排序方式为时间正序为例进行说明。

步骤102，根据多个版本数据与节点数据，得到节点数据在时间轴线上的节点插入位置。

具体而言，界面可视区域是预设的用于展示系统版本信息数据的绘图区域，时间轴线绘制在界面可视区域中，根据确定的节点数据在多个版本数据中的对应位置，能够得到该节点数据在时间轴线上插入位置，即得到节点数据的节点插入位置。例如，基于时间轴线的起点，每间隔固定距离在时间轴线上设置一个节点插入位置，从而可以在时间轴线上设置与各节点数据的多个节点插入位置。

步骤103，将节点数据插入到时间轴线上对应节点插入位置。

具体而言，在确定每个节点数据的节点插入位置后，便可以在时间轴线上对应的节点插入位置插入该节点数据。

本实施方式相对于现有技术而言，在时间轴线上插入多个版本数据时，首先遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据，再根据多个版本数据与节点数据，得到节点数据在时间轴线上的节点插入位置，得到了该节点数据在时间轴线上插入位置，然后将该节点数据插入到时间轴线上对应节点插入位置，从而将多个版本数据在时间轴线上进行展示，利用时间轴线来展示版本的演化；并且，能够在时间轴线上自动插入待展示的版本数据，无需在版本数据修改或更新时调整代码，易于扩展。

本发明的第二实施方式涉及一种展示方法，本实施方式相对于第一实施方式而言，主要区别之处在于：利用头节点对多个版本数据进行分割展示。

本实施方式的展示方法的具体流程如图2所示。

步骤201，包括以下子步骤：

子步骤2011，判断当前版本数据的年份与前一个版本数据的年份是否相同。若是，则进入子步骤2012；若否，则进入子步骤2013。

子步骤2012，确定当前版本数据为头节点数据。

子步骤2013，确定当前版本数据为分支节点数据。

具体而言，头节点数据为每个年度的第一个版本数据的节点数据，遍历按时间排序的多个版本数据，若当前版本数据的年份与前一个版本数据的年份相同，确定当前版本数据为头节点数据；若当前版本数据的年份与前一个版本数据的年份不相同，确定当前版本数据不是头节点。

如下表1所示，为节点数据的一种结构示例，节点数据包括：年份year、日期month、版本号title、功能清单信息detail、是否为头节点isHeadNode。

表1

步骤202，包括以下子步骤：

子步骤2021，若当前版本数据为头节点数据，在时间轴线的当前节点插入位置插入头节点标志，并将基于头节点标志绘制的延长线的终点作为头节点数据的节点插入位置。

子步骤2022，若当前版本数据为分支节点数据，将时间轴上以当前节点插入位置为起点的延长线的终点作为分支节点数据的节点插入位置。

步骤203，将节点数据插入到时间轴线上对应节点插入位置。

具体而言，对于每个节点数据来说，若其是头节点数据，则可以在时间轴线上当前节点插入位置插入头节点标志，并基于该头节点标志位置，沿时间轴线方向绘制延长线，以延长线的终点作为该头节点数据的节点插入位置，然后将该头节点数据插入到时间轴线上对应的节点插入位置；若其是分支节点数据，则以当前节点插入位置为起点，沿时间轴线方向绘制延长线，延长线的终点即为该分支节点数据的节点插入位置，然后将该分支节点数据插入到时间轴线上对应的节点插入位置。其中，延长线的长度可以为按需求设定。头节点标志可以为预设形状的图形，例如为圆形、方形等，以头节点标志为圆形为例，在时间轴线上的节点插入位置插入头节点标志的方式为：在当前的节点插入位置处绘制预设半径的圆形头节点标志，然后以时间轴线与圆形头节点标志右侧的交点为起点，沿时间轴线方向绘制延长线，延长线的终点即为该头节点数据的节点插入位置。

本实施方式相对于第一实施方式而言，在展示多个版本数据时，基于版本数据中的头节点数据在时间轴线上设置对应的头节点标志，从而能够将多个版本数据按照年份进行分割展示，能够更清楚展示版本的演化过程，便于用户查看各个年度的版本数据。

本发明的第三实施方式涉及一种展示方法，本实施方式相对于第二实施方式而言，主要区别之处在于：提供了绘制时间轴线的一种具体实现方式。

本实施方式的展示方法的具体流程如图3所示。

步骤301，对于当前版本数据，确定当前版本数据在时间轴线上的节点数据与节点数据的分支方向。

具体而言，对于每个版本数据，在得到该版本数据用于展示在时间轴线上的节点数据时，设定该节点数据的分支方向，并在节点数据中添加用于表征分支方向的标识，例如表征分支方向向上的标示为up、表征分支方向向下的标示为down，请参考下表2。其中，确定节点数据时头节点数据或分支节点数据的方式与第二实施方式中相同，在此不再赘述。

在一个例子中，可以设置多个节点数据在时间轴线的分支方向上下交错，即下一个节点数据的分支方向与当前节点数据的分支方向相反，则在设定了第一个节点数据的分支方向后，后续的节点数据在时间轴线的分支方向均可以确定。

表2

步骤302，包括以下子步骤：

子步骤3021，若当前版本数据为头节点数据，在时间轴线的当前节点插入位置插入头节点标志，并将基于头节点标志绘制的延长线的终点作为头节点数据的节点插入位置。

子步骤3022，若当前版本数据为分支节点数据，将时间轴上以当前节点插入位置为起点的延长线的终点作为分支节点数据的节点插入位置。

在一个例子中，在时间轴线上插入头节点标志时，先根据当前节点数据的年份，确定头节点标志的背景颜色，再根据确定的背景颜色，将包括当前版本数据的年份的头节点标志插入到节点插入位置。具体的，可以设定多种颜色的背景颜色依次交替作为各年份的节点标志的背景颜色，以蓝黄红三种颜色依次交替为例，头节点的背景颜色的计算公式为：currentColor＝colors[|currentYear-startYear|％3]，colors[0]＝蓝色、colors[1]＝黄色、colors[2]＝红色；其中，currentColorno表示头节点的背景颜色，currentyear表示当前版本数据的年份，startYear表示第一个版本数据的年份。需要说明的是，本实施例也可以预设每个年份对应的节点标志的背景颜色，继而可以直接根据当前版本数据的年份，获取头节点标志的背景颜色。头节点标志可以为预设形状的图形，例如为圆形、方形等，以头节点标志为圆形为例，在时间轴线上的节点插入位置插入头节点标志的方式为：在当前的节点插入位置处绘制预设半径的圆形头节点标志，并在圆形头节点标志中填充对应的背景颜色，然后在圆形头节点标志中添加当前版本数据的年份；其中背景颜色的填充方式可以为部分填充或全部填充，填充有背景颜色的部分可以为圆形头节点标志的同心圆，同心圆的半径小于圆形头节点标志的预设半径，可以将年份文本添加在该同心圆中。

步骤303，包括以下子步骤：

子步骤3021，以节点数据的节点插入位置为起点，沿节点数据的分支方向绘制分支线。

子步骤3022，在分支线的终点处绘制文本框，并在文本框中插入节点数据的日期和/或版本号。

子步骤3023，根据分支方向，将当前版本数据的功能清单信息插入到时间轴线。

本实施例中，文本框的形状可以为矩形、菱形等，本实施例以及之后的实施例以文本框的形状为矩形为例，文本框的边框颜色、填充颜色也可以预先设定。

在一个例子中，根据分支方向，将当前版本数据的功能清单信息插入到时间轴线，包括：若分支方向为向上，根据分支线的终点位置与预设的偏移参数，确定功能清单信息的插入位置并插入；若分支方向为向下，根据节点插入位置与预设的偏移参数，确定功能清单信息的插入位置并插入。其中，偏移参数包括向下偏移值与向右偏移值。

下面结合图4的坐标示意图对本实施例中的展示方法进行说明。

在绘制时间轴线时，首先在界面可视区域中确定时间轴线的起始坐标，继而能够确定该时间轴线上的节点插入位置。举例来说，在确定时间轴线的起始坐标时，以矩形的界面可视区域左上角为原点，设置起始坐标相对于原点的坐标为(x0，y0)，第一个节点插入位置的坐标即为时间轴线的起始坐标。以distance表示每次开始在时间轴线上插入版本数据的横坐标，则每次开始在时间轴线上插入版本数据的节点插入位置的坐标为(distance，y0)，distance的初始值为x0。

遍历多个节点数据，第一个节点数据为头节点数据，此时在时间轴上的当前节点插入位置(x0，y0)处绘制预设半径circleSize的圆形节点头标志，并以(x0+circleSize，y0)为起点沿时间轴线方向绘制第一预设长度L1的延长线，并将延长线的终点(x0+circleSize+L1，y0)作为下一个节点插入位置。其中，circleSize≤x0。

以第一个节点数据的分支方向为向上为例，以当前的节点插入位置(x0+circleSize+L1，y0)为起点，向上绘制第二预设长度L2的分支线，然后在该分支线的终点(x0+circleSize+L1，y0-L2)处绘制矩形的文本框；具体的，可以根据分支线的终点坐标与矩形的长和宽，确定矩形的文本框的顶点坐标，继而可以基于顶点坐标绘制矩形的文本框，上述分支线的终点坐标为(x0+circleSize+L1，y0-L2)，设矩形的长为cw、宽为ch，则可以得到矩形的文本框的四个顶点坐标分别为(x0+circleSize+L1-cw/2，y0-L2)、(x0+circleSize+L1-cw/2，y0-L2-ch)、(x0+circleSize+L1+cw/2，y0-L2)、(x0+circleSize+L1+cw/2，y0-L2-ch)，继而可以绘制出矩形的文本框，然后在矩形的文本框中添加日期与版本号。

在将第一个节点数据的功能清单信息插入到时间轴线上时，先根据分支方向确定出功能清单信息的插入位置，第一个节点数据的分支方向为向上，此时根据分支线终点的坐标(x0+circleSize+L1，y0-L2)与预设的偏移参数，确定功能清单信息的插入位置，偏移参数包括向下偏移值offsetX1与向右偏移值offsetY1，则功能清单信息的插入位置为(x0+circleSize+L1+offsetX1，y0-L2+offsetY1)，继而能够将功能清单信息插入到对应的位置。其中，以功能清单信息为矩形，并以其左上顶点的坐标表示该功能清单信息的插入位置。

在第一个节点数据插入到时间轴线后，对节点插入位置进行更新，以当前的节点插入位置(x0+circleSize+L1，y0)为起点沿时间轴线方向绘制第一预设长度L1的延长线，并将延长线的终点(x0+circleSize+2*L1，y0)作为下一个节点插入位置。

随后遍历到第二个节点数据，以第二个节点数据与第一个节点数据为相同年份为例，即第二个节点数据是分支节点数据，第二个节点数据的分支方向为向下，此时以当前的节点插入位置(x0+circleSize+2*L1，y0)为起点，向下绘制第二预设长度L2的分支线，并在该分支线的终点(x0+circleSize+2*L1，y0+L2)处绘制矩形的文本框，绘制文本框的方式与前述类似，在此不再赘述。

在将第二个节点数据的功能清单信息插入到时间轴线上时，先根据分支方向确定出功能清单信息的插入位置，第二个节点数据的分支方向为向下，此时根据当前的节点插入位置(x0+circleSize+2*L1，y0)与预设的偏移参数，确定功能清单信息的插入位置，偏移参数包括向下偏移值offsetX2与向右偏移值offsetY2，则功能清单信息的插入位置为(x0+circleSize+2*L1+offsetX2，y0+offsetY2)；其中，offsetX1和offsetX2的值可以相同，也可以不同、offsetY1和offsetY2的值可以相同，也可以不同。

在一个例子中，在将分支节点数据插入到对应的节点插入位置之后，还包括：判断该分支节点数据是否为最后一个节点数据；若当前节点数据是最后一个节点，以当前的节点插入位置为起点在时间轴线上绘制延长线；即在上述的第二个节点数据插入到时间轴线上后，判断第二个节点数据是否为最后一个节点数据，若是，则以当前的节点插入位置(x0+circleSize+2*L1，y0)为起点，绘制沿时间轴线方向绘制第一预设长度L1的延长线，使得绘制的时间轴线更加美观。

本发明第四实施方式涉及一种电子设备，电子设备例如为手机、平板电脑等。本实施例中，电子设备包括至少一个处理器；以及，与至少一个处理器通信连接的存储器；

其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行如第一至第三实施方式中的展示方法。

其中，存储器和处理器采用总线方式连接，总线可以包括任意数量的互联的总线和桥，总线将一个或多个处理器和存储器的各种电路连接在一起。总线还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路连接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口在总线和收发机之间提供接口。收发机可以是一个元件，也可以是多个元件，比如多个接收器和发送器，提供用于在传输介质上与各种其他装置通信的单元。经处理器处理的数据通过天线在无线介质上进行传输，进一步，天线还接收数据并将数据传送给处理器。

处理器负责管理总线和通常的处理，还可以提供各种功能，包括定时，外围接口，电压调节、电源管理以及其他控制功能。而存储器可以被用于存储处理器在执行操作时所使用的数据。

本领域的普通技术人员可以理解，上述各实施方式是实现本发明的具体实施例，而在实际应用中，可以在形式上和细节上对其作各种改变，而不偏离本发明的精神和范围。

Claims (10)

1.一种展示方法，其特征在于，包括：

遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据；

根据所述多个版本数据与所述节点数据，得到所述节点数据在所述时间轴线上的节点插入位置；

将所述节点数据插入到所述时间轴线上对应所述节点插入位置。

2.根据权利要求1所述的展示方法，其特征在于，所述遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据，包括：

判断当前版本数据的年份与前一个版本数据的年份是否相同；

若当前版本数据的年份与前一个版本数据的年份相同，确定所述当前版本数据为头节点数据；

若当前版本数据的年份与前一个版本数据的年份不相同，确定所述当前版本数据为分支节点数据。

3.根据权利要求2所述的展示方法，其特征在于，所述根据所述多个版本数据与所述节点数据，得到所述节点数据在所述时间轴线上的节点插入位置，包括：

若当前版本数据为所述头节点数据，在所述时间轴线的当前节点插入位置插入头节点标志，并将基于所述头节点标志绘制的延长线的终点作为所述头节点数据的所述节点插入位置；

若当前版本数据为分支节点数据，将所述时间轴上以当前节点插入位置为起点的所述延长线的终点作为所述分支节点数据的所述节点插入位置。

4.根据权利要求1所述的展示方法，其特征在于，在所述将所述节点数据插入到所述时间轴线上对应所述节点插入位置之后，还包括：

判断所述节点数据是否为最后一个节点数据；

若所述节点数据是最后一个节点，以所述节点数据的所述节点插入位置为起点在所述时间轴线上绘制所述延长线。

5.根据权利要求1所述的展示方法，其特征在于，所述遍历按照时间排序的多个版本数据，确定时间轴线上的节点数据，包括：

对于当前版本数据，确定所述当前版本数据在所述时间轴线上的节点数据与所述节点数据的分支方向；

所述将所述节点数据插入到所述时间轴线上对应所述节点插入位置，包括：

以所述节点数据的所述节点插入位置为起点，沿所述节点数据的所述分支方向绘制分支线；

在所述分支线的终点处绘制文本框，并在所述文本框中插入所述节点数据的日期和/或版本号；

根据所述分支方向，将所述当前版本数据的功能清单信息插入到所述时间轴线。

6.根据权利要求5所述的展示方法，其特征在于，所述根据所述分支方向，将所述当前版本数据的功能清单信息插入到所述时间轴线，包括：

若所述分支方向为向上，根据所述分支线的终点位置与预设的偏移参数，确定所述功能清单信息的插入位置并插入；

若所述分支方向为向下，根据所述节点插入位置与预设的偏移参数，确定所述功能清单信息的插入位置并插入。

7.根据权利要求6所述的展示方法，其特征在于，所述偏移参数包括向下偏移值与向右偏移值。

8.根据权利要求5所述的展示方法，其特征在于，所述文本框为矩形，所述文本框为矩形，所述在所述分支线的终点处绘制文本框，包括：

根据所述分支线的终点坐标与所述矩形的长和宽，确定矩形的所述文本框的顶点坐标，并绘制矩形的所述文本框。

9.根据权利要求4所述的展示方法，其特征在于，所述在所述时间轴线的当前节点插入位置插入头节点标志，包括：

根据所述头节点数据的年份，确定所述头节点标志的背景颜色；

根据确定的背景颜色，将包括所述头节点数据的年份的头节点标志插入到所述头节点标志位置。

10.一种电子设备，其特征在于，包括：至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1至9中任一项所述的展示方法。

Images