CN106997348A - 一种数据绘制方法和装置 - Google Patents

Abstract

本发明实施例公开了一种数据绘制方法和装置；本发明实施例采用在浏览器上设置多个绘图画布，然后，获取多个待绘制数据，并对该多个待绘制数据进行分组，以得到多个数据组，其中，该数据组由至少一个待绘制数据组成，且数量与该绘图画面的数量相等，分别为每个该绘图画布分配对应的数据组，其中，一个数据组对应一个绘图画布，采用该绘图画布对与其对应的数据组进行图像绘制；该方案可以缩短绘图画布(比如canvas)绘制数据图像的时间，相对于现有技术而言，缩短了数据图像的显示时间，减缓了显示延迟。

Description

一种数据绘制方法和装置

技术领域

本发明涉及通信技术领域，具体涉及一种数据绘制方法和装置。

背景技术

HTML5是HTML(Hyper Text Markup Language，超文本标记语言)最新的修订版本，简称H5，2014年10月由万维网联盟(W3C)完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。

Canvas为h5提供的一种高效绘图画布，可使用JavaScript脚本在网页上绘制图形，例如，画图，合成照片，创建动画甚至实时视频处理与渲染等。

在对现有技术的研究和实践过程中，本发明的发明人发现，由于Canvas绘制数据的图像时需要在绘制完所有待绘制数据的图像之后，才会显示数据的图像，因此，在利用Canvas绘制大量数据的图像时绘制数据图像的时间比较长，会导致数据图像的显示时间较长和出现明显的显示延迟。

发明内容

本发明实施例提供一种数据绘制方法和装置，可以解决在利用Canvas绘制大量数据的图像时绘制数据图像的时间比较长，会导致数据图像的显示时间较长和出现明显的显示延迟的技术问题。

本发明实施例提供一种数据绘制方法，包括：

在浏览器上设置多个绘图画布；

获取多个待绘制数据，并对所述多个待绘制数据进行分组，以得到多个数据组，其中，所述数据组由至少一个待绘制数据组成，且数量与所述绘图画面的数量相等；

分别为所述每个所述绘图画布分配对应的所述数据组，其中，一个所述数据组对应一个所述绘图画布；

采用所述绘图画布对与其对应的数据组进行图像绘制。

相应的，本发明实施例还提供一种数据绘制装置，包括：

设置单元，用于在浏览器上设置多个绘图画布；

分组单元，用于获取多个待绘制数据，并对所述多个待绘制数据进行分组，以得到多个数据组，其中，所述数据组由至少一个待绘制数据组成，且数量与所述绘图画面的数量相等；

分配单元，用于分别为所述每个所述绘图画布分配对应的所述数据组，其中，一个所述数据组对应一个所述绘图画布；

绘制单元，用于采用所述绘图画布对与其对应的数据组进行图像绘制。

本发明实施例采用在浏览器上设置多个绘图画布，然后，获取多个待绘制数据，并对该多个待绘制数据进行分组，以得到多个数据组，其中，该数据组由至少一个待绘制数据组成，且数量与该绘图画面的数量相等，分别为每个该绘图画布分配对应的数据组，其中，一个数据组对应一个绘图画布，采用该绘图画布对与其对应的数据组进行图像绘制；由于该方案可以将所有待绘制数据划分成多组数据，并采用多个绘图画布分别对多组待绘制数据进行绘制，缩短了绘图画布(比如canvas)绘制数据图像的时间，相对于现有技术而言，缩短了数据图像的显示时间，减缓了显示延迟。

附图说明

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

图1是本发明实施例一提供的数据绘制方法的流程图；

图2是本发明实施例二提供的数据绘制方法的另一流程图；

图3是本发明实施例三提供的数据绘制装置的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例提供一种数据绘制方法和装置。以下将分别进行详细说明。

实施例一、

本实施例将从数据绘制装置的角度进行描述，该数据绘制装置具体可以集成在终端或其他需要进行数据绘制的设备中。

一种数据绘制方法，其特征在于，包括：采用在浏览器上设置多个绘图画布，然后，获取多个待绘制数据，并对该多个待绘制数据进行分组，以得到多个数据组，其中，该数据组由至少一个待绘制数据组成，且数量与该绘图画面的数量相等，分别为每个该绘图画布分配对应的数据组，其中，一个数据组对应一个绘图画布，采用该绘图画布对与其对应的数据组进行图像绘制。

如图1所示，该数据绘制的具体流程可以如下：

101、在浏览器上设置多个绘图画布。

该浏览器可以为支持h5的绘图画布的浏览器，例如，谷歌浏览器，火狐浏览器，Opera浏览器，QQ浏览器，以及IE浏览器等主流浏览器。该绘图画布可以为canvas画布。

该多个绘图画布可以位于在不同层，此时，多个绘图画布即可成为多层绘图画布，例如，多个绘图画布重叠在浏览器上某个位置，这样可以节省浏览器资源。

102、获取多个待绘制数据，并对该多个待绘制数据进行分组，以得到多个数据组，其中，数据组由至少一个待绘制数据组成，且数量与该绘图画面的数量相等。

本实施例中，对数据进行分组的方式有多种，比如，可以对所有待绘制数据进行等分，以形成多个数据个数相同的数据组，即每个数据组的待绘制数量相同，以m个待绘制数据为例，此时，可将该m个数据划等分成n个数据组，每个数据组包含的数据个数相同；又比如，可以对所有待绘制数据进行划分，形成多个数据个数不相同的数据组，即每个数组的数据个数不相同；具体地，分组或者划分方式，以及数据组包含的数据个数均可以根据实际需求进行设定，比如，在设置了10个canvas画布时，将10万个数据分成10组，这10组的数据个数可以相同或者不同，也有可能是10组中有几组的数据个数相同，有几组数据个数不相同等。

本实施例中，待绘制数据可以有多种，比如可以为定位数据等。

103、分别为该每个绘图画布分配对应的数据组，其中，一个数据组对应一个绘图画布。

本实施例分别为该每个绘图画布分配对应的数据组的方式有多种，可以依次为每个绘图画布分配对应的数据组，或者同时为每个绘图画布分配对应的数据组；其中，依次为每个绘图画布分配数据组的方式如下：

(1)、可以根据绘图画布的标识依次为每个绘图画布分配对应的数据组，例如，可以按照标识的顺序依次为绘图画布分配对应的数据组，假设设置了5个canvas画布，即canvas1、canvas2、canvas3、canvas4、canvas5，将10万个数据分成5个数据组，包括数据组1、数据组2、数据组3、数据组4、数据组5，此时，可以先将数据组1分配给canvas1、然后，将数据组2分配给canvas2，依次类推，最后数据组5分配给canvas5。

(2)、在多个绘图画布位于不同层时，可以根据绘图画布对应的层次为依次为每个绘图画布分配对应的数据组；例如，按照顶层到底层的顺序依次为绘图画布分配对应的数据组等等。

104、采用该绘图画布对与其对应的数据组进行图像绘制。

比如，采用每个canvas画布对与其对应的数据组中的待绘制数据进行图像绘制，该对数据组进行图像绘制指的是绘制数据组中每个待绘制数据的图像。

具体地，采用绘图画布对与其对应的数据组进行图像绘制的方式有多种，比如，可以同时采用绘图画布对与其对应的数据组进行图像绘制，假设有10个canvas画布，同时采用这10个canvas画布对各自对应的数据组进行图像绘制，这种方式，可以大大减少绘图画布进行图像绘制的时间，缩短数据图像的显示时间。

由于同时采用多个绘图画布进行图像绘制，在数据量比较大时，会出现突然显示大量数据图像的情况，导致数据图像显示卡顿，不顺畅，因此，本实施例进行图像绘制的方式还可以为依次采用绘图画布对与其对应的数据组进行图像绘制，假设有N个canvas画布，先采用第一个canvas画布对与其对应的数据组进行图像绘制，然后采用第二个canvas画布对与其对应的数据组进行图像绘制，……，采用第N个canvas画布对与其对应的数据组进行图像绘制。由于依次采用绘图画布进行图像绘制，使得数据图像依次显示，可以提高数据图像的显示效果。

可选地，为了进一步缩短显示时间和提高数据图像的显示效果，本实施例可以结合浏览器的刷新频率来依次进行图像绘制，也即步骤“依次采用绘图画布对与其对应的数据组进行图像绘制”可以包括：根据该浏览器的刷新频率，依次采用绘图画布对与其对应的数据组进行图像绘制。比如，可以根据该浏览器的刷新频率确定绘制图像的时间间隔，然后，根据该时间间隔，依次采用绘图画布对与其对应的数据组进行图像绘制。

例如，在绘图画布为canvas画布时，可以通过s编写drawCanvas总步骤函数和drawSingleCanvas子步骤函数，drawCanvas用于整体入口，并设置变量n统计drawSingleCanvas当前执行到的进度。drawSingleCanvas操作每个canvas进行图像绘制，每操作一个canvas进行图像绘制，n++，drawSingleCanvas中可以用requestAnimationFrame来配合浏览器刷新频率的循环绘制，构建循环执行队列，并增加判断逻辑，当n等于N，结束执行，N为canvas画布的总个数。

可选地，本实施例中绘图画布的设置数量可以根据预设图像显示时间和待绘制数据的数量确定，也即，步骤“在浏览器上设置多个绘图画布”可以包括：根据预设图像显示时间和待绘制数据的预设数量，确定需要绘图画布的数量，该数量大于1；根据确定的数量在浏览器上设置对应数量的绘图画布。

比如，规定一次绘制的待绘制数据的数量为p，预设图像显示时间为T，先将所有待绘制数据划分成q份，判断采用绘图画布绘制并显示p/q个待绘制数据的图像的时间t是否小于等T，若是，则确定该q即为需要设置的绘图画布的数量；若否，则重新对所有待绘制数据进划分。以p为100万，T为0.05s时为例，先将所有待绘制数据划分成10份，判断采用绘图画布显示10万个待绘制数据的图像的时间t是否小于等T，此时t为0.1大于0.05，因此，还需要增加划分的份数，对所有待绘制数据重新划分，直到t小于T为止，若t小于T，则确定当前划分的份数即为需要设置的绘图画布的数量。其中，预先图像显示时间可以根据实际需求设定。

由上可知，本发明实施例采用在浏览器上设置多个绘图画布，然后，获取多个待绘制数据，并对该多个待绘制数据进行分组，以得到多个数据组，其中，该数据组由至少一个待绘制数据组成，且数量与该绘图画面的数量相等，分别为每个该绘图画布分配对应的数据组，其中，一个数据组对应一个绘图画布，采用该绘图画布对与其对应的数据组进行图像绘制；由于该方案可以将所有待绘制数据划分成多组数据，并采用多个绘图画布分别对多组待绘制数据进行绘制，缩短了绘图画布(比如canvas)绘制数据图像的时间，相对于现有技术而言，缩短了数据图像的显示时间，减缓了显示延迟；另外，本发明实施例还可以根据浏览器的刷新频率依次采用绘图画布进行绘制，加快了图像显示速度，进一步缩短了图像显示时间，并还给图像显示增加了渐变的动画效果，提升了用户体验。

实施例二、

根据实施例一所描述的方法，以下将举例作进一步详细说明。

在本实施例中，将以待绘制数据为定位数据、设置n层canvas画布、以及以该数据绘制装置具体集成在终端中为例进行详细说明。

如图2所示，一种数据绘制方法，具体流程可以如下：

201、终端在浏览器上设置n层canvas画布，n为大于1的正整数。

比如在QQ浏览器上设置相互重叠的10层canvas画布。

其中，n的取值可由预设图像显示时间和定位数据的总数量决定，比如1/a的canvas数据的显示时间小于或者等于该预设图像显示时间时，此时确定n＝a，a为大于1的正整数。

202、终端通过网络获取m个定位数据，将m个定位数据平均划分成n个数据组。

其中，数据组的数量与画布的数量相等，每个数据组的定位数据数量相等，包含m/n个定位数据，该m/n的值为正整数。

在实际应用中，绘制的定位数据的数量在百万级，即m的单位可以为百万。比如，设置10个canvas画布，且需要对一百万个定位数据进行绘制时，将这一百万个定位数据平均划分成10个数据组，每个数据组由十万个定位数据组成。

203、终端分别为每层canvas画布分配对应的数据组，其中，一层canvas画布对应一个数据组。

比如，按照从底层到顶层的顺序依次为每层canvas画布分配对应的数据组，或者同时为每层canvas画布分配对应的数据组。

以10层画布为例，可以将第一数据组分配给第一层canvas画布，将第二数据分配给第二层canvas画布，……将第十个数据组分配给第十层canvas画布。

204、终端根据该浏览器的刷新频率，逐一采用canvas画布对与其对应的数据组进行图像绘制。

具体地，可以根据刷新频率确定图像绘制的时间间隔，并根据该时间间隔逐一采用canvas画布进行图像绘制，比如，可以设置定时器，并根据该时间间隔设置定时器的时间，采用当前层canvas画布进行图像绘制之后，开启定时器，当定时器的时间为0时，采用下一层canvas画布进行图像绘制。本实施例可以为每层canvas画布设置一个定时器，以触发采用每层canvas画布进行图像绘制。

可选地，本实施例还可以根据该时间间隔，并按照画布的层次顺序逐一进行图像绘制。

其中，采用canvas画布对数据组进行图像绘制可以为采用canvas画布对该数据组内所有的定位数据进行图像绘制，定位数据对应图像可以为亮点或者星点等，此时，可以利用本实施例方法绘制定位星云图，在实际应用中待绘制的图像可以根据实际需求进行设定。

例如，10层画布为例，先采用第一层canvas画布对数据组1进行图像绘制，在预设时长(该预设时长即为上述确定的时间间隔)之后，采用第二层canvas画布对数据组2进行图像绘制，在预设时长之后，采用第三层canvas画布对数据组3进行图像绘制，依次类推，最后采用第十层canvas画布对数据组10进行图像绘制。

由上可知，本发明实施例采用终端在浏览器上设置n层canvas画布，然后，终端通过网络获取m个定位数据，将m个定位数据平均划分成n个数据组，终端分别为每层canvas画布分配对应的数据组，终端根据该浏览器的刷新频率，逐一采用canvas画布对与其对应的数据组进行图像绘制；该方案可以将所有定位数据划分成多组数据，并根据浏览器的刷新频率逐一采用canvas画布对定位数据进行图像绘制，缩短了canvas画布绘制定位数据图像的时间，相对于现有技术而言，缩短了定位数据图像的显示时间，减缓了显示延迟；另外，还可以为定位数据图像的显示增加了渐变的动画显示效果，提示了用户体验。

实施例三、

为了更好地实施以上方法，本发明实施例还提供一种数据绘制装置，如图3所示，该数据绘制装置还可以包括设置单元301、分组单元302、分配单元303、和绘制单元304，如下：

设置单元301，用于在浏览器上设置多个绘图画布；

分组单元302，用于获取多个待绘制数据，并对该多个待绘制数据进行分组，以得到多个数据组，其中，该数据组由至少一个待绘制数据组成，且数量与该绘图画面的数量相等；

分配单元303，用于分别为每个绘图画布分配对应的所述数据组，其中，一个数据组对应一个绘图画布；

绘制单元304，用于采用该绘图画布对与其对应的数据组进行图像绘制。

比如，为进一步缩短图像显示时间和提示图像显示效果，绘制单元304，可以用于依次采用所述绘图画布对与其对应的数据组进行图像绘制。

又比如，为进一步缩短图像显示时间和提示图像显示效果，绘制单元304，可以具体用于根据所述浏览器的刷新频率，依次采用所述绘图画布对与其对应的数据组进行图像绘制。

可选地，绘制单元304可以包括确定子单元和图像绘制子单元；

确定子单元，用于根据浏览器的刷新频率确定绘制图像的时间间隔；

图像绘制子单元，用于根据该时间间隔，依次采用该绘图画布对与其对应的数据组进行图像绘制。

可选地，设置单元301，可以具体用于：

根据预设图像显示时间和待绘制数据的预设数量，确定需要绘图画布的数量，该数量大于1；

根据确定的数量在浏览器上设置对应数量的绘图画布。

具体实施时，以上各个单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个单元的具体实施可参见前面的方法实施例，在此不再赘述。

该数据绘制装置具体可以集成在终端或其他需要进行数据绘制的设备中。该数据绘制装置集成在终端的方式有多种，比如，以客户端或者其他软体形式集成在终端中。

由上可知，本发明实施例的数据绘制装置的设置单元301在浏览器上设置多个绘图画布，然后，由分组单元302获取多个待绘制数据，并对该多个待绘制数据进行分组，以得到多个数据组，其中，该数据组由至少一个待绘制数据组成，且数量与该绘图画面的数量相等，由分配单元303分别为每个该绘图画布分配对应的数据组，其中，一个数据组对应一个绘图画布，由绘制单元304采用该绘图画布对与其对应的数据组进行图像绘制；由于该方案可以将所有待绘制数据划分成多组数据，并采用多个绘图画布分别对多组待绘制数据进行绘制，缩短了绘图画布(比如canvas)绘制数据图像的时间，相对于现有技术而言，缩短了数据图像的显示时间，减缓了显示延迟；另外，本发明实施例还可以根据浏览器的刷新频率依次采用绘图画布进行绘制，加快了图像显示速度，进一步缩短了图像显示时间，并还给图像显示增加了渐变的动画效果，提升了用户体验。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

以上对本发明实施例所提供的一种身数据绘制方法和装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种数据绘制方法，其特征在于，包括：

在浏览器上设置多个绘图画布；

获取多个待绘制数据，并对所述多个待绘制数据进行分组，以得到多个数据组，其中，所述数据组由至少一个待绘制数据组成，且数量与所述绘图画面的数量相等；

分别为每个所述绘图画布分配对应的所述数据组，其中，一个所述数据组对应一个所述绘图画布；

采用所述绘图画布对与其对应的数据组进行图像绘制。

2.如权利要求1所述的数据绘制方法，其特征在于，所述采用所述绘图画布对与其对应的数据组进行图像绘制的步骤具体包括：

依次采用所述绘图画布对与其对应的数据组进行图像绘制。

3.如权利要求2所述的数据绘制方法，其特征在于，所述依次采用所述绘图画布对与其对应的数据组进行图像绘制的步骤具体包括：

根据所述浏览器的刷新频率，依次采用所述绘图画布对与其对应的数据组进行图像绘制。

4.如权利要求3所述的数据绘制方法，其特征在于，所述根据所述浏览器的刷新频率，依次采用所述绘图画布对与其对应的数据组进行图像绘制的步骤具体包括：

根据所述浏览器的刷新频率确定绘制图像的时间间隔；

根据所述时间间隔，依次采用所述绘图画布对与其对应的数据组进行图像绘制。

5.如权利要求1-4任一项所述的数据绘制方法，其特征在于，所述在浏览器上设置多个绘图画布的步骤具体包括：

根据预设图像显示时间和待绘制数据的预设数量，确定需要绘图画布的数量，该数量大于1；

根据确定的数量在浏览器上设置对应数量的绘图画布。

6.一种数据绘制装置，其特征在于，包括：

设置单元，用于在浏览器上设置多个绘图画布；

分组单元，用于获取多个待绘制数据，并对所述多个待绘制数据进行分组，以得到多个数据组，其中，所述数据组由至少一个待绘制数据组成，且数量与所述绘图画面的数量相等；

分配单元，用于分别为每个所述绘图画布分配对应的所述数据组，其中，一个所述数据组对应一个所述绘图画布；

绘制单元，用于采用所述绘图画布对与其对应的数据组进行图像绘制。

7.如权利要求6所述的数据绘制装置，其特征在于，所述绘制单元，用于依次采用所述绘图画布对与其对应的数据组进行图像绘制。

8.如权利要求7所述的数据绘制装置，其特征在于，所述绘制单元，具体用于根据所述浏览器的刷新频率，依次采用所述绘图画布对与其对应的数据组进行图像绘制。

9.如权利要求8所述的数据绘制装置，其特征在于，所述绘制单元包括：确定子单元和图像绘制子单元；

所述确定子单元，用于根据所述浏览器的刷新频率确定绘制图像的时间间隔；

所述图像绘制子单元，用于根据所述时间间隔，依次采用所述绘图画布对与其对应的数据组进行图像绘制。

10.如权利要求6-9任一项所述的数据绘制装置，其特征在于，所述设置单元，具体用于：

根据预设图像显示时间和待绘制数据的预设数量，确定需要绘图画布的数量，该数量大于1；

根据确定的数量在浏览器上设置对应数量的绘图画布。