CN107544766B - 一种数据显示方法及装置 - Google Patents

一种数据显示方法及装置 Download PDF

Info

Publication number
CN107544766B
CN107544766B CN201610464149.4A CN201610464149A CN107544766B CN 107544766 B CN107544766 B CN 107544766B CN 201610464149 A CN201610464149 A CN 201610464149A CN 107544766 B CN107544766 B CN 107544766B
Authority
CN
China
Prior art keywords
data
displayed
total number
graph
display area
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201610464149.4A
Other languages
English (en)
Other versions
CN107544766A (zh
Inventor
张筑
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201610464149.4A priority Critical patent/CN107544766B/zh
Publication of CN107544766A publication Critical patent/CN107544766A/zh
Application granted granted Critical
Publication of CN107544766B publication Critical patent/CN107544766B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本公开提供了一种数据显示方法及装置,在获取到待显示的数据源后,生成待显示的数据源对应的图形,并获取图形中数据节点的总数,当数据节点的总数大于预设总数时,动态地从待显示的数据源中获取与预设总数对应的数据,生成并显示与预设总数对应的数据的图形直至从待显示的数据源中获取到全部数据,即当数据节点的总数大于显示区域中一次可显示的数据节点的数量(预设总数)时,可以对待显示的数据源中数据以图形方式动态显示在显示区域,且每次显示的数据总数为预设总数,因此对于海量数据来说,在保证海量数据中每条数据均可被显示的前提下,降低每次显示的数据总数,进而使得显示区域中数据节点的密集度降低。

Description

一种数据显示方法及装置
技术领域
本公开涉及数据处理技术领域,更具体的说,尤其涉及一种数据显示方法及装置。
背景技术
为了让数据的变化趋势显示得更加直观,可以采用图形来显示数据的变化趋势,例如可以采用折线图来显示数据的变化趋势,其中折线图是用直线段将各数据节点连接起来而组成的图形,其可以以折线方式显示数据的变化趋势。因为折线图可以显示随时间而变化的连续数据,所以折线图非常适用于显示在相等时间间隔下数据的变化趋势。
目前市面上常见的商业级图表如ECharts和highCharts等,均提供了基本的折线图组件以供使用,通过折线图组件可以在电子设备上显示表示数据变化趋势的折线图,但是目前商业级图标提供的折线图组件在针对大量数据的显示时,均采用不断压缩折线图中相邻两个数据节点之间的距离的方式,使得显示区域可以同时显示所有的数据节点。
但是目前不同显示区域大小不一致,当在较小的显示区域中显示所有的数据节点时,会导致数据密集,并且对于海量数据来说,无论显示区域的大小如何,显示区域中各个数据节点的显示都会非常密集。
发明内容
鉴于上述问题,提出了本公开以便提供一种克服上述问题或者至少部分地解决上述问题的数据显示方法及装置,实现数据源中各条数据以图形方式的动态显示,降低图形中各个数据节点的密集度。具体的,技术方案如下:
一方面,本公开提供一种数据显示方法,所述方法包括:
在获取到待显示的数据源后,生成所述待显示的数据源对应的图形,所述图形用于展示所述待显示的数据源中数据的变化趋势;
获取所述图形中数据节点的总数,其中每个所述数据节点对应所述待显示的数据源中的一条数据;
判断所述数据节点的总数是否大于预设总数,所述预设总数是显示区域中一次可显示的数据节点的数量;
如果否,则在所述显示区域显示所述图形;
如果是,则分批次在所述显示区域对所述待显示的数据源中的数据进行动态显示直至所述待显示的数据源中的全部数据均被显示。
优选地,所述分批次在所述显示区域对所述待显示的数据源中的数据进行动态显示直至所述待显示的数据源中的全部数据均被显示,包括:
每间隔预设时间从所述待显示的数据源data[number]中的数据data[index]开始至所述待显示的数据源data[number]中的数据data[index+n-1]为止,获取与所述预设总数对应的数据,其中index为数据在所述待显示的数据源data[number]中的下标,所述index的初始值为0,且每间隔所述预设时间所述index的取值在上一次取值的基础上自动加1,n为所述预设总数,number为所述待显示的数据源的数据总数;
每获取到与所述预设总数对应的数据后,生成与所述预设总数对应的数据的图形,并在所述显示区域显示所述图形。
优选地,所述方法还包括:预先配置所述预设总数。
优选地,所述预先配置所述预设总数,包括:
获取所述显示区域的尺寸;
基于所述显示区域的尺寸,从预设图形参数列表中获取与所述显示区域的尺寸对应的图形单元的尺寸,所述图形单元是所述图形中显示数据的最小单元,且所述图形单元具有两个所述数据节点;
基于所述显示区域的尺寸和所述图形单元的尺寸,得到所述预设总数。
优选地,所述方法还包括:
当所述数据节点的总数大于预设总数时,接收所述显示区域中播放控件发送的控制指令;
基于所述控制指令对所述图形的播放情况进行控制。
另一方面,本公开提供一种数据显示装置,所述装置包括:
图形生成单元,用于在获取到待显示的数据源后,生成所述待显示的数据源对应的图形,所述图形用于展示所述待显示的数据源中数据的变化趋势;
获取单元,用于获取所述图形中数据节点的总数,其中每个所述数据节点对应所述待显示的数据源中的一条数据;
判断单元,用于判断所述数据节点的总数是否大于预设总数,所述预设总数是显示区域中一次可显示的数据节点的数量;
第一显示单元,用于当所述数据节点的总数不大于所述预设总数时,在所述显示区域显示所述图形;
第二显示单元,用于当所述数据节点的总数大于所述预设总数时,分批次在所述显示区域对所述待显示的数据源中的数据进行动态显示直至所述待显示的数据源中的全部数据均被显示。
优选地,所述第二显示单元包括:
获取子单元,用于每间隔预设时间从所述待显示的数据源data[number]中的数据data[index]开始至所述待显示的数据源data[number]中的数据data[index+n-1]为止,获取与所述预设总数对应的数据,其中index为数据在所述待显示的数据源data[number]中的下标,所述index的初始值为0,且每间隔所述预设时间所述index的取值在上一次取值的基础上自动加1,n为所述预设总数,number为所述待显示的数据源的数据总数;
图形处理子单元,用于每获取到与所述预设总数对应的数据后,生成与所述预设总数对应的数据的图形,并在所述显示区域显示所述图形。
优选地,所述装置还包括:配置单元,用于预先配置所述预设总数。
优选地,所述配置单元包括:
第一获取子单元,用于获取所述显示区域的尺寸;
第二获取子单元,用于基于所述显示区域的尺寸,从预设图形参数列表中获取与所述显示区域的尺寸对应的图形单元的尺寸,所述图形单元是所述图形中显示数据的最小单元,且所述图形单元具有两个所述数据节点;
处理子单元,用于基于所述显示区域的尺寸和所述图形单元的尺寸,得到所述预设总数。
优选地,所述装置还包括:
接收单元,用于当所述数据节点的总数大于预设总数时,接收所述显示区域中播放控件发送的控制指令;
控制单元,用于基于所述控制指令对所述图形的播放情况进行控制。
借由上述技术方案,本公开提供的数据显示方法及装置在获取到待显示的数据源后,生成待显示的数据源对应的图形,并获取图形中数据节点的总数,当数据节点的总数大于预设总数时,动态地从待显示的数据源中获取与预设总数对应的数据,生成并显示与预设总数对应的数据的图形直至从待显示的数据源中获取到全部数据,即当数据节点的总数大于显示区域中一次可显示的数据节点的数量(预设总数)时,可以对待显示的数据源中数据以图形方式动态显示在显示区域,且每次显示的数据总数为预设总数,因此对于海量数据来说,在保证海量数据中每条数据均可被显示的前提下,降低每次显示的数据总数,进而使得显示区域中数据节点的密集度降低。
上述说明仅是本公开技术方案的概述,为了能够更清楚了解本公开的技术手段,而可依照说明书的内容予以实施,并且为了让本公开的上述和其它目的、特征和优点能够更明显易懂,以下特举本公开的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本公开的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示出了本公开的示例性实施例提供的数据显示方法的一种流程图;
图2示出了本公开的示例性实施例提供的数据显示方法中分批次动态显示的流程图;
图3示出了本公开的示例性实施例提供的数据显示方法的另一种流程图;
图4示出了本公开的示例性实施例提供的显示区域中播放控件的示意图;
图5示出了本公开的示例性实施例提供的数据显示装置的一种结构示意图;
图6示出了本公开的示例性实施例提供的数据显示装置的另一种结构示意图;
图7示出了本公开的示例性实施例提供的数据显示装置的再一种结构示意图;
图8示出了本公开的示例性实施例提供的数据显示装置的再一种结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
请参阅图1,其示出了本公开的示例性实施例提供的数据显示方法的一种流程图,用于实现数据源中各条数据以图形方式的动态显示,以降低图形中各个数据节点的密集度。具体的,可以包括以下步骤:
101:在获取到待显示的数据源后,生成待显示的数据源对应的图形,其中图形用于展示待显示的数据源中数据的变化趋势。例如,在获取到待显示的数据源中各条数据是随相等时间间隔而变化的连续数据的情况下,可以生成其对应的折线图,以通过折线图来展示在相等时间间隔下数据的变化趋势。
也就是说,对于任意一个待显示的数据源,可以基于待显示的数据源中各条数据的特定变化趋势,生成与待显示的数据源对应的图形,以便于利用图形直观展示数据源中各条数据的变化趋势。
102:获取图形中数据节点的总数,其中每个数据节点对应待显示的数据源中的一条数据。例如,在图形中可以以水平轴来表示数据节点的类型,而垂直轴则用于表示数据节点的具体取值(即待显示的数据源中记录的数据)。
因为每个数据节点对应待显示的数据源中的一条数据,所以在获取到待显示的数据源后,可以直接将待显示的数据源中记录的数据总量作为图形中数据节点的总数。
103:判断数据节点的总数是否大于预设总数,如果否,执行步骤104;如果是,执行步骤105。
其中,预设总数是显示区域中一次可显示的数据节点的数量,相对于显示区域中一次显示海量数据来说,上述预设总数小于海量数据对应的数据节点的总量,从而减小显示区域一次可显示的数据节点的数量。
在本公开的示例性实施例中,上述预设总数可以预先配置,且所预先配置的预设总数在保证合理的显示次数来动态显示全部数据的前提下,降低每次显示的图形中数据节点的密集度,因此可以根据显示区域的尺寸来配置对应的预设总数。其配置过程如下:
首先、获取显示区域的尺寸,其中显示区域的尺寸包括:宽度w和高度h,这两个参数可以通过JS和JQuery获取到。例如假定显示区域是:<divid=”lineChart-container”></div>,则可以通过JQuery提供的高度获取函数$(“#lineChart-container”).css(“height”)和宽度获取函数$(“#lineChart-container”).css(“width”)来获取显示区域的大小;或者可以通过原生JS提供的高度获取函数document.getElementById("lineChart-container").style.heigh和宽度获取函数document.getElementById("lineChart-container").style.width获取显示区域的大小。在本公开的示例性实施例中,高度h的作用是控制图形中相邻两个数据节点之间的高度差不大于高度h。
其次、基于显示区域的尺寸,从预设图形参数列表中获取与显示区域的尺寸对应的图形单元的尺寸,其中图形单元是图形中显示数据的最小单元,且图形单元具有两个数据节点。以折线图为例,折线图中的相邻两个数据节点以及相邻两个数据节点之间的折线组成图形单元。
在本公开的示例性实施例中,预设图形参数列表中记录有与显示区域对应的图形单元的尺寸,且图形单元的尺寸是通过对显示区域中图形的显示情况的多次实际测试得到。例如:对于任意一个尺寸的显示区域来说,以一个数据源对显示区域中图形的显示情况进行实际测试,具体的,采用不同尺寸的图形单元在同一个显示区域中分批次显示同一个数据源,在将每次图形的显示情况进行对比分析后,将显示效果最好的图形单元的尺寸记录在预设图形参数列表中,并与相应的显示区域对应,因此后续在对应尺寸的显示区域中显示其他数据源时,可以直接从预设图形参数列表中获取到对应的图形单元的尺寸。仍以折线图为例,图形单元的尺寸可以是相邻两个数据节点之间的距离d。
最后、基于显示区域的尺寸和图形单元的尺寸,得到预设总数。仍以折线图为例,基于显示区域的尺寸和图形单元的尺寸得到预设总数的过程是:预设总数
Figure BDA0001027224330000071
104:在显示区域显示图形。当数据节点的总数小于或等于预设总数时,说明待显示的数据源含有的数据总数可以一次显示在显示区域中,此时则会直接在显示区域中显示待显示的数据源对应的图形。
105:分批次在显示区域对待显示的数据源中的数据进行动态显示直至待显示的数据源中的全部数据均被显示。
当数据节点的总数大于预设总数时,说明待显示的数据源含有的数据总数较大,若一次显示在显示区域中,则会导致图形的数据节点的密集度较高,因此在本公开的示例性实施例中,当数据节点的总数大于预设总数时,可以分批次在显示区域对待显示的数据源中的数据进行动态显示,直至待显示的数据源中的全部数据均被显示。
在本公开的示例性实施例中,分批次在显示区域显示的可行方式是:每间隔预设时间从所述待显示的数据源data[number]中的数据data[index]开始至所述待显示的数据源data[number]中的数据data[index+n-1]为止,获取与所述预设总数对应的数据;每获取到与预设总数对应的数据后,生成与预设总数对应的数据的图形,并在显示区域显示图形。
其中index为数据在所述待显示的数据源data[number]中的下标,所述index的初始值为0,且每间隔所述预设时间所述index的取值在上一次取值的基础上自动加1,n为所述预设总数,number为所述待显示的数据源的数据总数。
从上述每次从待显示的数据源中获取的与预设总数对应的数据可知:每次获取到的数据之间发生变化的数据仅有一条数据——将上次获取到的数据中的index[i]去除,并在当前获取到的数据中增加index[i+n],并且首次获取是从待显示的数据源中的index[0]获取。
下面结合流程图对上述分批次动态显示以及数据获取过程进行详细说明,假设待显示的数据源为data[number],number为待显示的数据源的数据总数,其过程如图2所示,可以包括以下步骤:
1051:初始化index,将index的取值设置为0。
1052:每间隔预设时间判断index+n是否小于number,如果是,执行步骤1053,如果否,返回执行步骤1051,将index的取值设置为0。当index+n的取值大于number时,说明一轮动态显示过程结束,此时需要将index的取值设置为0,开始下一轮的动态显示过程。
在本公开的示例性实施例中,可以设置动态显示的总轮数,进而可以在图2所示的流程图中加入对动态显示的轮数的判断过程,当动态显示的轮数小于总轮数时,继续动态显示过程;而当动态显示的轮数大于等于总轮数时,结束对待显示的数据源的动态显示过程,在显示区域中显示最后一轮中显示的最后一批次的图形。
1053:从待显示的数据源中获取数据data[index]至data[index+n-1],生成对应数据的图形,在显示区域中显示图形。
1054:将index的取值加1,返回执行步骤1052,以继续从待显示的数据源中获取其他未显示的数据。
例如待显示的数据源中含有100条数据,预设总数n等于10,则基于上述图2所示流程图,第一次从100条数据中获取data[0]至data[9]的数据,生成data[0]至data[9]的数据对应的图形进行显示;然后间隔预设时间后获取data[10]至data[19]的数据,生成data[10]至data[19]的数据对应的图形进行显示;……;间隔预设时间获取data[90]至data[99]的数据,生成data[90]至data[99]的数据对应的图形进行显示;间隔预设时间判断出index等于100,说明以从待显示的数据源中获取到全部数据并显示对应的图形,至此可以将index设置为0,以开始下一轮的动态显示。
借由上述技术方案,本公开提供的数据显示方法在获取到待显示的数据源后,生成待显示的数据源对应的图形,并获取图形中数据节点的总数,当数据节点的总数大于预设总数时,动态地从待显示的数据源中获取与预设总数对应的数据,生成并显示与预设总数对应的数据的图形直至从待显示的数据源中获取到全部数据,即当数据节点的总数大于显示区域中一次可显示的数据节点的数量(预设总数)时,可以对待显示的数据源中数据以图形方式动态显示在显示区域,且每次显示的数据总数为预设总数,因此对于海量数据来说,在保证海量数据中每条数据均可被显示的前提下,降低每次显示的数据总数,进而使得显示区域中数据节点的密集度降低。
请参阅图3,其示出了本公开的示例性实施例提供的数据显示方法的另一种流程图,在图1基础上,还可以包括以下步骤:
106:当数据节点的总数大于预设总数时,接收显示区域中播放控件发送的控制指令。
107:基于控制指令对图形的播放情况进行控制。
在本公开的示例性实施例中,播放控件为对图形的播放情况进行控制的控件,如图4所示,其中播放控件至少包括:播放、快进、快退、暂停和拖拽播放这五个控件,每个控件关联有相应的控制指令,具体的,播放控件对应的控制指令是正常播放指令,快进控件对应的控制指令是快进指令,快退控件对应的控制指令是快退指令,暂停控件对应的控制指令是暂停播放指令,而拖拽播放控件对应的控制指令则是拖拽播放指令。在图4中播放控件和暂停控件为同一个共用控件,当显示区域初始显示时,图形按照正常播放指令来更新,且图4中的共用控件作为暂停控件使用;当暂停控件被点击后,共用控件作为播放控件使用。
当任意一个控件被触碰后,与其关联的控制指令被发送至电子设备的控制器中,控制器则可以基于控制指令来对图形的播放情况进行控制。下面详细介绍每个控件对图形的播放情况进行控制的过程:
第一个、播放控件
当接收到播放控件关联的正常播放指令后,本公开的示例性实施例提供的数据显示方法则会以图2所示流程图来控制图形的播放,即按照预设时间来更新显示区域中显示的图形。
第二个、快进控件
当接收到快进控件关联的快进指令后,确定与快进指令对应的播放速度,并以确定的播放速度来缩小预设时间,以缩小后的预设时间来更新显示区域中显示的图形。比如播放速度是正常播放速度的2倍,初始的预设时间为10s(秒),则缩小后的预设时间为5s,以每间隔5s的方式以默认轮播方向来更新显示区域中显示的图形。
其中默认轮播方向用于指示从图形的哪个方向至哪个方向进行更新,如以水平方向为主,从图形的左方至图形的右方进行更新,这样就可以将已经显示的数据隐藏,而将未显示的数据进行显示。
当接收到快进指令后再次接收到播放控件关联的正常播放指令后,预设时间则会重新配置为初始的取值,以按照初始的预设时间来更新显示区域中显示的图形。
第三个、快退控件
当接收到快退控件关联的快退指令后,确定与快退指令对应的播放速度,并以确定的播放速度来缩小预设时间,以缩小后的预设时间来更新显示区域中显示的图形。比如播放速度是正常播放速度的2倍,初始的预设时间为10s(秒),则缩小后的预设时间为5s,以每间隔5s的方式以默认轮播方向的反方向来更新显示区域中显示的图形。
其中默认轮播方向用于指示从图形的哪个方向至哪个方向进行更新,如以水平方向为主,从图形的左方至图形的右方进行更新,则默认轮播方向的反方向则是从图形的右方至图形的左方进行更新,这样就可以将之前显示的数据再次显示在显示区域。
当接收到快退指令后再次接收到播放控件关联的正常播放指令后,预设时间则会重新配置为初始的取值,以按照初始的预设时间来更新显示区域中显示的图形。
第四个、暂停控件
当接收到暂停控件关联的暂停指令后,直接停止图形的动态更新,在显示区域中显示接收到暂停指令前显示的图形。
第五个、拖拽播放控件
在本公开的示例性实施例中,拖拽播放控件是位于显示区域中的一个进度条,通过进度条的推动来显示相应数据对应的图形。具体过程上:当检测到对进度条上锚点的拖拽操作时,根据拖拽操作过程中所述锚点的拖动位置,从待显示的数据源中获取目标数据,生成目标数据对应的图形进行显示;当检测到拖拽操作结束时,获取锚点的终止位置,基于锚点的终止位置得到与终止位置对应的相应数据,并在显示区域中显示相应数据对应的图形,通过拖拽播放可以根据进度条上锚点的拖动位置来定位相应的数据,实现数据的快速定位。
在这里需要说明的一点是:在本公开的示例性实施例中,可以通过对上述五个控件的操作对图形的播放情况进行切换,如在点击播放控件后点击快进控件,则图形从正常播放切换至快进播放;又或者在点击快进控件后点击快退控件,则图形从快进播放回到正常播放,然后再从正常播放切换至快退播放。在此处仅是对切换的可行方式描述,具体如何切换本公开的示例性实施例并不加以限制。
对于前述的各方法的示例性实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本公开并不受所描述的动作顺序的限制,因为依据本公开,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的示例性实施例均属于优选实施例,所涉及的动作和模块并不一定是本公开所必须的。
与上述方法的示例性实施例相对应,本公开还提供一种数据显示装置,如图5所示,其示出了本公开的示例性实施例提供的数据显示装置的一种结构示意图,可以包括:图形生成单元11、获取单元12、判断单元13、第一显示单元14和第二显示单元15。
图形生成单元11,用于在获取到待显示的数据源后,生成待显示的数据源对应的图形,其中图形用于展示待显示的数据源中数据的变化趋势。例如,在获取到待显示的数据源中各条数据是随相等时间间隔而变化的连续数据的情况下,可以生成其对应的折线图,以通过折线图来展示在相等时间间隔下数据的变化趋势。
获取单元12,用于获取图形中数据节点的总数,其中每个数据节点对应待显示的数据源中的一条数据。因为每个数据节点对应待显示的数据源中的一条数据,所以在获取到待显示的数据源后,可以直接将待显示的数据源中记录的数据总量作为图形中数据节点的总数。
判断单元13,用于判断数据节点的总数是否大于预设总数,其中预设总数是显示区域中一次可显示的数据节点的数量,相对于显示区域中一次显示海量数据来说,上述预设总数小于海量数据对应的数据节点的总量,从而减小显示区域一次可显示的数据节点的数量。并且预设总数在保证合理的显示次数来动态显示全部数据的前提下,降低每次显示的图形中数据节点的密集度。
第一显示单元14,用于当数据节点的总数不大于预设总数时,在显示区域显示图形。当数据节点的总数小于或等于预设总数时,说明待显示的数据源含有的数据总数可以一次显示在显示区域中,此时第一显示单元14则会直接在显示区域中显示待显示的数据源对应的图形。
第二显示单元15,用于当数据节点的总数大于预设总数时,分批次在显示区域对待显示的数据源中的数据进行动态显示直至待显示的数据源中的全部数据均被显示。
当数据节点的总数大于预设总数时,说明待显示的数据源含有的数据总数较大,若一次显示在显示区域中,则会导致图形的数据节点的密集度较高,因此在本公开的示例性实施例中,当数据节点的总数大于预设总数时,第二显示单元15可以分批次在显示区域对待显示的数据源中的数据进行动态显示,直至待显示的数据源中的全部数据均被显示。
在本公开的示例性实施例中,第二显示单元15采用图6示出的结构来实现数据的分批次显示,具体的第二显示单元15可以包括:获取子单元151和图形处理子单元152。
获取子单元151,用于每间隔预设时间从所述待显示的数据源data[number]中的数据data[index]开始至所述待显示的数据源data[number]中的数据data[index+n-1]为止,获取与所述预设总数对应的数据。
图形处理子单元152,用于每获取到与预设总数对应的数据后,生成与预设总数对应的数据的图形,并在显示区域显示图形。
其中index为数据在所述待显示的数据源data[number]中的下标,所述index的初始值为0,且每间隔所述预设时间所述index的取值在上一次取值的基础上自动加1,n为所述预设总数,number为所述待显示的数据源的数据总数。
从上述每次从待显示的数据源中获取的与预设总数对应的数据可知:每次获取到的数据之间发生变化的数据仅有一条数据——将上次获取到的数据中的index[i]去除,并在当前获取到的数据中增加index[i+n],并且首次获取是从待显示的数据源中的index[0]获取。
借由上述技术方案,本公开提供的数据显示装置在获取到待显示的数据源后,生成待显示的数据源对应的图形,并获取图形中数据节点的总数,当数据节点的总数大于预设总数时,动态地从待显示的数据源中获取与预设总数对应的数据,生成并显示与预设总数对应的数据的图形直至从待显示的数据源中获取到全部数据,即当数据节点的总数大于显示区域中一次可显示的数据节点的数量(预设总数)时,可以对待显示的数据源中数据以图形方式动态显示在显示区域,且每次显示的数据总数为预设总数,因此对于海量数据来说,在保证海量数据中每条数据均可被显示的前提下,降低每次显示的数据总数,进而使得显示区域中数据节点的密集度降低。
为了使得显示区域显示的图形的密集度相对于现有方式降低,本公开的示例性实施例提供的数据显示装置还包括:配置单元10,如图7所示。其中配置单元10,用于预先配置预设总数,并且对于不同的电子设备来说,配置单元10可以根据显示区域的尺寸来配置对应的预设总数。
相对应的配置单元10包括:第一获取子单元、第二获取子单元和处理子单元。其中第一获取子单元,用于获取显示区域的尺寸。显示区域的尺寸包括:宽度w和高度h,这两个参数可以通过JS和JQuery获取到,具体可参阅方法的示例性实施例中的相关说明。
第二获取子单元,用于基于显示区域的尺寸,从预设图形参数列表中获取与显示区域的尺寸对应的图形单元的尺寸,图形单元是图形中显示数据的最小单元,且图形单元具有两个数据节点。以折线图为例,折线图中的相邻两个数据节点以及相邻两个数据节点之间的折线组成图形单元。
在本公开的示例性实施例中,预设图形参数列表中记录有与显示区域对应的图形单元的尺寸,且图形单元的尺寸是通过对显示区域中图形的显示情况的多次实际测试得到。例如:对于任意一个尺寸的显示区域来说,以一个数据源对显示区域中图形的显示情况进行实际测试,具体的,采用不同尺寸的图形单元在同一个显示区域中分批次显示同一个数据源,在将每次图形的显示情况进行对比分析后,将显示效果最好的图形单元的尺寸记录在预设图形参数列表中,并与相应的显示区域对应,因此后续在对应尺寸的显示区域中显示其他数据源时,可以直接从预设图形参数列表中获取到对应的图形单元的尺寸。仍以折线图为例,图形单元的尺寸可以是相邻两个数据节点之间的距离d。
处理子单元,用于基于显示区域的尺寸和图形单元的尺寸,得到预设总数。仍以折线图为例,基于显示区域的尺寸和图形单元的尺寸得到预设总数的过程是:预设总数
Figure BDA0001027224330000141
请参阅图8,其示出了本公开的示例性实施例提供的数据显示装置的再一种结构示意图,在上述数据显示装置基础上还可以包括:接收单元16和控制单元17。
接收单元16,用于当数据节点的总数大于预设总数时,接收显示区域中播放控件发送的控制指令。
控制单元17,用于基于控制指令对图形的播放情况进行控制。
在本公开的示例性实施例中,播放控件为对图形的播放情况进行控制的控件,其中播放控件至少包括:播放、快进、快退、暂停和拖拽播放这五个控件,每个控件关联有相应的控制指令,具体的,播放控件对应的控制指令是正常播放指令,快进控件对应的控制指令是快进指令,快退控件对应的控制指令是快退指令,暂停控件对应的控制指令是暂停播放指令,而拖拽播放控件对应的控制指令则是拖拽播放指令。
当任意一个控件被触碰后,与其关联的控制指令被发送至电子设备的控制器中,控制器则可以基于控制指令来对图形的播放情况进行控制。下面详细介绍每个控件对图形的播放情况进行控制的过程:
第一个、播放控件
当接收到播放控件关联的正常播放指令后,控制单元17可以以第二显示单元15的方式来控制图形的播放,即按照预设时间来更新显示区域中显示的图形。
第二个、快进控件
当接收到快进控件关联的快进指令后,控制单元17确定与快进指令对应的播放速度,并以确定的播放速度来缩小预设时间,以缩小后的预设时间来更新显示区域中显示的图形。比如播放速度是正常播放速度的2倍,初始的预设时间为10s(秒),则缩小后的预设时间为5s,控制单元17以每间隔5s的方式以默认轮播方向来更新显示区域中显示的图形。
其中默认轮播方向用于指示从图形的哪个方向至哪个方向进行更新,如以水平方向为主,从图形的左方至图形的右方进行更新,这样就可以将已经显示的数据隐藏,而将未显示的数据进行显示。
当接收到快进指令后再次接收到播放控件关联的正常播放指令后,预设时间则会重新配置为初始的取值,控制单元17以按照初始的预设时间来更新显示区域中显示的图形。
第三个、快退控件
当接收到快退控件关联的快退指令后,控制单元17确定与快退指令对应的播放速度,并以确定的播放速度来缩小预设时间,以缩小后的预设时间来更新显示区域中显示的图形。比如播放速度是正常播放速度的2倍,初始的预设时间为10s(秒),则缩小后的预设时间为5s,控制单元17以每间隔5s的方式以默认轮播方向的反方向来更新显示区域中显示的图形。
其中默认轮播方向用于指示从图形的哪个方向至哪个方向进行更新,如以水平方向为主,从图形的左方至图形的右方进行更新,则默认轮播方向的反方向则是从图形的右方至图形的左方进行更新,这样就可以将之前显示的数据再次显示在显示区域。
当接收到快退指令后再次接收到播放控件关联的正常播放指令后,预设时间则会重新配置为初始的取值,控制单元17以按照初始的预设时间来更新显示区域中显示的图形。
第四个、暂停控件
当接收到暂停控件关联的暂停指令后,控制单元17直接停止图形的动态更新,在显示区域中显示接收到暂停指令前显示的图形。
第五个、拖拽播放控件
在本公开的示例性实施例中,拖拽播放控件是位于显示区域中的一个进度条,通过进度条的推动来显示相应数据对应的图形。具体过程上:当检测到对进度条上锚点的拖拽操作时,控制单元17根据拖拽操作过程中所述锚点的拖动位置,从待显示的数据源中获取目标数据,生成目标数据对应的图形进行显示;当检测到拖拽操作结束时,控制单元17获取锚点的终止位置,基于锚点的终止位置得到与终止位置对应的相应数据,并在显示区域中显示相应数据对应的图形,通过拖拽播放可以根据进度条上锚点的拖动位置来定位相应的数据,实现数据的快速定位。
在这里需要说明的一点是:在本公开的示例性实施例中,控制单元17可以通过对上述五个控件的操作对图形的播放情况进行切换,如在点击播放控件后点击快进控件,则图形从正常播放切换至快进播放;又或者在点击快进控件后点击快退控件,则图形从快进播放回到正常播放,然后再从正常播放切换至快退播放。在此处仅是对切换的可行方式描述,具体如何切换本公开的示例性实施例并不加以限制。
在本公开的其他示例性实施例中,所述数据显示装置包括处理器和存储器,上述图形生成单元11、获取单元12、判断单元13、第一显示单元14和第二显示单元15等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数来以图形方式动态显示数据源中各条数据,降低图形中各个数据节点的密集度。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flashRAM),存储器包括至少一个存储芯片。
借由上述技术方案,本公开提供的数据显示装置在获取到待显示的数据源后,生成待显示的数据源对应的图形,并获取图形中数据节点的总数,当数据节点的总数大于预设总数时,动态地从待显示的数据源中获取与预设总数对应的数据,生成并显示与预设总数对应的数据的图形直至从待显示的数据源中获取到全部数据,即当数据节点的总数大于显示区域中一次可显示的数据节点的数量(预设总数)时,可以对待显示的数据源中数据以图形方式动态显示在显示区域,且每次显示的数据总数为预设总数,因此对于海量数据来说,在保证海量数据中每条数据均可被显示的前提下,降低每次显示的数据总数,进而使得显示区域中数据节点的密集度降低。
本公开还提供了一种计算机程序产品,当在数据处理设备上执行时,适于执行初始化有如下方法步骤的程序代码:
获取到待显示的数据源后,生成所述待显示的数据源对应的图形,所述图形用于展示所述待显示的数据源中数据的变化趋势;
获取所述图形中数据节点的总数,其中每个所述数据节点对应所述待显示的数据源中的一条数据;
判断所述数据节点的总数是否大于预设总数,所述预设总数是显示区域中一次可显示的数据节点的数量;
如果否,则在所述显示区域显示所述图形;
如果是,则分批次在显示区域对所述待显示的数据源中的数据进行动态显示直至所述待显示的数据源中的全部数据均被显示。
本领域内的技术人员应明白,本公开的示例性实施例可提供为方法、***、或计算机程序产品。因此,本公开可采用完全硬件示例性实施例、完全软件示例性实施例、或结合软件和硬件方面的示例性实施例的形式。而且,本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本公开是参照根据本公开的示例性实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flashRAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
以上仅为本公开的示例性实施例而已,并不用于限制本公开。对于本领域技术人员来说,本公开可以有各种更改和变化。凡在本公开的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本公开的权利要求范围之内。

Claims (6)

1.一种数据显示方法,其特征在于,所述方法包括:
在获取到待显示的数据源后,生成所述待显示的数据源对应的图形,所述图形用于展示所述待显示的数据源中数据的变化趋势;
获取所述图形中数据节点的总数,其中每个所述数据节点对应所述待显示的数据源中的一条数据;
判断所述数据节点的总数是否大于预设总数,所述预设总数是显示区域中一次可显示的数据节点的数量;如果否,则在所述显示区域显示所述图形;
如果是,则分批次在所述显示区域对所述待显示的数据源中的数据进行动态显示直至所述待显示的数据源中的全部数据均被显示,其中,每获取到与所述预设总数对应的数据后,生成与所述预设总数对应的数据的图形,并在所述显示区域显示所述图形;
还包括,采用以下方法预先配置所述预设总数:
获取所述显示区域的尺寸;
基于所述显示区域的尺寸,从预设图形参数列表中获取与所述显示区域的尺寸对应的图形单元的尺寸,所述图形单元是所述图形中显示数据的最小单元,且所述图形单元具有两个所述数据节点;
基于所述显示区域的尺寸和所述图形单元的尺寸,得到所述预设总数。
2.根据权利要求1所述的方法,其特征在于,所述分批次在所述显示区域对所述待显示的数据源中的数据进行动态显示直至所述待显示的数据源中的全部数据均被显示,包括:
每间隔预设时间从所述待显示的数据源data[number]中的数据data[index]开始至所述待显示的数据源data[number]中的数据data[index+n-1]为止,获取与所述预设总数对应的数据,其中index为数据在所述待显示的数据源data[number]中的下标,所述index的初始值为0,且每间隔所述预设时间所述index的取值在上一次取值的基础上自动加1,n为所述预设总数,number为所述待显示的数据源的数据总数;
每获取到与所述预设总数对应的数据后,生成与所述预设总数对应的数据的图形,并在所述显示区域显示所述图形。
3.根据权利要求1所述的方法,其特征在于,所述方法还包括:
当所述数据节点的总数大于预设总数时,接收所述显示区域中播放控件发送的控制指令;
基于所述控制指令对所述图形的播放情况进行控制。
4.一种数据显示装置,其特征在于,所述装置包括:
图形生成单元,用于在获取到待显示的数据源后,生成所述待显示的数据源对应的图形,所述图形用于展示所述待显示的数据源中数据的变化趋势;
获取单元,用于获取所述图形中数据节点的总数,其中每个所述数据节点对应所述待显示的数据源中的一条数据;
判断单元,用于判断所述数据节点的总数是否大于预设总数,所述预设总数是显示区域中一次可显示的数据节点的数量;第一显示单元,用于当所述数据节点的总数不大于所述预设总数时,在所述显示区域显示所述图形;
第二显示单元,用于当所述数据节点的总数大于所述预设总数时,分批次在所述显示区域对所述待显示的数据源中的数据进行动态显示直至所述待显示的数据源中的全部数据均被显示,其中,每获取到与所述预设总数对应的数据后,生成与所述预设总数对应的数据的图形,并在所述显示区域显示所述图形;
所述装置还包括:配置单元,用于预先配置所述预设总数;
所述配置单元包括:
第一获取子单元,用于获取所述显示区域的尺寸;
第二获取子单元,用于基于所述显示区域的尺寸,从预设图形参数列表中获取与所述显示区域的尺寸对应的图形单元的尺寸,所述图形单元是所述图形中显示数据的最小单元,且所述图形单元具有两个所述数据节点;
处理子单元,用于基于所述显示区域的尺寸和所述图形单元的尺寸,得到所述预设总数。
5.根据权利要求4所述的装置,其特征在于,所述第二显示单元包括:
获取子单元,用于每间隔预设时间从所述待显示的数据源data[number]中的数据data[index]开始至所述待显示的数据源data[number]中的数据data[index+n-1]为止,获取与所述预设总数对应的数据,其中index为数据在所述待显示的数据源data[number]中的下标,所述index的初始值为0,且每间隔所述预设时间所述index的取值在上一次取值的基础上自动加1,n为所述预设总数,number为所述待显示的数据源的数据总数;
图形处理子单元,用于每获取到与所述预设总数对应的数据后,生成与所述预设总数对应的数据的图形,并在所述显示区域显示所述图形。
6.根据权利要求4所述的装置,其特征在于,所述装置还包括:
接收单元,用于当所述数据节点的总数大于预设总数时,接收所述显示区域中播放控件发送的控制指令;
控制单元,用于基于所述控制指令对所述图形的播放情况进行控制。
CN201610464149.4A 2016-06-23 2016-06-23 一种数据显示方法及装置 Active CN107544766B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610464149.4A CN107544766B (zh) 2016-06-23 2016-06-23 一种数据显示方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610464149.4A CN107544766B (zh) 2016-06-23 2016-06-23 一种数据显示方法及装置

Publications (2)

Publication Number Publication Date
CN107544766A CN107544766A (zh) 2018-01-05
CN107544766B true CN107544766B (zh) 2021-01-22

Family

ID=60960483

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610464149.4A Active CN107544766B (zh) 2016-06-23 2016-06-23 一种数据显示方法及装置

Country Status (1)

Country Link
CN (1) CN107544766B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113110905B (zh) * 2021-03-29 2023-06-23 联想(北京)有限公司 一种控制方法、装置、设备及计算机可读存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103135904A (zh) * 2011-12-05 2013-06-05 英顺源(上海)科技有限公司 图表的动态显示***及其显示方法
CN103345391A (zh) * 2013-06-20 2013-10-09 深圳市亚特尔科技有限公司 一种优化显示数据的方法
CN103869121A (zh) * 2012-12-14 2014-06-18 北京普源精电科技有限公司 一种波形显示装置及方法
CN104484203A (zh) * 2014-12-11 2015-04-01 北京国双科技有限公司 用于列表数据展示控件的数据展示方法和装置
CN105574202A (zh) * 2016-01-06 2016-05-11 北京金控数据技术股份有限公司 运行设施实时数据多曲线展示方法

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103390110A (zh) * 2013-07-26 2013-11-13 天津大学 一种数据显示方法
CN105117404B (zh) * 2015-07-17 2018-12-21 南京大学 基于图表类型和数据特征场景下的图表显示缺陷优化方法
CN105718603A (zh) * 2016-03-31 2016-06-29 北京理工大学 一种基于蜡烛图的时序数据可视化方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103135904A (zh) * 2011-12-05 2013-06-05 英顺源(上海)科技有限公司 图表的动态显示***及其显示方法
CN103869121A (zh) * 2012-12-14 2014-06-18 北京普源精电科技有限公司 一种波形显示装置及方法
CN103345391A (zh) * 2013-06-20 2013-10-09 深圳市亚特尔科技有限公司 一种优化显示数据的方法
CN104484203A (zh) * 2014-12-11 2015-04-01 北京国双科技有限公司 用于列表数据展示控件的数据展示方法和装置
CN105574202A (zh) * 2016-01-06 2016-05-11 北京金控数据技术股份有限公司 运行设施实时数据多曲线展示方法

Also Published As

Publication number Publication date
CN107544766A (zh) 2018-01-05

Similar Documents

Publication Publication Date Title
CN106547420B (zh) 一种页面处理方法和装置
AU2010216341A1 (en) Defining simple and complex animations
US9298348B2 (en) Mobile device and method for providing widgets
CN105786301B (zh) 多窗口***下切换显示对象的方法及其装置
US11941728B2 (en) Previewing method and apparatus for effect application, and device, and storage medium
US9436358B2 (en) Systems and methods for editing three-dimensional video
WO2016101816A1 (zh) 一种即时通讯中的信息显示方法及装置
CN107077347B (zh) 视图管理架构
US20240170023A1 (en) Digital video production systems and methods
CN107544766B (zh) 一种数据显示方法及装置
CN106610830B (zh) 页面元素的拖放方法及装置
CN109819329B (zh) 一种窗口显示方法及智能电视
US20140173442A1 (en) Presenter view in presentation application
CN112579066A (zh) 图表展示方法、装置、存储介质及设备
KR20200141406A (ko) 미세먼지 측정 데이터를 3d 그래픽으로 표시하는 방법 및 이를 수행하기 위한 장치
CN111866597A (zh) 控制视频中页面元素的布局的方法、***及存储介质
CN115119063B (zh) 媒体播放进度控制方法、装置、计算机设备和存储介质
CN110990162A (zh) 一种数据穿梭的处理方法及装置
US20230205393A1 (en) Dynamic visualization of an object tracked by an object tracking system in a graphical user interface
US20240005586A1 (en) Systems and methods for animating transition of an object
CN113873312B (zh) 一种视频编辑方法及装置
CN109062321B (zh) 一种信号生成方法、设备及存储介质
CN114090922A (zh) 加载动画的实现方法、装置、电子设备及存储介质
CN116684697A (zh) 一种视频回放方法、装置、设备和介质
CN112732261A (zh) 仪表盘的构建方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 100080 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing

Applicant after: Beijing Guoshuang Technology Co.,Ltd.

Address before: 100086 Cuigong Hotel, 76 Zhichun Road, Shuangyushu District, Haidian District, Beijing

Applicant before: Beijing Guoshuang Technology Co.,Ltd.

CB02 Change of applicant information
GR01 Patent grant
GR01 Patent grant