一种用于生成趋势图像的方法及系统与流程

文档序号：17844292发布日期：2019-06-11 21:33阅读：234来源：国知局

本发明涉及图像生成技术领域，并且具体地，提供一种用于生成趋势图像的方法及系统。

背景技术：

在诸如金融的多个行业中，一般都会使用行情趋势图或走势图作为分析历史数据和查看实时行情的一种可视化工具。行情趋势图或走势图普遍被应用于各种长期金融投资领域，比如股票，基金，外汇和数字货币等。

在现今社会中，随着移动网络发展，由于人们对于在移动端进行股票等实时行情追踪的需求越来越大，所以很多传统金融公司都适时推出自己的移动应用app产品。对于行情走势图，现有技术的方法是使用原生app开发以达到更加流畅和易于操作的用户体检。但原生app开发需要的开发成本较大，这是因为需考虑android和ios两套完全不同的操作系统，以及各种不同类型的移动设备。一些中小型的公司是无法快速实现这个功能，或甚至不具备实现这个功能的能力。

为此，需要使用一种跨平台并且能够适用于不同类型的移动设备的图像生成和图像显示技术。

技术实现要素：

有鉴于此，本发明使用网页技术，例如h5(html5)技术，去实现图像生成或图像显示功能。h5的兼容性较好，并且能够实现快速开发和修改，但是现有的h5绘制库都是比较通用的图形绘制，并没有对于移动端的行情趋势图或走势图进行特殊处理，以至于并不能达到传统原生app的用户体验。

因此，为了解决上述问题，本发明使用h5技术的定制化行情趋势图或走势图绘制组件实现图像生成和图像显示。

根据本发明的一个方面，提供一种用于生成趋势图像的方法，所述方法包括：

获取用于生成趋势图像的图像生成请求，对所述图像生成请求进行解析以获取要生成的趋势图像的属性信息，所述属性信息包括：数据项的默认数量和扩展系数；

根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量，并将所获取的初始数量的数据项缓存在本地；

当将所获取的初始数量的数据项被缓存在本地之后，对默认数量的数据项进行解析以获取所述默认数量的数据项中每个数据项的数据信息和时间信息；

基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像；

监听针对于默认的趋势图像的用户操作并确定与所述用户操作相关联的动态数据，基于所述动态数据确定所述本地缓存中的初始数量的数据项是否能够满足所述用户操作的要求；以及

当所述本地缓存中的初始数量的数据项不能够满足所述用户操作的要求时，确定为了满足所述用户操作所需要的数据项的补充数量，获取补充数量的数据项并基于所述补充数量的数据项中每个数据项的数据信息和时间信息对所述初始的趋势图像进行调整以生成经过调整的趋势图像。

其中根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量包括：

将数据项的默认数量和扩展系数的乘积作为需要获取的数据项的初始数量。

每个数据项的数据信息包括：初始值、结束值、最大值和最小值，每个数据项的时间信息是用于指示数据信息所归属的基本时间单元的信息。

其中基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像包括：

确定与默认的趋势图像相关联的多个图形的图形数量；

创建与多个图形的图形数量相同数量的多个图形组件；

将所述默认数量的数据项中每个数据项的数据信息传递给多个图形组件中的每个图形组件；

利用多个图形组件中的每个图形组件生成相应的显示图形；

基于所述默认数量的数据项中每个数据项的时间信息生成时间轴图形；

将每个显示图形与时间轴图形进行时间关联，基于经过时间关联的每个显示图形与时间轴图形生成默认的趋势图像。

所述用户操作包括图像放大操作、图像缩小操作、图像移动操作和图像点定位操作。

当用户操作为图像缩小操作或图像移动操作时，监听针对于默认的趋势图像的用户操作所涉及的两个边界数据项的时间信息，基于两个边界数据项的时间信息确定与所述用户操作相关联的动态数据所涉及的数据项的数量；

当动态数据所涉及的数据项的数量大于初始数量时，确定所述本地缓存中的初始数量的数据项不能够满足所述用户操作的要求。

当动态数据所涉及的数据项的数量小于或等于初始数量时，确定所述本地缓存中的初始数量的数据项能够满足所述用户操作的要求。

当用户操作为图像放大操作时，监听针对于默认的趋势图像的用户操作所涉及的两个边界数据项的时间信息，基于两个边界数据项的时间信息和所述本地缓存中的初始数量的数据项对所述初始的趋势图像进行调整以生成经过调整的趋势图像。

当用户操作为图像点定位操作时，确定所述用户操作所涉及的定位位置，以所述定位位置为焦点，生成以所述焦点为交叉点的水平指示线和垂直指示线，并显示所述定位位置处的数据项的时间信息和数据信息。

当所述本地缓存中的初始数量的数据项能够满足所述用户操作的要求时，不获取新的数据项。

根据本发明的另一方面，提供一种用于生成趋势图像的系统，所述系统包括：

获取装置，获取用于生成趋势图像的图像生成请求，对所述图像生成请求进行解析以获取要生成的趋势图像的属性信息，所述属性信息包括：数据项的默认数量和扩展系数；

缓存装置，根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量，并将所获取的初始数量的数据项缓存在本地；

解析装置，当将所获取的初始数量的数据项被缓存在本地之后，对默认数量的数据项进行解析以获取所述默认数量的数据项中每个数据项的数据信息和时间信息；

生成装置，基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像；

监听装置，监听针对于默认的趋势图像的用户操作并确定与所述用户操作相关联的动态数据，基于所述动态数据确定所述本地缓存中的初始数量的数据项是否能够满足所述用户操作的要求；以及

调整装置，当所述本地缓存中的初始数量的数据项不能够满足所述用户操作的要求时，确定为了满足所述用户操作所需要的数据项的补充数量，获取补充数量的数据项并基于所述补充数量的数据项中每个数据项的数据信息和时间信息对所述初始的趋势图像进行调整以生成经过调整的趋势图像。

其中缓存装置根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量包括：

缓存装置将数据项的默认数量和扩展系数的乘积作为需要获取的数据项的初始数量。

缓存装置每个数据项的数据信息包括：初始值、结束值、最大值和最小值，每个数据项的时间信息是用于指示数据信息所归属的基本时间单元的信息。

其中生成装置基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像包括：

生成装置确定与默认的趋势图像相关联的多个图形的图形数量；

生成装置创建与多个图形的图形数量相同数量的多个图形组件；

生成装置将所述默认数量的数据项中每个数据项的数据信息传递给多个图形组件中的每个图形组件；

生成装置利用多个图形组件中的每个图形组件生成相应的显示图形；

生成装置基于所述默认数量的数据项中每个数据项的时间信息生成时间轴图形；

将每个显示图形与时间轴图形进行时间关联，基于经过时间关联的每个显示图形与时间轴图形生成默认的趋势图像。

所述用户操作包括图像放大操作、图像缩小操作、图像移动操作和图像点定位操作。

当动态数据所涉及的数据项的数量大于初始数量时，确定所述本地缓存中的初始数量的数据项不能够满足所述用户操作的要求。

当动态数据所涉及的数据项的数量小于或等于初始数量时，确定所述本地缓存中的初始数量的数据项能够满足所述用户操作的要求。

当所述本地缓存中的初始数量的数据项能够满足所述用户操作的要求时，不获取新的数据项。

根据本发明的再一方面，提供一种计算程序产品，所述计算机程序产品包括用于实现以下内容的计算机程序：

根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量，并将所获取的初始数量的数据项缓存在本地；

当将所获取的初始数量的数据项被缓存在本地之后，对默认数量的数据项进行解析以获取所述默认数量的数据项中每个数据项的数据信息和时间信息；

基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像；

附图说明

通过以下参照附图对本发明实施例的描述，本发明的上述以及其它目的、特征和优点将更为清楚，在附图中：

图1为根据本发明实施方式的用于生成趋势图像的方法的流程图；

图2为根据本发明实施方式所生成的趋势图像的示意图；以及

图3为根据本发明实施方式的用于生成趋势图像的系统的结构示意图。

具体实施方式

以下基于实施例对本发明进行描述，但是本发明并不仅仅限于这些实施例。在下文对本发明的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本发明。为了避免混淆本发明的实质，公知的方法、过程、流程、元件和电路并没有详细叙述。

此外，本领域普通技术人员应当理解，在此提供的附图都是为了说明的目的，并且附图不一定是按比例绘制的。

同时，应当理解，在以下的描述中，“电路”是指由至少一个元件或子电路通过电气连接或电磁连接构成的导电回路。当称元件或电路“连接到”另一元件或称元件/电路“连接在”两个节点之间时，它可以是直接耦接或连接到另一元件或者可以存在中间元件，元件之间的连接可以是物理上的、逻辑上的、或者其结合。相反，当称元件“直接耦接到”或“直接连接到”另一元件时，意味着两者不存在中间元件。

除非上下文明确要求，否则整个说明书和权利要求书中的“包括”、“包含”等类似词语应当解释为包含的含义而不是排他或穷举的含义；也就是说，是“包括但不限于”的含义。

在本发明的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是两个或两个以上。

图1为根据本发明实施方式的用于生成趋势图像的方法100的流程图。方法100对所获取的图像生成请求进行解析以获取要生成的趋势图像的包括数据项的默认数量和扩展系数的属性信息，并根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量。方法100默认数量的数据项进行解析以获取所述默认数量的数据项中每个数据项的数据信息和时间信息，并基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像。通过监听针对于默认的趋势图像的用户操作并确定与所述用户操作相关联的动态数据，方法100能够对默认的趋势图像进行动态调整。

本发明能够提供更好的用户交互体验的移动端h5行情走势图绘制组件。为了实现这个功能，一个基础是要能够准确快速地绘制走势图，然后需要能响应用户的操作，实现走势图的缩放，并且在移动以及长按时通过十字光标提示当前移动位置处的对应数据项。

在步骤101，获取用于生成趋势图像的图像生成请求，对所述图像生成请求进行解析以获取要生成的趋势图像的属性信息，所述属性信息包括：数据项的默认数量和扩展系数。趋势图像例如是行情的走势图。当移动终端或用户设备的用户希望生成趋势图像时，会生成趋势图像的图像生成请求。其中数据项的默认数量是用于在移动终端或用户设备上显示趋势图像时，默认的趋势图像所包括的数据项的数量。例如，默认的趋势图像包括30个自然日的数据项，则数据项的默认数量为30。此外，为了使得用户能够在获取默认的趋势图像后在对默认的趋势图像进行操作时，获得更快的图像调整速度，本发明会获取比数据项的默认数量更多数量的数据项。其中，利用扩展系数来指示数据项的扩展数量，并且扩展系数与数据项的扩展数量成比例。

本发明所使用的html5(简称h5)技术使用的是javascript调用h5的canvas绘图接口，以在html页面中的一个canvas画板上绘制图形。如图2所示是本发明最终的展示效果。图2为根据本发明实施方式所生成的趋势图像的示意图。图2中的趋势图像或走势图称被称为为k线图。k线图主要由主图、副图(量图)、副图(指标)和时间轴组成。本发明在绘制诸如k线图的趋势图像时，将整个趋势图像拆分为主图、副图(量图)、副图(指标)和时间轴，然后分别进行处理。

主图显示的每个柱状称之为烛图，用于展示一个时间段中的开盘价格、收盘价格、最高价格和最低价格。例如，最常见的日k线，就是一个交易日的高开或低收。图2中的最上面的图形是k线图中最主要的部分，因此称之为主图。另外，在主图上一般能够叠加额外的指标，比如图2中主图上的曲线是ma指标。

然后，下面是统一的时间轴坐标，还有成交量副图和指标副图。不论主图还是副图，所绘制的图形都是根据时间轴来作为显示基准或数据项基准的。在本发明中，每个区域的图形都是独立绘制的，然后根据统一的时间轴来确保这个走势图中每个部分时间点位置是一致的。

在步骤102，根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量，并将所获取的初始数量的数据项缓存在本地。其中根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量包括：将数据项的默认数量和扩展系数的乘积作为需要获取的数据项的初始数量。应当了解的是，扩展系数可以是1.5、2、3、4或5等任意合理数值。

在绘制每个图形时，都需要有相应的数据项。由于一般历史的行情数据项的数据量都较大，在移动端不可能将所有的历史数据项缓存到设备本地，因此行情数据项一般都是请求服务器后得到的，并且是绘制到某个部分时再请求相应的数据项。本发明定义数据项请求类型dataprovider，其中最主要的是缓存着当前请求到的所有数据项和当前图形中绘制区域的对应数据项。然后监听当前走势图中时间轴的对应位置。初始时，移动端向服务器请求一定个数的数据项(例如，初始数量的数据项)缓存起来。这个请求个数为初始绘制图形(默认的趋势图像)的所需个数(例如，默认数量)的两倍。这是为了满足用户在移动时间轴时可以直接从缓存的数据项中加载数据项以绘制图形。当监听着的时间轴位置超出了当前缓存的数据项的个数时，才再次请求更多的历史数据项。

在步骤103，当将所获取的初始数量的数据项被缓存在本地之后，对默认数量的数据项进行解析以获取所述默认数量的数据项中每个数据项的数据信息和时间信息。每个数据项的数据信息包括：初始值、结束值、最大值和最小值，每个数据项的时间信息是用于指示数据信息所归属的基本时间单元的信息。如上所述，在k线图的实例中，初始值、结束值、最大值和最小值分别是一个时间段中的开盘价格、收盘价格、最高价格和最低价格。

在步骤104，基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像。其中基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像包括：确定与默认的趋势图像相关联的多个图形的图形数量；创建与多个图形的图形数量相同数量的多个图形组件；将所述默认数量的数据项中每个数据项的数据信息传递给多个图形组件中的每个图形组件；利用多个图形组件中的每个图形组件生成相应的显示图形；基于所述默认数量的数据项中每个数据项的时间信息生成时间轴图形；将每个显示图形与时间轴图形进行时间关联，基于经过时间关联的每个显示图形与时间轴图形生成默认的趋势图像。

举例来说，本发明中将主图和多个副图中的每个图形都抽象为一个单独的组件。下面就以主图做为例子详细说明单个图形的绘制。对于主图的k线，首先根据所有数据项的计算出最大值和最小值，并由此确定图形的最高位置和最低位置的数值。根据最大值和最小值计算出每个数据项中的开盘价、收盘价、最高价和最低价对应在图形中的y轴对应位置：

offsety＝chartheight*((max-value)/(max-min))

其中chartheight是图形高度、max是最大值、value是开盘价、收盘价、最高价、最低价并且min是最小值。

再根据当前的数据项在所绘制的图形中的位置计算出x轴位置：

offset＝index*(chartwidth/count)

其中index是索引序号、chartwidth是图形宽度并且count是数量。

本发明根据开盘价大于还是小于收盘价来确认绘制颜色(例如，开盘价大于收盘价，则为绿色，开盘价小于还是小于收盘价，则为红色)，以开盘价和收盘价位置绘制出矩形，以最高价位置绘制上影线，最低价位置绘制下影线。

当默认数量的数据项全部绘制完成后，展示出主图的所有k线图形。同样的道理将副图(量图)或副图(指标)数据按照上面的逻辑转换为坐标数据后按照常规指标图形绘制成曲线或者线段，从而就组成与副图(量图)或副图(指标)对应的图形。将主图、副图(量图)、副图(指标)和时间轴的图形绘制合并，从而构成整个k线走势或趋势图像。

在步骤105，监听针对于默认的趋势图像的用户操作并确定与所述用户操作相关联的动态数据，基于所述动态数据确定所述本地缓存中的初始数量的数据项是否能够满足所述用户操作的要求。所述用户操作包括图像放大操作、图像缩小操作、图像移动操作和图像点定位操作。

本发明所绘制的走势图或趋势图像仅是静态图形，还需要处理用户在走势图或趋势图像上一些常用手势操作，以和走势图或趋势图像进行交互。本发明主要处理的交互行为包括按住走势图或趋势图像后左右移动、两指缩放和长按后出现十字光标提示等。本发明的处理方式为监听canvas元素上的手势事件，并且使用由第三方提供的hammerjs库来获取与手势动作相关联的数据。

在步骤106，当所述本地缓存中的初始数量的数据项不能够满足所述用户操作的要求时，确定为了满足所述用户操作所需要的数据项的补充数量，获取补充数量的数据项并基于所述补充数量的数据项中每个数据项的数据信息和时间信息对所述初始的趋势图像进行调整以生成经过调整的趋势图像。

当用户操作为图像缩小操作或图像移动操作时，监听针对于默认的趋势图像的用户操作所涉及的两个边界数据项的时间信息，基于两个边界数据项的时间信息确定与所述用户操作相关联的动态数据所涉及的数据项的数量。当动态数据所涉及的数据项的数量大于初始数量时，确定所述本地缓存中的初始数量的数据项不能够满足所述用户操作的要求。

当用户操作为图像缩小操作或图像移动操作时，监听针对于默认的趋势图像的用户操作所涉及的两个边界数据项的时间信息，基于两个边界数据项的时间信息确定与所述用户操作相关联的动态数据所涉及的数据项的数量。当动态数据所涉及的数据项的数量小于或等于初始数量时，确定所述本地缓存中的初始数量的数据项能够满足所述用户操作的要求。

当用户操作为图像放大操作时，监听针对于默认的趋势图像的用户操作所涉及的两个边界数据项的时间信息，基于两个边界数据项的时间信息和所述本地缓存中的初始数量的数据项对所述初始的趋势图像进行调整以生成经过调整的趋势图像。当用户操作为图像点定位操作时，确定所述用户操作所涉及的定位位置，以所述定位位置为焦点，生成以所述焦点为交叉点的水平指示线和垂直指示线，并显示所述定位位置处的数据项的时间信息和数据信息。当所述本地缓存中的初始数量的数据项能够满足所述用户操作的要求时，不获取新的数据项。

具体地，当监听到触发panmove事件时，根据事件中deltax得到手指在走势图或趋势图像的图形上移动的距离，然后将其换算成在x坐标上移动的数据项个数：

size＝deltax/(chartwidth/count)

其中deltax是手指在走势图或趋势图像的图形上移动时从开始点到结束点之间的水平距离、chartwidth是图形宽度并且count是数量。

根据数据项个数移动的坐标轴位置，从缓存或者服务器请求到对应的数据项后再次绘制走势图或趋势图像，可以完成手指在图形上左右移动时图形跟着手指位置左右移动。

同样的道理，监听触发pinchmove事件处理两指缩放操作，从事件中得到缩放比例scale，计算出缩放后的显示数据项个数

deltax＝canvaswidth*scale

deltacount＝deltax/(chartwidth/count)

count+＝deltacount

其中canvaswidth为画布宽度、scale为缩放比例、deltacount为变化的数据项个数、chartwidth是图形宽度、count是数量。

更新重新计算所得到的数据项个数，从缓存或者服务器请求对应的数据后重新再次绘制走势图，完成手指缩放操作后走势图的图形缩放。

十字光标是覆盖在canvas元素上面的dom元素，使用绝对定位的1像素宽/高的两个模拟确定水平指示线/垂直指示线。其中默认情况下，水平指示线/垂直指示线是隐藏的并且不显示的。当长按时触发press事件，记录当前手指位置，以该位置作为焦点，重新定位两条指示线的位置后将其显示出来。因此，形成了在手指长按时出现十字光标线的情况。

本发明为使用的方便和可扩展，将上面说明的画板、走势图和图形分别封装为vue组件。分别为canvas，chart，graphic，然后根据具体的走势图和图形分别扩展这些组件，比如k线走势图的klinechart扩展chart，其中的k线图kline，量图为vol，其它指标图还利用macd，ma，kdj等扩展graphic。

使用时就可以根据具体需要拼装为所需的走势图，如下使用例子

图3为根据本发明实施方式的用于生成趋势图像的系统300的结构示意图。系统300对所获取的图像生成请求进行解析以获取要生成的趋势图像的包括数据项的默认数量和扩展系数的属性信息，并根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量。系统300默认数量的数据项进行解析以获取所述默认数量的数据项中每个数据项的数据信息和时间信息，并基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像。通过监听针对于默认的趋势图像的用户操作并确定与所述用户操作相关联的动态数据，系统300能够对默认的趋势图像进行动态调整。

如图3所示，系统300包括：获取装置301、缓存装置302、解析装303、生成装置304、监听装置305以及调整装置306。获取装置301获取用于生成趋势图像的图像生成请求，对所述图像生成请求进行解析以获取要生成的趋势图像的属性信息，所述属性信息包括：数据项的默认数量和扩展系数。趋势图像例如是行情的走势图。当移动终端或用户设备的用户希望生成趋势图像时，会生成趋势图像的图像生成请求。其中数据项的默认数量是用于在移动终端或用户设备上显示趋势图像时，默认的趋势图像所包括的数据项的数量。例如，默认的趋势图像包括30个自然日的数据项，则数据项的默认数量为30。此外，为了使得用户能够在获取默认的趋势图像后在对默认的趋势图像进行操作时，获得更快的图像调整速度，本发明会获取比数据项的默认数量更多数量的数据项。其中，利用扩展系数来指示数据项的扩展数量，并且扩展系数与数据项的扩展数量成比例。

本发明所使用的html5(简称h5)技术使用的是javascript调用h5的canvas绘图接口，以在html页面中的一个canvas画板上绘制图形。如图2所示是本发明最终的展示效果。图2中的趋势图像或走势图称被称为为k线图。k线图主要由主图、副图(量图)、副图(指标)和时间轴组成。本发明在绘制诸如k线图的趋势图像时，将整个趋势图像拆分为主图、副图(量图)、副图(指标)和时间轴，然后分别进行处理。

缓存装置302根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量，并将所获取的初始数量的数据项缓存在本地。其中根据数据项的默认数量和扩展系数确定需要获取的数据项的初始数量包括：将数据项的默认数量和扩展系数的乘积作为需要获取的数据项的初始数量。应当了解的是，扩展系数可以是1.5、2、3、4或5等任意合理数值。

解析装303当将所获取的初始数量的数据项被缓存在本地之后，对默认数量的数据项进行解析以获取所述默认数量的数据项中每个数据项的数据信息和时间信息。每个数据项的数据信息包括：初始值、结束值、最大值和最小值，每个数据项的时间信息是用于指示数据信息所归属的基本时间单元的信息。如上所述，在k线图的实例中，初始值、结束值、最大值和最小值分别是一个时间段中的开盘价格、收盘价格、最高价格和最低价格。

生成装置304基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像。其中基于所述默认数量的数据项中每个数据项的数据信息和时间信息生成默认的趋势图像包括：确定与默认的趋势图像相关联的多个图形的图形数量；创建与多个图形的图形数量相同数量的多个图形组件；将所述默认数量的数据项中每个数据项的数据信息传递给多个图形组件中的每个图形组件；利用多个图形组件中的每个图形组件生成相应的显示图形；基于所述默认数量的数据项中每个数据项的时间信息生成时间轴图形；将每个显示图形与时间轴图形进行时间关联，基于经过时间关联的每个显示图形与时间轴图形生成默认的趋势图像。