CN109800341A - 一种基于微信小程序的图表数据抽稀方法 - Google Patents

Abstract

本发明公开了一种基于微信小程序的图表数据抽稀方法，包括：步骤S100：对输入数据中的图表数据进行识别和解析；步骤S200：对解析后的数据进行抽稀处理，并绘制抽稀后的展示图。本发明提供基于微信小程序开发的图表数据抽稀方法，运用于多形式的图表数据显示，当图表在坐标轴上生成的数据量比较大，导致数据点重叠等现象不容易直观细致地得到精确的数据时，该方法能够在指定的图表坐标位置处展示该坐标轴下一组或多组数据的精确数据，有利于在数据分析时得到更加精确和清晰的数据，使图表的展示具有更加简明的效果。

Description

一种基于微信小程序的图表数据抽稀方法

技术领域

本发明涉及计算机与软件开发技术领域，具体的说，是一种基于微信小程序的图表数据抽稀方法。

背景技术

微信小程序具有广大的使用数据背景，使用简单，无需下载可以体现出“用完即走”的理念，具有体量小、效率高等优势，是一种轻量级并且用户体验感极强的应用开发平台。该抽稀方法是基于微信小程序图表的一种数据抽稀呈现方法，为微信小程序的图表的数据展示具有更加清晰立体的效果。微信小程序的图表数据抽稀方法具有非常广泛的实用性和适用性。在图表中，数据量的庞大性可以说是随处可见，展示数据时存在数据点的重叠、数据点分布密集和数据点对应的数据轴坐标不能清晰的反映出精确的数据等问题。在这些问题下，需要一种图表数据抽稀方法，能够使得图表在展现的时候更加具有数据性，展示数据更加精确。

发明内容

本发明的目的在于提供一种基于微信小程序的图表数据抽稀方法，能够让数据点繁多的情况下对的数据进行清晰和精确地展示，使得图表的展示更加简明，数据更加清晰，让用户可以对数据进行更加快捷方便的处理和分析。

本发明通过下述技术方案解决上述问题：

一种基于微信小程序的图表数据抽稀方法，包括：

步骤S100：对输入数据中的图表数据进行识别和解析；

步骤S200：对解析后的数据进行抽稀处理，并绘制抽稀后的展示图。

主要包括两个模块，输入解析模块和抽稀算法实现模块，其中输入解析模块是对输入的需要处理的数据进行处理和解析；抽稀算法实现模块，具体包括以下流程：

步骤一、确定抽稀算法函数名，输入所需要处理的数据，确定要处理的数据类型。

步骤二、写该算法具体的实现方法。其中包含以下子步骤：

1)、确定所需要抽稀的数据有几组，进行每组数据的计算，确定每组的坐标点便于展示抽稀图像；

2)、对每组中的数据进行抽稀处理；

3)、确定抽稀的范围，也就是确定横纵坐标的最大和最小位置；

步骤三、利用抽稀算法绘制数据抽稀后的展示图，其中包含以下子步骤：

1)、经过抽稀算法确定抽稀范围后确定图像的最大最小位置和移动的距离；

2)、绘制数据展示图样式。

进一步地，所述步骤S100具体为：

步骤S110：获取图表数据中的posX、posY、canvasWidth和canvasHeight，其中，posX和posY分别是点击图表中生成的图的横坐标和纵坐标的坐标位置，用于确定抽稀的范围；canvasWidth和canvasHeight分别是画布上坐标轴的横坐标和纵坐标的长度；

步骤S120：分别对所述图表数据中的posX、posY、canvasWidth和canvasHeight进行解析，并检查数据的合理性。

进一步地，所述步骤S200具体为：

步骤S210：确定抽稀的范围，具体为：点击生成坐标轴，获取焦点位置的横坐标posX和纵坐标posY，并在生成的每组数据图形中，计算每组数据图形展示的范围和数据图形中数据的高度范围；

步骤S220：对在范围内的数据抽稀，具体包括：

步骤S221：判断焦点位置是否在数据图形的范围内：

先求出焦点位置的横坐标posX和图表展示的横坐标tranX：

tranX＝posX-barDesc.paddingLeft-barDesc.xDesc.startPosOffset；

其中，barDesc.paddingLeft和barDesc.xDesc.startPosOffset为偏移量；

将tranX的值与图表图形的宽度范围进行比较，分别比较该焦点是否在这个总宽度内部barDesc.paddingLeft+barDesc.xDesc.startPosOffset和图形绘图结束的位置width-barDesc.paddingRight；

步骤S222：获取在图形范围内的图形数据：用焦点位置的横坐标与图形的间隔距离barDesc.xDesc.span进行计算下标dataIndex：

dataIndex＝Math.round(tranX/barDesc.xDesc.span)

其中，Math.round为取整函数；

步骤S223：找到该下标下图形的数组，将数据内容存储到要输出的数据tolTipInfo中；

步骤S224：设置toolTipInfo的展示样式，封装函数后，将存放在toolTipInfo中的数据进行输出。

本发明与现有技术相比，具有以下优点及有益效果：

本发明提供基于微信小程序开发的图表数据抽稀方法，运用于多形式的图表数据显示，当图表在坐标轴上生成但是数据量比较大，导致数据点重叠等现象不容易直观细致地得到精确的数据时，该方法能够在指定的图表坐标位置处展示该坐标轴下一组或多组数据的精确数据，有利于在数据分析时得到更加精确和清晰的数据，使图表的展示具有更加简明的效果。

附图说明

图1为本发明流程图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例1：

一种基于微信小程序的图表抽稀方法，包括两个核心模块，数据解析模块和抽稀算法实现模块，其中：

数据解析模块：该模块中主要进行对图表数据输入数据进行解析。为了方便数据的解析，会进行函数的封装，以便于直观的了解使用时需要传入哪些数据。在此模块中，需要被处理的数据有：this,posX,posY,canvasWidth,canvasHeight。this是函数中的指针，能够调用微信小程序选中的全局变量，主要是获取图表中的数据数组和判断图表生成后showToolTip的值是否为true。posX和posY是点击图表中生成的图的坐标位置中的横坐标、纵坐标，用于确定抽稀的范围。canvasWidth和canvasHeight分别是画布上坐标轴的横坐标的长度和画布上坐标轴的纵坐标的长度。对这四种数据进行解析，检查数据是否合理，然后为后面的算法对数据的处理做准备。

抽稀算法方法实现模块，具体包括：

a1、首先要确定的是抽稀的范围：根据点击生成的图的坐标轴，获取该焦点位置坐标posX和posY，再根据判断是否在一组生成的数据图形下，并计算数据图形下数据点的位置是否在该组数据图形展示的范围barDesc.paddingTop和图表中该组数据的高度范围height-barDesc.paddingBottom内，如果在这个范围内部，则进行该范围内部的数据抽稀。

例如计算焦点位置是否在该组数据的范围内的方法：先求出该焦点位置的横坐标，因为图表展示的横坐标可以自己调解位置，所以需要减去横坐标的两个偏移量barDesc.paddingLeft、barDesc.xDesc.startPosOffset，得到图表展示的横坐标tranX：

tranX＝posX-barDesc.paddingLeft-barDesc.xDesc.startPosOffset。再根据tranX的值与图表图形的宽度范围进行比较，分别比较该焦点是否在这个总宽度内部barDesc.paddingLeft+barDesc.xDesc.startPosOffset和图形绘图结束的位置width-barDesc.paddingRight。在确定以上的坐标点在这个图形范围内之后进行该组数据的获取。

a2、根据以上步骤后，进行对该范围内的图形数据的获取：首先需要找到该组图形的下标dataIndex，用焦点位置的横坐标与图形间的间隔距离barDesc.xDesc.span进行计算下标dataIndex：

dataIndex＝Math.round(tranX/barDesc.xDesc.span)

得到下标dataIndex后，找到该下标下图形的数组，将内容存储到将要输出的数据toolTipInfo中即可。

a3、数据展示：把获取的数据放在toolTipInfo后对数据进行输出，设置toolTipInfo的展示样式，封装好整个函数即可。

其中，具体流程图如图1所示，首先流程开始，输入焦点数据的横坐标posX、纵坐标posY，还有画布中横坐标的宽canvasWidth、纵坐标的高canvasHeight，然后进行数据解析，若数据合理，则进行数据抽稀，若数据不合理，则返回，继续查找输入数据；

数据抽稀的具体过程为：

步骤一、确定抽稀算法函数名，输入所需要处理的数据，确定要处理的数据类型；

步骤二、写该算法具体的实现方法，其中包含以下子步骤：

1)、确定所需要抽稀的数据有几组，进行每组数据的计算，确定每组的坐标点便于展示抽稀图像；

2)、对每组中的数据进行抽稀处理；

3)、确定抽稀后的数据的范围，也就是确定横纵坐标的最大和最小位置。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

Claims (3)

1.一种基于微信小程序的图表数据抽稀方法，其特征在于，包括：

步骤S100：对输入数据中的图表数据进行识别和解析；

步骤S200：对解析后的数据进行抽稀处理，并绘制抽稀后的展示图。

2.根据权利要求1所述的一种基于微信小程序的图表数据抽稀方法，其特征在于，所述步骤S100具体为：

步骤S110：获取图表数据中的posX、posY、canvasWidth和canvasHeight，其中，posX和posY分别是点击图表中生成的图的横坐标和纵坐标的坐标位置，用于确定抽稀的范围；canvasWidth和canvasHeight分别是画布上坐标轴的横坐标和纵坐标的长度；

步骤S120：分别对所述图表数据中的posX、posY、canvasWidth和canvasHeight进行解析，并检查数据的合理性。

3.根据权利要求2所述的一种基于微信小程序的图表数据抽稀方法，其特征在于，所述步骤S200具体为：

步骤S210：确定抽稀的范围，具体为：点击生成坐标轴，获取焦点位置的横坐标posX和纵坐标posY，并在生成的每组数据图形中，计算每组数据图形展示的范围和数据图形中数据的高度范围；

步骤S220：对在范围内的数据抽稀，具体包括：

步骤S221：判断焦点位置是否在数据图形的范围内：

先求出焦点位置的横坐标posX和图表展示的横坐标tranX：

tranX＝posX-barDesc.paddingLeft-barDesc.xDesc.startPosOffset；

其中，barDesc.paddingLeft和barDesc.xDesc.startPosOffset为偏移量；

将tranX的值与图表图形的宽度范围进行比较，分别比较该焦点是否在这个总宽度内部barDesc.paddingLeft+barDesc.xDesc.startPosOffset和图形绘图结束的位置width-barDesc.paddingRight；

步骤S222：获取在图形范围内的图形数据：用焦点位置的横坐标与图形的间隔距离barDesc.xDesc.span进行计算下标dataIndex：

dataIndex＝Math.round(tranX/barDesc.xDesc.span)

其中，Math.round为取整函数；

步骤S223：找到该下标下图形的数组，将数据内容存储到要输出的数据tolTipInfo中；

步骤S224：设置toolTipInfo的展示样式，封装函数后，将存放在toolTipInfo中的数据进行输出。