CN109117238B

CN109117238B - 一种基于微信小程序的图例展示系统及方法

Info

Publication number: CN109117238B
Application number: CN201811101262.1A
Authority: CN
Inventors: 刘蛟
Original assignee: Sichuan Changhong Electric Co Ltd
Current assignee: Sichuan Changhong Electric Co Ltd
Priority date: 2018-09-20
Filing date: 2018-09-20
Publication date: 2021-04-27
Anticipated expiration: 2038-09-20
Also published as: CN109117238A

Abstract

本发明公开了一种基于微信小程序的图例展示系统，包括图例控制模块、图例展示模块，图例控制模块用于对传入数据进行整理、解析并确定展示图例的内容与位置，图例展示模块用于根据选定的图例展示类别进行图例的展示；图例控制模块包括数据获取单元、数据解析及判断单元、展示设置单元，图例展示模块包括图文示例展示单元、动态图例展示单元、表中图例展示单元；数据解析及判断单元分别与数据获取单元、展示设置单元相连，展示设置单元分别与图文示例展示单元、动态图例展示单元、表中图例展示单元相连。本发明的基于微信小程序的图例展示系统可以直接在微信上运行，具有速度快，效率高、便于用户使用的特点。

Description

一种基于微信小程序的图例展示系统及方法

技术领域

本发明涉及计算机技术与软件开发技术领域，特别涉及一种基于微信小程序的图例展示系统及方法。

背景技术

微信小程序是一种运行在微信上的应用，它与传统系统应用不同，不需要下载安装就可以运行，具有体量小、效率高等优势。本系统正是基于微信小程序开发的一套自动图表生成系统，可以在微信上运行，速度快，效率高。

使用图表展示数据目前很流行，也有很多其他平台的图表生成工具，但是为图表展示的图例方式与效果各有不同，本文提出一种基于微信小程序开发的图例展示系统，结合业务需求，定义了一套展示方式与效果，主要应用于微信客户端，可以通过设置图例信息为图表添加注解，方便用于数据展示与分析。

发明内容

本发明的目的是基于背景技术，提供一种基于微信小程序的图例展示系统及方法，该系统主要是使用微信小程序开发模式，可以直接在安装了微信软件的手机上实现快速在图表上生成图例注释。

为了达到上述的技术效果，本发明采取以下技术方案：

一种基于微信小程序的图例展示系统，包括图例控制模块、图例展示模块，图例控制模块用于对传入数据进行整理、解析并确定展示图例的内容与位置，图例展示模块用于根据选定的图例展示类别进行图例的展示；所述图例控制模块包括数据获取单元、数据解析及判断单元、展示设置单元，所述图例展示模块包括图文示例展示单元、动态图例展示单元、表中图例展示单元；所述数据解析及判断单元分别与数据获取单元、展示设置单元相连，展示设置单元分别与图文示例展示单元、动态图例展示单元、表中图例展示单元相连。

同时，本发明还公开了一种基于微信小程序的图例展示方法，包括上述的一种基于微信小程序的图例展示系统，且具体包括以下步骤：

A.数据获取单元获取输入的用于生成图例数据；

B.数据解析及判断单元解析收到的数据并检测验证到的数据信息是否合法及能否用于图例展示，若数据信息通过验证则进入步骤C，否则，结束本次图例展示；

C.展示设置单元判断设置的图例类型，并根据设置的图例类型将数据信息传递至图文示例展示单元、动态图例展示单元或表中图例展示单元；

D.图文示例展示单元、动态图例展示单元、表中图例展示单元在收到展示设置单元传递的数据信息后则在图表上进行对应的数据展示。

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

B1.数据解析及判断单元判断解析出的数据信息是否为指定的数据结构，若是，则进入步骤B2，否则，结束本次图例展示；

B2.数据解析及判断单元判断解析出的数据信息中是否至少包含图例类型信息、注释信息及图例位置信息，若是，则进入步骤B3，否则，结束本次图例展示；

B3.数据解析及判断单元将解析得到的数据信息传递至展示设置单元。

进一步地，所述步骤B1中指定的数据结构为JSON结构。

进一步地，所述图例类型信息为图文示例、动态图例、表中图例中的一种。

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

展示设置单元获取收到的数据信息中的图例类型信息，若所述图例类型信息为图文示例，则展示设置单元将数据信息传递至图文示例展示单元，若所述图例类型信息为动态图例，则展示设置单元将数据信息传递至动态图例展示单元，若所述图例类型信息为表中图例，则展示设置单元将数据信息传递至表中图例展示单元。

进一步地，所述注释信息至少是由数据名称、数据值及当前数值占比构成。

进一步地，所述步骤D中图文示例展示单元在进行数据展示时是通过view标签实现背景，且通过flex伸缩模式避免展示碰撞，同时，针对图表中不同的数据，分别是用一个view标签填充颜色加一个text标签显示数据名称的组成来显示，最后再均匀平铺到背景上。

进一步地，所述步骤D中动态图例展示单元展示数据时是通过在画布中添加cover-view标签实现，然后根据设置的图例位置信息和注释信息进行展示。

进一步地，所述步骤D中表中图例展示单元展示数据时是直接根据注释信息的内容来进行显示。

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

本发明的基于微信小程序的图例展示系统及方法，是基于微信小程序开发的一套自动图表生成系统及方法，可以直接在微信上运行，具有速度快，效率高、便于用户使用的特点。且在本发明的基于微信小程序的图例展示系统及方法中，用户可以根据实际需求，选择数据的展示类型，可满足用户的多种使用需求，实现在手机上直接进行数据图表的展示。

附图说明

图1是本发明的基于微信小程序的图例展示系统的示意图。

图2是本发明的基于微信小程序的图例展示方法的流程示意图。

具体实施方式

下面结合本发明的实施例对本发明作进一步的阐述和说明。

实施例：

实施例一：

如图1所示，一种基于微信小程序的图例展示系统，包括图例控制模块、图例展示模块，图例控制模块用于对传入数据进行整理、解析并确定展示图例的内容与位置，图例展示模块用于根据选定的图例展示类别进行图例的展示。

其中，所述图例控制模块包括数据获取单元、数据解析及判断单元、展示设置单元，所述图例展示模块包括图文示例展示单元、动态图例展示单元、表中图例展示单元。

具体的，所述数据解析及判断单元分别与数据获取单元、展示设置单元相连，展示设置单元分别与图文示例展示单元、动态图例展示单元、表中图例展示单元相连。

使用时，数据获取单元获取用户在手机上输入的用于生成图例数据；然后由数据解析及判断单元解析收到的数据并检测验证到的数据信息是否合法及能否用于图例展示，若数据信息通过验证则将数据信息传递至展示设置单元。

数据解析及判断单元在验证数据信息时具体是验证数据信息的数据结构以及包含的内容信息是否符合规定，本实施例中规定解析的用户输入的数据信息必须是JSON的结构，对于其他结构的信息都是非法的。

同时，本实施例中还定义了一条数据结构中必须包含style(图例类型)、info(注释信息)、position(图例位置)三种信息，其中，style控制图例类型，info定义了正则替换规则，position主要用于动态图例显示，用于控制动态图例显示的位置。

具体的，本实施例中注释信息info的数据规则被定义为{a}:{b}-{c}，其中，“{a}”代表图表中数据名称，“{b}”代表图表中该数据的值，“{c}”代表图表中当前数值占比，例如：图表有两条数据{篮球：20，足球：20}，如果用户点击了图表中篮球区域会显示为“篮球:20-50％”。

最后由图文示例展示单元、动态图例展示单元、表中图例展示单元在收到展示设置单元传递的数据信息后则在图表上进行对应的数据展示。

其中，图文示例是显示在图表下方，且通过颜色和名字区分不同数据。图文示例展示单元在进行数据展示时是通过view标签实现背景，且通过flex伸缩模式避免展示碰撞，同时，针对图表中不同的数据，分别是用一个view标签填充颜色加一个text标签显示数据名称的组成来显示，最后再均匀平铺到背景上。

动态图例现在图表区域中，会根据触摸的位置不同而显示在不同位置，显示内容可以通过外部设置。动态图例展示单元展示数据时是通过在画布中添加cover-view标签实现，然后根据设置的图例位置信息和注释信息进行展示。

表中图例显示在图表中，可以根据外部设置的info规则显示内容。表中图例展示单元展示数据时是直接通过context绘制在canvas上的，会根据注释信息的内容来进行显示。

实施例二：

如图2所示，一种基于微信小程序的图例展示方法，且具体包括以下步骤：

A.数据获取单元获取输入的用于生成图例数据；

B1.数据解析及判断单元判断解析出的数据信息是否为指定的JSON数据结构，若是，则进入步骤B2，否则，结束本次图例展示；

B2.数据解析及判断单元判断解析出的数据信息中是否至少包含图例类型信息、注释信息及图例位置信息，若是，则进入步骤B3，否则，结束本次图例展示；其中，图例类型信息为图文示例、动态图例、表中图例中的一种，所述注释信息至少是由数据名称、数据值及当前数值占比构成。

C.展示设置单元获取收到的数据信息中的图例类型信息，若所述图例类型信息为图文示例，则展示设置单元将数据信息传递至图文示例展示单元，若所述图例类型信息为动态图例，则展示设置单元将数据信息传递至动态图例展示单元，若所述图例类型信息为表中图例，则展示设置单元将数据信息传递至表中图例展示单元；

具体的，图文示例是显示在图表下方，且通过颜色和名字区分不同数据。图文示例展示单元在进行数据展示时是通过view标签实现背景，且通过flex伸缩模式避免展示碰撞，同时，针对图表中不同的数据，分别是用一个view标签填充颜色加一个text标签显示数据名称的组成来显示，最后再均匀平铺到背景上。

可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言，在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型和改进也视为本发明的保护范围。

Claims

1.一种基于微信小程序的图例展示方法，其特征在于，包括一种基于微信小程序的图例展示系统，所述系统是使用微信小程序开发模式，直接在安装了微信软件的手机上实现在图表上生成图例注释，所述基于微信小程序的图例展示系统包括图例控制模块、图例展示模块，图例控制模块用于对传入数据进行整理、解析并确定展示图例的内容与位置，图例展示模块用于根据选定的图例展示类别进行图例的展示；

所述图例控制模块包括数据获取单元、数据解析及判断单元、展示设置单元，所述图例展示模块包括图文示例展示单元、动态图例展示单元、表中图例展示单元；

所述数据解析及判断单元分别与数据获取单元、展示设置单元相连，展示设置单元分别与图文示例展示单元、动态图例展示单元、表中图例展示单元相连；

且具体包括以下步骤：

A.数据获取单元获取输入的用于生成图例数据；

B.数据解析及判断单元解析收到的数据并检测验证到的数据信息是否合法及能否用于图例展示，若数据信息通过验证则进入步骤C，否则，结束本次图例展示；所述步骤B具体为：

B1. 数据解析及判断单元判断解析出的数据信息是否为指定的数据结构，若是，则进入步骤B2，否则，结束本次图例展示；

B2. 数据解析及判断单元判断解析出的数据信息中是否至少包含图例类型信息、注释信息及图例位置信息，若是，则进入步骤B3，否则，结束本次图例展示；

B3. 数据解析及判断单元将解析得到的数据信息传递至展示设置单元；

展示设置单元判断设置的图例类型，并根据设置的图例类型将数据信息传递至图文示例展示单元、动态图例展示单元或表中图例展示单元；所述步骤C具体为：

D.图文示例展示单元、动态图例展示单元、表中图例展示单元在收到展示设置单元传递的数据信息后则在图表上进行对应的数据展示；图文示例展示单元在进行数据展示时是通过view标签实现背景，且通过flex伸缩模式避免展示碰撞，同时，针对图表中不同的数据，分别是用一个view标签填充颜色加一个text标签显示数据名称的组成来显示，最后再均匀平铺到背景上；动态图例展示单元展示数据时是通过在画布中添加cover-view标签实现，然后根据设置的图例位置信息和注释信息进行展示。

2.根据权利要求1所述的一种基于微信小程序的图例展示方法，其特征在于，所述步骤B1中指定的数据结构为JSON结构。

3.根据权利要求1所述的一种基于微信小程序的图例展示方法，其特征在于，所述图例类型信息为图文示例、动态图例、表中图例中的一种。

4.根据权利要求1所述的一种基于微信小程序的图例展示方法，其特征在于，所述注释信息至少是由数据名称、数据值及当前数值占比构成。

5.根据权利要求1所述的一种基于微信小程序的图例展示方法，其特征在于，所述步骤D中表中图例展示单元展示数据时是直接根据注释信息的内容来进行显示。