图表的数据展示方法及装置制造方法及图纸

本申请实施例公开了一种图表的数据展示方法及装置。所述方法包括：确定与光标所在的像素点对应的且在包含多个图形的图表中的第一坐标轴上的第一参照数值；根据所述第一参照数值确定与所述第一坐标轴对应的第一数值范围；根据图表中的各个图形对应的图形数据包含的在所述第一坐标轴上的数值与所述第一数值范围，确定所述图表中的备选图形集合；根据所述备选图形集合确定所述光标选定的待展示图形；将与所述待展示图形对应的图形数据在该图表中进行展示。本申请实施例通过上述方法，使得在图表中包含的图形数量较大时，可以确保计算一次光标所选定的图形的过程耗用较短的时间，确保图表中展示的数据准确性。

Method and device for displaying data of chart

The embodiment of the present invention discloses a data display method and a device for a chart. The method includes determining corresponding pixels of the cursor and the value of the first reference to the first axis includes multiple graphics on the chart; according to the first reference value to determine the first range of values corresponding to the first axis; according to the numerical in the first axis of the graphics data each graphics in the chart included with the first range of values, determine the alternative graphics in the chart set; according to the alternative set the graphics cursor to display graphics will be selected; and the graphics to be displayed on the graphics data in the chart display. The embodiment of the application by the above method, the large number of graphic chart included in the calculation process can ensure that a cursor selected graphics using a relatively short period of time, to ensure data accuracy in the chart display.

【技术实现步骤摘要】
图表的数据展示方法及装置
本申请涉及计算机及人机交互
，特别涉及一种图表的数据展示方法及装置。
技术介绍
一般地，在浏览器上通过一定的计算机绘图程序可以绘制包含多个图形的图表(如Canvas图表)，该图表的每个图形可以与一个图形数据进行对应。以Canvas图表为例，Canvas(画布)是在HTML(超文本标记语言)中用以绘制图形的容器，在一些应用中可以通过Canvas来绘制图表。Canvas可以将一个绘图API(ApplicationProgrammingInterface,应用程序编程接口)展现给客户端，以使JavaScript脚本能够把待绘制图形绘制到一块画布上。在绘制成上述包含多个图形的图表后，需要实现与鼠标之间的交互，在鼠标的光标在上述图表内移动时，需要将光标选定的图形对应的图形数据进行展示，以供用户查看。通常，浏览器不会提供当前光标移动到上述Canvas图表中哪个图形上的事件或者接口，需要Canvas通过计算的方式来确定。为满足显示的要求，Canvas计算一次光标所选定的图形所耗用的时长需小于计算机显示屏上的像素点的刷新间隔。现有技术中，以Canvas图表为例，计算机确定光标所选定的图形的过程是：当光标移动到Canvas图表中的某个位置之后，会确定当前光标所在位置对应的像素点的坐标，之后通过传统的数学几何算法，逐一检查当前像素点的坐标是否落入当前Canvas图表中的每一个图形所在的区域内，直至找到当前像素点的坐标所落入的图形，并将该图形对应的图形数据在该Canvas图表上进行展示。在该现有技术中，由于画布(canvas)上的图形绘制完成后是作为图片元素存在，需要为每个图形采用一次数学几何算法，这样完成一次光标所选定图形的计算过程需耗用的时长与上述Canvas图表中包含的图形数量成正比，当上述Canvas图表中包含的图形数量较大时，容易导致计算一次光标所选定的图形的过程所耗用的时长大于计算机显示屏上的像素点的刷新间隔，进而导致Canvas图表中展示的数据不准确。
技术实现思路
本申请实施例的目的是提供一种图表的数据展示方法及装置，用以解决上述现有技术中存在的问题。为解决上述问题，本申请实施例提供的图表的数据展示方法及装置通过如下技术方案来实现：一种Canvas图表的数据展示方法，包括：确定与光标所在的像素点对应的且在包括多个图形的图表中的第一坐标轴上的第一参照数值；根据所述第一参照数值确定与所述第一坐标轴对应的第一数值范围；其中，所述第一参照数值处于确定的所述第一数值范围内；逐一判断与所述图表中的各个图形对应的图形数据在所述第一坐标轴上的数值是否处于所述第一数值范围内；若是，将所述图表中的该图形确定为备选图形，得到包含各备选图形的备选图形集合；基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的并被所述光标选定的待展示图形；将与所述待展示图形对应的图形数据在该图表中进行展示。一种图表的数据展示装置：第一数值确定单元，用于确定与光标所在的像素点对应的且在包含多个图形的图表中的第一坐标轴上的第一参照数值；第一范围确定单元，用于根据所述第一参照数值确定与所述第一坐标轴对应的第一数值范围；其中，所述第一参照数值处于确定的所述第一数值范围内；第一判断单元，用于逐一判断与所述图表中的各个图形对应的图形数据在所述第一坐标轴上的数值是否处于所述第一数值范围内；若是，将所述图表中的该图形确定为备选图形，得到包含各备选图形的备选图形集合；图形确定单元，用于基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的并被所述光标选定的待展示图形；展示单元，用于将与所述待展示图形对应的图形数据在该图表中进行展示。由以上本申请实施例提供的技术方案可见，本申请实施例提供的一种图表的数据展示方法及装置，通过在光标停留在图表中某个像素点上时，确定该光标所在的像素点对应的且在包含多个图形的图表中的第一坐标轴上的第一参照数值，并根据该第一参照数值确定第一数值范围，随后，通过逐一判断与所述图表中的各个图形对应的图形数据在所述第一坐标轴上的数值是否处于所述第一数值范围内，若是，将所述图表中的该图形确定为备选图形，得到包含各备选图形的备选图形集合。最终，基于所述备选图形集合中的备选图形，确定待展示图形(比如，可以利用传统的数学几何算法来确定)并将该待展示图形对应的图形数据在该图表中进行展示。相比较于现有技术，在本申请实施例上述过程中，通过确定第一数值范围，可以在第一数值范围对应的图表的区域内查找被光标选定的图形，从而可以将疑似被选定的图形(备选图形)的数目进行限缩，在得到各个疑似被选定的图形之后，可以在逐一通过传统的数学几何算法确定待展示图形，由于计算一次光标所选定的图形的过程所耗用的时间可以不决定于整个图表中包含的图形数量，使得在图表中包含的图形数量较大时，依然可以确保计算一次光标所选定的图形的过程耗用较短的时间(小于计算机显示屏上的像素点的刷新间隔)，确保图表中展示的数据准确性。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1为本申请一实施例提供的图表的数据展示方法的流程图；图2为本申请实施例中Canvas图表(点状)的示意图；图3为本申请实施例中Canvas图表(柱状)的示意图；图4为本申请一实施例提供的图表的数据展示装置的模块示意图。具体实施方式为了使本
的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。本申请实施例提供一种图表的数据展示方法及装置，用以解决现有技术在确定光标所选定的图形并将所述图形对应的图形数据进行展示的过程中存在的耗时问题。为了便于描述，本文将以Canvas图表为例对本申请的技术方案进行叙述。当然，所述包含多个图形的图表包括除Canvas图表之外的其他类型的图表，本申请将不一一列举。对于Canvas图表，计算机可以在网页中通过CanvasAPI生成Canvas图表。其中，关于如何生成Canvas图表的过程为本领域普通技术人员所熟知的技术，本文不再予以介绍。本文将具体叙述在生成Canvas图表之后，计算机确定光标所选定的图形，并将该选定的图形对应的图形数据进行展示的过程。图1为本申请一实施例中图表的数据展示方法的流程图。配合参照图1和图2所示，本实施例中，所述图表的数据展示方法包括如下步骤：S110：确定与光标所在的像素点对应的且在图表中的第一坐标轴上的第一参照数值。以Canvas图表为例，像素点是显示器显示画面的最小发光单位，由红、绿、蓝三个像素单元组成。在计算机的显示器显示生成的Canvas图表时，该Canvas图表所在区域10是由若干像素点组成的。在图2中，所示Canvas图表本文档来自技高网...

【技术保护点】
一种图表的数据展示方法，其特征在于，包括：确定与光标所在的像素点对应的且在包含多个图形的图表中的第一坐标轴上的第一参照数值；根据所述第一参照数值确定与所述第一坐标轴对应的第一数值范围；其中，所述第一参照数值处于确定的所述第一数值范围内；逐一判断与所述图表中的各个图形对应的图形数据在所述第一坐标轴上的数值是否处于所述第一数值范围内；若是，将所述图表中的该图形确定为备选图形，得到包含各备选图形的备选图形集合；基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的并被所述光标选定的待展示图形；将与所述待展示图形对应的图形数据在该图表中进行展示。

【技术特征摘要】
1.一种图表的数据展示方法，其特征在于，包括：确定与光标所在的像素点对应的且在包含多个图形的图表中的第一坐标轴上的第一参照数值；根据所述第一参照数值确定与所述第一坐标轴对应的第一数值范围；其中，所述第一参照数值处于确定的所述第一数值范围内；逐一判断与所述图表中的各个图形对应的图形数据在所述第一坐标轴上的数值是否处于所述第一数值范围内；若是，将所述图表中的该图形确定为备选图形，得到包含各备选图形的备选图形集合；基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的并被所述光标选定的待展示图形；将与所述待展示图形对应的图形数据在该图表中进行展示。2.如权利要求1所述的方法，其特征在于，所述图表为Canvas图表。3.如权利要求1所述的方法，其特征在于，根据所述第一参照数值确定与所述第一坐标轴对应的第一数值范围之前，所述方法还包括：确定所述图表中包含的最大图形；确定与处于所述最大图形内的各像素点对应的在所述第一坐标轴上的参照数值，得到与所述最大图形对应的参照数值变化区间；则，根据所述第一参照数值确定与所述第一坐标轴对应的第一数值范围，具体包括：根据所述第一参照数值及所述参照数值变化区间，确定与所述第一坐标轴对应的第一数值范围；其中，所述第一参照数值与所述第一数值范围的端点值之间的差值不小于所述参照数值变化区间。4.如权利要求1所述的方法，其特征在于，所述将所述图表中的该图形确定为备选图形，得到包含各备选图形的备选图形集合之后，所述方法还包括：判断所述备选图形集合包含的备选图形的数量是否小于或等于预设阈值；则，基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的并被所述光标选定的待展示图形，具体包括：若所述备选图形集合包含的备选图形的数量小于或等于预设阈值，基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的并被所述光标选定的待展示图形。5.如权利要求4所述的方法，其特征在于，判断所述备选图形集合包含的备选图形的数量是否小于或等于预设阈值之后，所述方法还包括：若所述备选图形集合包含的备选图形的数量大于预设阈值，确定与光标所在的像素点对应的且在图表中的第二坐标轴上的第二参照数值；根据所述第二参照数值确定与所述第二坐标轴对应的第二数值范围；其中，所述第二参照数值处于确定的所述第二数值范围内；逐一判断与所述备选图形集合中的各个备选图形对应的图形数据包含的在所述第二坐标轴上的数值是否处于所述第二数值范围内；若否，将该备选图形从备选图形集合中剔除。6.如权利要求1所述的方法，其特征在于，基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的并被所述光标选定的待展示图形，具体包括：基于所述备选图形集合中的各备选图形，确定所述光标所在的像素点落入的备选图形；判断所述光标所在的像素点落入的备选图形是否唯一；若是，将所述光标所在的像素点落入的唯一的备选图形确定为待展示图形；若否，将所述光标所在的像素点落入的多个备选图形中在图表中最后生成的备选图形确定...

【专利技术属性】
技术研发人员：董晓庆，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛,KY