CN107025106B

CN107025106B - 一种图形绘制方法及装置

Info

Publication number: CN107025106B
Application number: CN201610945923.3A
Authority: CN
Inventors: 董晓庆
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2016-11-02
Filing date: 2016-11-02
Publication date: 2020-08-04
Anticipated expiration: 2036-11-02
Also published as: CN107025106A

Abstract

本申请提供了一种图形绘制方法及装置，该图形绘制方法包括：获取待绘制图形的数据集合值范围及对应的坐标点个数；根据所述数据集合值范围选取多个对人友好的数值，生成一数组；根据所述数据集合值范围及对应的坐标点个数计算所述坐标点的平均间隔对应的科学计数法的尾数；根据所述数组及所述尾数计算所述坐标点的待绘制坐标间隔；根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的坐标点，进行图形绘制。通过本申请，可以动态的生成绘制图形的坐标点，并且这些坐标点更易于理解及识别，保证准确的图形绘制。

Description

一种图形绘制方法及装置

技术领域

本申请涉及图形绘制技术领域，特别涉及一种图形绘制方法及装置。

背景技术

在HTML页面的画布上绘制图表时，x轴、y轴需要使用坐标轴标示图表的数据大小，但是由于用户传入的数据值是变化的，代表x轴的字段和代表y轴的字段范围也是变化的，无法直接设定固定的坐标点，所以需要动态的生成坐标点。

现有技术中，绘制坐标轴通常方法如下(假设图形的一个数据集合值的范围是[3,96]，坐标轴上绘制的坐标点个数为5)：

方法一：

最简单粗暴的方式是，平均分割坐标轴上的点，此时生成坐标轴坐标点的间距是(96-3)/(5-1)＝23.25，则坐标点是：[3,26.25,49.5,72.75,96]。如图1所示，这些坐标点对人非常不友好。

方法二：使用下面的步骤计算坐标点的间隔：

1、选取对人友好的一些数值，如[2,5,10]。

2、计算平均间隔(96-3)/(5-1)＝23.25，计算平均间隔对应科学计数法的尾数2.325。

对2，10，50分别取根号待值[sqrt(2),sqrt(10),sqrt(50)]中取一个比尾数略小的值sqrt(2)，对应友好值2，坐标点的间隔是为科学计数法中的底数10*2＝20，坐标点的最大值取20的倍数max＝100，最小值也取20的倍数0，具体地，可以通过如下代码实现：

上述代码的含义是，输入一个数值范围例如：start＝3，end＝96和坐标点的个数5，返回一个结果[min,max,step][0,100,20]。

分解上述结果，得到所有的坐标点为[0,20,40,60,80,100]，如图2所示。

发明人在实现本申请过程中，发现方法二存在如下问题：

该方法仅能取固定的友好值[2,5,10]，生成的友好值都是2,5,10的倍数；该方法生成了6个坐标点，不符合要求，极端情况下，还可能会生成9个坐标点，这在很多场景是没法接受的(例如移动端下，8个坐标点将会使得文本非常拥挤)。

发明内容

本申请提供一种图形绘制方法，包括：

获取待绘制图形的数据集合值范围及对应的坐标点个数；

根据所述数据集合值范围选取多个对人友好的数值，生成一数组；

根据所述数据集合值范围及对应的坐标点个数计算所述坐标点的平均间隔对应的科学计数法的尾数；

根据所述数组及所述尾数计算所述坐标点的待绘制坐标间隔；

根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的坐标点，进行图形绘制。

本申请提供一种图形绘制装置，包括：

信息获取单元，用于获取待绘制图形的数据集合值范围及对应的坐标点个数；

数组生成单元，用于根据所述数据集合值范围选取多个对人友好的数值，生成一数组；

尾数计算单元，用于根据所述数据集合值范围及对应的坐标点个数计算所述坐标点的平均间隔对应的科学计数法的尾数；

间隔生成单元，用于根据所述数组及所述尾数计算所述坐标点的待绘制坐标间隔；

图形绘制单元，用于根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的坐标点，以进行图形绘制。

本申请实施例中，可以动态的生成绘制图形的坐标点，并且这些坐标点更易于理解及识别，保证准确的图形绘制。

当然实施本申请的任一产品或者方法必不一定需要同时达到以上所述的所有优点。

附图说明

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

图1及图2为现有技术得到坐标点示意图；

图3为本申请实施例的图形绘制方法流程图；

图4为本申请实施例的图形绘制装置的结构框图；

图5为本申请实施例的间隔生成单元的结构框图；

图6为本申请实施例的图形绘制单元单元的结构框图。

具体实施方式

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

图3为本申请实施例的图形绘制方法流程图，该图形绘制方法的执行主体可以是PC或移动终端等设备，如图3所示，该图形绘制方法包括：

S301：获取待绘制图形的数据集合值范围及对应的坐标点个数。

本申请实施例中，进行图形(图表)绘制时，x轴、y轴需要分别使用坐标轴标示图表的数据大小，对于每个坐标轴，需要分别进行坐标点的生成，即，分别获取待绘制图形的各个坐标轴的数据集合值范围[a,b]及该数据集合值范围对应的坐标点个数n。本申请具体实施时，可以假设某坐标轴上的数据集合值范围为[a,b]＝[3,96]，该数据集合值范围内绘制图形用到的坐标点的个数为n＝5个。

S302：根据所述数据集合值范围选取多个对人友好的数值，生成一数组。

绘制图形用到的坐标轴上的坐标点的数值一般选用一些对人友好数值，可以使绘制图形用到的坐标点更易于理解及识别，例如2、3、4、2.5、5为人容易接受的数值，这些数值可以称为对人友好的数值。而对于一些人不容易接受的数值，如1.321、2.87、4.98，可以称为对人不友好的数值。为了使绘制图形用到的坐标点更易于理解及识别，本实施例中，可以根据所述数据集合值范围选取多个对人友好的数值，生成一数组。一实施例中，该数组可以为[1,2,2.5,4,5,7.5,10]，本申请不限于此。

S303：根据所述数据集合值范围及对应的坐标点个数计算所述坐标点的平均间隔对应的科学计数法的尾数。

基于坐标轴上的数据集合值范围及该数据集合值范围对应的坐标点个数，可以首先计算得到该坐标轴上各个坐标点之间的平均间隔，基于上述数据集合值范围[3,96]，以及坐标点的个数为5个，可以计算出对应的平均间隔(96-3)/(5-1)＝23.25，数值23.25采用科学计数法可以表示为2.325×10¹，2.325为数值23.25采用科学计数法表示的尾数。

S304：根据所述数组及所述尾数计算所述坐标点的待绘制坐标间隔。

得到平均间隔对应的尾数后，可以根据该尾数在上述数组中查找与该尾数相近的友好值，使得查找到的油耗值大于或等于该尾数。一实施例中，可以将该尾数2.35向上逼近，在数组中查找到距离所述尾数最接近的友好数值2.5，将该友好数值2.5乘以科学计数法的底数10，得到上述待绘制坐标间隔25，作为绘制图形时该坐标轴上各个坐标点的实际绘制间隔。

另一实施例中，也可以将该尾数2.35向下逼近，在数组中查找到距离所述尾数最接近的友好数值2，将该友好数值2乘以科学计数法的底数10，得到上述待绘制坐标间隔20，作为绘制图形时该坐标轴上各个坐标点的实际绘制间隔。由于20小于上述平均间隔23.25，可能会得到大于需要的坐标点个数5，在得到的坐标点个数大于5的情况下，例如得到8个坐标点，很多场景将无法接受，尤其是对于移动终端，8个坐标点将使得绘制的文本非常拥挤。

S305：根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的坐标点，进行图形绘制。

首先，本实施例中需要先得到数据集合值范围的中间值

根据上述实施例给出的数据集合值范围及坐标点个数，得到对应的数据集合值范围的中间值(96-3)/2＝46.5，根据上述分析可知，该中间值不友好，根据上述待绘制坐标间隔25可知，该中间值46.5最接近25的2倍的值50，该值50即为中间坐标点。根据中间坐标点50及待绘制坐标间隔25，可以得到剩余的坐标点0，25，75，100。

最终，得到待绘制图形的该坐标轴上的坐标点[0,25,50,75,100]。根据得到待绘制图形的所有坐标轴上的坐标点，就可以进行图形绘制。

本申请实施例中，坐标点的个数可以为奇数，也可以为偶数，对于个数为奇数的情况，如上述例子中的5个坐标点，对应的中间坐标点为一个，该中间坐标点为所述待绘制坐标间隔的倍数。

当坐标点个数为偶数时，对应的中间坐标点为两个，一实施例中，根据数据集合值范围的中间值及待绘制坐标间隔得到中间坐标点，可以根据待绘制坐标间隔，在数据集合值范围的中间值的两侧分别得到一个中间坐标点，两个中间坐标点均为所述待绘制坐标间隔的倍数。举例说明如下：

假设数据集合值范围[3,96]，以及坐标点的个数为6个，中间点坐标需要在46.5的两侧各取一个坐标点，并且均为待绘制坐标间隔25的倍数，可以得到两个中间点坐标：25，50。最终得到待绘制图形的该坐标轴上的坐标点[-25,0,25,50,75,100]。

基于与上述监控数据查询方法相同的申请构思，本申请提供一种服务器，如下面实施例所述。由于该服务器解决问题的原理与监控数据查询方法相似，因此该服务器的实施可以参见监控数据查询方法的实施，重复之处不再赘述。

图4为本申请实施例的图形绘制装置的结构框图，如图4所示，该图形绘制装置包括：信息获取单元401，数组生成单元402，尾数计算单元403，间隔生成单元404及图形绘制单元405。

信息获取单元201用于获取待绘制图形的数据集合值范围及对应的坐标点个数；

数组生成单元402用于根据所述数据集合值范围选取多个对人友好的数值，生成一数组；

尾数计算单元403用于根据所述数据集合值范围及对应的坐标点个数计算所述坐标点的平均间隔对应的科学计数法的尾数；

间隔生成单元404用于根据所述数组及所述尾数计算所述坐标点的待绘制坐标间隔；

图形绘制单元405用于根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的坐标点，以进行图形绘制。

一实施例中，如图5所示，间隔生成单元404包括：

友好数值查找模块501，用于将所述尾数向上逼近，在所述数组中查找到距离所述尾数最接近的友好数值；

间隔生成模块502，用于将所述友好数值乘以科学计数法的底数，得到所述待绘制坐标间隔。

一实施例中，如图6所示，图形绘制单元405包括：

中间坐标生成模块601，用于根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的中间坐标点；

图形绘制模块602，用于根据所述中间坐标点及所述待绘制坐标间隔得到剩余的坐标点，进行图形绘制。

本申请实施例中，坐标点的个数可以为奇数，也可以为偶数，一实施例中，当坐标点个数为奇数时，中间坐标点为一个，中间坐标点为待绘制坐标间隔的倍数。

一实施例中，当坐标点个数为偶数时，中间坐标点为两个，中间坐标生成模块401具体用于：根据所述待绘制坐标间隔，在所述数据集合值范围的中间值的两侧分别得到一个中间坐标点，两个所述中间坐标点均为所述待绘制坐标间隔的倍数。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本申请中应用了具体实施例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims

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

获取待绘制图形的数据集合值范围及对应的坐标点个数；

2.根据权利要求1所述的图形绘制方法，其特征在于，根据所述数组及所述尾数计算所述坐标点的待绘制坐标间隔，包括：

将所述尾数向上逼近，在所述数组中查找到距离所述尾数最接近的友好数值；

将所述友好数值乘以科学计数法的底数，得到所述待绘制坐标间隔。

3.根据权利要求1所述的图形绘制方法，其特征在于，根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的坐标点，进行图形绘制，包括：

根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的中间坐标点；

根据所述中间坐标点及所述待绘制坐标间隔得到剩余的坐标点。

4.根据权利要求3所述的图形绘制方法，其特征在于，所述坐标点个数为奇数时，所述中间坐标点为一个，所述中间坐标点为所述待绘制坐标间隔的倍数。

5.根据权利要求3所述的图形绘制方法，其特征在于，所述坐标点个数为偶数时，所述中间坐标点为两个，根据所述数据集合值范围的中间值及所述待绘制坐标间隔得到中间坐标点，包括：根据所述待绘制坐标间隔，在所述数据集合值范围的中间值的两侧分别得到一个中间坐标点，两个所述中间坐标点均为所述待绘制坐标间隔的倍数。

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

7.根据权利要求6所述的图形绘制装置，其特征在于，所述间隔生成单元包括：

友好数值查找模块，用于将所述尾数向上逼近，在所述数组中查找到距离所述尾数最接近的友好数值；

间隔生成模块，用于将所述友好数值乘以科学计数法的底数，得到所述待绘制坐标间隔。

8.根据权利要求6所述的图形绘制装置，其特征在于，所述图形绘制单元包括：

中间坐标生成模块，用于根据所述数据集合值范围的中间值及所述待绘制坐标间隔生成所述待绘制图形的中间坐标点；

图形绘制模块，用于根据所述中间坐标点及所述待绘制坐标间隔得到剩余的坐标点，进行图形绘制。

9.根据权利要求8所述的图形绘制装置，其特征在于，所述坐标点个数为奇数时，所述中间坐标点为一个，所述中间坐标点为所述待绘制坐标间隔的倍数。

10.根据权利要求8所述的图形绘制装置，其特征在于，所述坐标点个数为偶数时，所述中间坐标点为两个，所述中间坐标生成模块具体用于：根据所述待绘制坐标间隔，在所述数据集合值范围的中间值的两侧分别得到一个中间坐标点，两个所述中间坐标点均为所述待绘制坐标间隔的倍数。