CN107193970A - 一种基于绘图库实现数据动态显示效果的方法 - Google Patents

Abstract

本发明公开了一种基于绘图库实现数据动态显示效果的方法，包括以下步骤：初始化多个位置重叠的DOM，并在DOM上初始化对应数量的画布；向后台发起数据请求让后端或前端生成需要的坐标数据；取得坐标数据后，将坐标数据分别绘制到画布上；将画布的显示状态设置为不可见；定时运行显示函数，通过显示函数每次将画布中的一层显示状态设置为可见；本发明可提高动态数据显示效率、降低不必要的后台计算和网络开销，更加高效，并可节省前端消耗。

Description

一种基于绘图库实现数据动态显示效果的方法

技术领域

本发明涉及数据动态显示效果的解决方案，具体涉及一种基于绘图库实现数据动态显示效果的方法。

背景技术

为了方便查看通常需要在网页地图上来动态显示数据变化，目前网页上绘制图形主要使用两种方式来绘制；Canvas，通过javascript脚本来绘制2d图形，会调用相应的api来进行图形绘制工作；可缩放矢量图形SVG，使用XML来描述2d图形的语言，通过插入xml节点来描绘图形；这两种方式都需要依赖HTML中的DOM节点来创建画布，然后在画布上进行图形绘制；绘制地图通常会用到对应的地图数据文件，如绘制中国地图会用到中国地图的数据文件，数据文件里面记录着地图边界的经纬度坐标，将这些坐标对应的点连接起来就形成了整个中国地图的外观；地图动态数据指在已经绘制好的地图区域中根据一些经纬度坐标数据绘制这些坐标对应的点，这些坐标数据又是随着时间的变化而变化的；所以需要把老的坐标数据绘制的点擦掉，再把新的坐标数据绘制上去，这样达到地图上这些绘制的坐标点是动态变化的，如地图上的风云变化效果。

这种方法网页会定时通过ajax（创建交互式网页应用的网页开发技术）方式向后台请求后台生成的一组坐标数据或是前端生成一组坐标数据，数据生成后，通过调用对应的api（应用程序编程接口）来进行画布的重绘把旧的数据擦除再把新的坐标数据绘制出来；现有的方法会很频繁的向后端发出请求获取后端生成的一组坐标数据，增加后端负载，或是前端频繁的定时随机生成一组坐标数据造成前端的压力；前端页面会根据取得的一组坐标数据定时的对画布进行重绘，如果一次生成的坐标数量很大的话会严重增加前端页面的压力，画布重绘时间的延长，用户体验会降低；并且后端生成数据可能由于网络也会造成延迟，导致前端数据不能定时平缓的变化。

发明内容

本发明提供一种提高地图动态数据显示效率、减少前端页面地图绘制频率的基于绘图库实现数据动态显示效果的方法。

本发明采用的技术方案是：一种基于绘图库实现数据动态显示效果的方法，包括以下步骤：

初始化多个位置重叠的DOM，并在DOM上初始化对应数量的画布；

向后台发起数据请求让后端或前端生成需要的坐标数据；

取得坐标数据后，将坐标数据分别绘制到画布上；

将画布的显示状态设置为不可见；

定时运行显示函数，通过显示函数每次将画布中的一层显示状态设置为可见。

进一步的，所述显示函数运行过程如下：

设置一个数组存放已经显示过的画布id.；

将画布均设置为隐藏；

随机取出画布中的一个，将它的id与数组中存放的id进行比较；如果取到的画布id在数组中存在，则重新取一画布；否则将画布的id加入到数组中，并将画布设置为显示；同时判断数组的长度是否等于画布的数量，如果等于画布的数量，则清空数组。

本发明的有益效果是：

（1）本发明只需在页面初始化时进行多个画布的地图数据绘制，可显著提高动态数据显示的效率，大大减少前端页面地图绘制的频率；

（2）本发明地图坐标数据只由前端生成固定的数据，不需要频繁请求后端来生成数据从而降低不必要的后台计算和网络开销；

（3）本发明中画布和画布的地图及地图动态坐标数据都在页面初始化时已经生成和绘制好，所以页面初始化好后以后不需要在绘制地图及绘制地图动态数据上再消耗资源；

（4）本发明通过显隐/藏画布的方式来模拟数据的动态显示比不断调用绘图API来重绘画布的方式更加高效，节省前端消耗。

附图说明

图1为本发明流程示意图。

具体实施方式

下面结合附图和具体实施例对本发明做进一步说明。

如图1所示，一种基于绘图库实现数据动态显示效果的方法，包括以下步骤：

初始化多个位置重叠的DOM，并在DOM上初始化对应数量的画布；这样就初始化了多层重叠的画布；

向后台发起数据请求让后端或前端生成需要的坐标数据；

取得坐标数据后，将坐标数据分别绘制到画布上；这样多层画布上的不同坐标数据就绘制好了；

将画布的显示状态设置为不可见，多层画布在任意时刻只有一层是可见的，其它都不可见，这样在视觉效果上只能看到一层画布的数据；

定时运行显示函数，通过显示函数每次将画布中的一层显示状态设置为可见；这样不断的运行，不同画布的数据会定时的随机的显示出来，从而在视觉上达到数据动态变化的效果。

进一步的，所述显示函数运行过程如下：

设置一个数组存放已经显示过的画布id.；

将画布均设置为隐藏；

随机取出画布中的一个，将它的id与数组中存放的id进行比较；如果取到的画布id在数组中存在，则重新取一画布；否则将画布的id加入到数组中，并将画布设置为显示；同时判断数组的长度是否等于画布的数量，如果等于画布的数量，则清空数组。

下面以最近10天内四川省微博使用分布图展现为例进行说明。

初始化10个位置重叠的DOM，并在DOM上初始化对应数量的画布；这样就初始化了10层重叠的画布；

向后台发起数据请求一次性取出10天的微博使用地点的坐标数据；

取得坐标数据后，将坐标数据分别绘制到10层透明并重叠的四川省地图画布上；

将画布的显示状态设置为不可见；

定时运行显示函数，通过显示函数每次将画布中的一层显示状态设置为可见；此时地图上的坐标数据就开始定时循环随机的显示10层画布中的其中一层，从视觉上呈现出不同时间段微博使用在地图上的动态分布效果。

显示函数运行过程如下：

运行前设置一个数组来存放已经显示过的画布id，初次运行时数组为空；

运行时先将10个画布都设置为隐藏；

随机取出10个画布中的其中一个，然后将它的id与数组中存放的id进行比较；如果已经存在，就再随机取一个画布，直到取到的画布id不在数组中；那么就将此画布的id加入到数组中，并将画布设置为显示；判断此时数组长度是否已经等于10，如果等于10，就清孔数组；数组等于10表示10个画布都显示过了，下次运行的时候会重新来。

本发明通过初始化多层画布的方式来预先存储多组坐标数据，减少了频繁向后端请求坐标数据；改为一次性拿到多组坐标数据，然后一次性的把多组坐标数据绘制到对应的多层画布上，减少了频繁的前端画布的绘制工作，改为只在初始化多层画布的同时绘制对应的画布数据；多层画布在页面上是处于重叠状态的，所以多层画布初始化的状态都为隐藏；当数据在画布上绘制完成后，会定时的根据相应的算法将多层画布中的一层状态改为显示，这样在同一时间下只有一层画布是显示出来的；这样会定时的让多层画布中的一层显示其余的隐藏这种方式，来达到视觉上地图上的数据是动态变化的，定时时间设置越短，数据就变化得越快反之就越慢。

本发明可以显著提高地图动态数据显示的效率，可大大减少前端页面地图绘制的频率，只需要在页面初始化时进行多个画布的地图数据绘制，之后都是通过画布的显示／隐藏，来显示不同的画布数据；地图坐标数据也可以只由前端生成固定的几套数据，不需要频繁请求后端来生成数据从而降低不必要后台计算和网络开销；由于画布及各层画布的地图及地图动态坐标数据都在页面初始化时已经生成和绘制好，所以页面初始化好以后不需要在绘制地图及绘制地图动态数据上再消耗资源；通过显隐/藏画布的方式来模拟数据的动态显示比不断调用绘图API来重绘画布的方式更高效，更节省前端消耗。

本文中：

HTML：超文本标记语言。

XML：可扩展的标记语言，设计宗旨是为了传输数据而非显示数据。

AJAX：在不重新加载整个页面的情况下，与服务器交换数据并更新部分页面显示更新数据的技术。

DOM：文档对象模型，W3C组织推荐的处理可扩展标记语言的标准编程接口。

id：编码。

SVG：可缩放矢量图形。

api：Application Programming Interface 应用程序编程接口。

Claims (2)

1.一种基于绘图库实现数据动态显示效果的方法，其特征在于，包括以下步骤：

初始化多个位置重叠的DOM，并在DOM上初始化对应数量的画布；

向后台发起数据请求让后端或前端生成需要的坐标数据；

取得坐标数据后，将坐标数据分别绘制到画布上；

将画布的显示状态设置为不可见；

定时运行显示函数，通过显示函数每次将画布中的一层显示状态设置为可见。

2.根据权利要求1所述的一种基于绘图库实现数据动态显示效果的方法，其特征在于，所述显示函数运行过程如下：

设置一个数组存放已经显示过的画布id.；

将画布均设置为隐藏；

随机取出画布中的一个，将它的id与数组中存放的id进行比较；如果取到的画布id在数组中存在，则重新取一画布；否则将画布的id加入到数组中，并将画布设置为显示；同时判断数组的长度是否等于画布的数量，如果等于画布的数量，则清空数组。