基于微信小程序的柱状图图表插件系统及其实现方法与流程

本发明涉及计算机技术与软件开发技术领域，特别涉及基于微信小程序的柱状图图表插件系统及其实现方法。

背景技术：

微信小程序具有广大的使用数据背景，使用简单，无需下载可以体现出“用完即走”的理念，具有体量小、效率高等优势。是一种轻量级并且用户体验感极强的应用开发平台。在此基础上开发的微信小程序柱状图图表使用简单方便，数据统计和展示更加多元化。

柱状图表在各个领域都被广泛使用，本身具有的数据的统计和展示的直观感使其在数据统计图标中别具一格。常用的柱状图就是单组柱状图。但当数据种类多时，普通的柱状图满足不了用户对数据的直观获取和数据分析。在此时平铺柱状图和堆叠柱状图对数据的统计具有极大的优势，特别是堆叠柱状图，更加能直观地在一个柱状图中看到该组数据的总和和小组数据在其中所占的比例，对数据的统计更加直观。当数据少时，选择平铺柱状图能够清晰反映出数据的对比情况。

目前，该图表主要用于微信小程序应用，可选根据数据的多少选择不同的展示方式，直观地进行数据的收集与分析。

技术实现要素：

本发明的目的是克服上述背景技术中不足，提供基于微信小程序的柱状图图表插件系统及其实现方法，可以让用户轻松使用并且对数据进行更加直观的数据收集与分析，同时用户根据数据的多少选择平铺柱状图或者堆叠柱状图进行数据的统计方式。

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

基于微信小程序的柱状图图表插件系统，包括数据解析模块及柱状图生成模块；数据解析模块与柱状图生成模块相连；

所述数据解析模块用于对用户输入数据进行解析并将解析后的数据传递至柱状图生成模块；所述柱状图生成模块包括平铺柱状图生成模块、堆叠柱状图生成模块，柱状图生成模块用于根据解析后的数据调取平铺柱状图生成模块或堆叠柱状图生成模块进行平铺柱状图或堆叠柱状图的生成。

所述数据解析模块获取用户输入的数据并对获取的数据进行解析，其中，数据解析模块在解析数据时会同时根据预设的数据格式对解析出的数据进行合法性校验，若解析的数据格式与预设的数据格式则判定本次用户输入的数据为合法数据，并将合法数据传递至柱状图生成模块，由柱状图生成模块具体进行平铺柱状图和堆叠柱状图的生成。

进一步地，所述用户输入的数据至少包含以下数据字段：数据名称、数据具体数值、数据颜色、x轴坐标名称。

进一步地，所述数据解析模块中对每个数据字段都预设有标准数据格式，数据解析模块对用户输入的数据进行解析时会同时判断解析的数据字段的格式是否与该数据字段对应的标准数据格式一致，且仅在所有数据字段的数据格式均符合对应的标准数据格式时才将解析的数据传递至柱状图生成模块。

同时，本发明还公开了一种基于微信小程序的柱状图图表插件系统的实现方法，包括以下步骤：

a.数据解析模块获取用户输入的数据并进行解析；

b.数据解析模块将解析出的数据传递至柱状图生成模块；

c.柱状图生成模块调取平铺柱状图生成模块、堆叠柱状图生成模块根据解析后的数据进行平铺柱状图、堆叠柱状图的生成。

进一步地，所述步骤a中用户输入的数据至少包含以下数据字段：数据名称、数据具体数值、数据颜色、x轴坐标名称。

进一步地，在所述数据解析模块中对每个数据字段都预设有标准数据格式，所述步骤b具体包括以下步骤：

b1.数据解析模块对用户输入的数据进行解析并获取各数据字段的数据格式；

b2.数据解析模块判断解析的各数据字段的格式是否与各数据字段对应的标准数据格式一致，若所有数据字段的数据格式均符合对应的标准数据格式则进入步骤b3，否则，结束本次绘图；

b3.数据解析模块将解析出的各数据字段传递至柱状图生成模块。

进一步地，所述步骤c具体包括平铺柱状图生成流程及堆叠柱状图的生成流程：

c1.平铺柱状图生成流程：

c1.1所述平铺柱状图生成模块接收以下数据字段：数据名称、数据具体数值、数据颜色、x轴坐标名称；

c1.2平铺柱状图生成模块在canvas画布中确定坐标原点及确定坐标轴的偏移量，所述偏移量为第一个x坐标距离原点坐标的在x轴上的偏移量；

c1.3平铺柱状图生成模块根据以下数据字段：x轴坐标名称、数据具体数值进行每个数据的x坐标轴和y坐标的确定，具有相同x轴坐标名称的数据绘制于同一个x坐标轴上；

c1.4平铺柱状图生成模块利用平铺图的算法进行计算：

c1.4.1平铺柱状图生成模块在canvas画布中设置一个值固定平铺柱状图的总宽度w；

c1.4.2根据数据字段数据具体数值的项数n进行切分总宽度，每个柱状图的宽度l＝w/n，从而确定每个数据的x坐标；

c1.4.3根据数据颜色确定每个柱状图的颜色；

c2堆叠柱状图的生成流程：

c2.1所述堆叠柱状图生成模块接收以下数据字段：数据名称、数据具体数值、数据颜色、x轴坐标名称；

c2.2堆叠柱状图生成模块在canvas画布中确定坐标原点及确定坐标轴的偏移量；所述偏移量为第一个x坐标距离原点坐标的在x轴上的偏移量；

c2.3堆叠柱状图生成模块根据数据字段：数据名称生成x坐标轴，且具有相同数据名称的数据共用同一个x坐标轴；

c2.4堆叠柱状图生成模块获取具有相同数据名称的数据的数据具体数值，并对获取到的数据值进行叠加，同时，通过遍历找到叠加后的最大值进行y坐标轴的生成；

c2.5绘制柱状图时，当前数据的y坐标需要用当前数据的数据具体数值加上前一个与当前数据具有相同数据名称的数据的y坐标作为当前数据的实际y坐标值，其中，第一个绘制柱状图的数据的y坐标值为其数据具体数值；

c2.6堆叠柱状图生成模块根据数据字段：数据颜色、x轴坐标名称确定各堆叠柱状图的颜色及x坐标的坐标名称。

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

通过本发明的基于微信小程序的柱状图图表插件系统及其实现方法，可以让用户轻松使用并且对数据进行更加直观的数据收集与分析，同时用户根据数据的多少选择平铺柱状图或者堆叠柱状图进行数据的统计方式，可使得数据的显示更加清楚及直观，有助于对数据可视化分析。

附图说明

图1是本发明的基于微信小程序的柱状图图表插件系统的示意图。

图2是本发明的基于微信小程序的柱状图图表插件系统的实现方法的流程示意图。

具体实施方式

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

实施例：

实施例一：

如图1所示，一种基于微信小程序的柱状图图表插件系统，包括数据解析模块及柱状图生成模块；数据解析模块与柱状图生成模块相连。

具体的，所述数据解析模块用于对用户输入数据进行解析并将解析后的数据传递至柱状图生成模块；所述柱状图生成模块包括平铺柱状图生成模块、堆叠柱状图生成模块，柱状图生成模块用于根据解析后的数据调取平铺柱状图生成模块或堆叠柱状图生成模块进行平铺柱状图或堆叠柱状图的生成。

当数据解析模块获取用户输入的数据时，用户输入的数据至少包含以下数据字段：数据名称、数据具体数值、数据颜色、x轴坐标名称。

同时，所述数据解析模块中对每个数据字段都预设有标准数据格式，数据解析模块对用户输入的数据进行解析时会同时判断解析的数据字段的格式是否与该数据字段对应的标准数据格式一致，且仅在所有数据字段的数据格式均符合对应的标准数据格式时才将解析的数据传递至柱状图生成模块。

如对于数据颜色的数据字段中，其数据格式一般设定为用于表达颜色的词语，如可选红色、黄色等等，但是若用户输入的数据颜色为一数字或与颜色不相干的字词，则该数据将被判定为不合法数据且不被传入柱状图生成模块。

即数据解析模块获取用户输入的数据并对获取的数据进行解析，其中，数据解析模块在解析数据时会同时根据预设的数据格式对解析出的数据进行合法性校验，若解析的数据格式与预设的数据格式则判定本次用户输入的数据为合法数据，并将合法数据传递至柱状图生成模块，由柱状图生成模块具体进行平铺柱状图和堆叠柱状图的生成。

使用时，将首先在数据解析模块对用户输入数据进行解析。具体的，用户可输入多个数组进行图标的生成，数据输入字段包括：name:[数据名称]，data：[数据具体数值]，color：[数据颜色]，xlabel：[x轴坐标名称]。

当用户输入这些数据后数据解析模块即对数据进行解析，若为合法数据结构则分别获取name[数据名称]数组和data[数据具体数值]数组进行x坐标和y坐标的绘制。进行x坐标的绘制时先获取数组的数据长度进行坐标刻度与间隔的计算，其中可通过添加偏移量offset进行第一个坐标距离原点坐标一定数值使得数据展示更加好看。y坐标则是在data[数据具体数值]数组解析成功后进行最大值的计算并根据该最大值进行y坐标的绘制。

当数据解析模块完成解析后则将数据传到柱状图生成模块中，柱状图生成模块调用绘图函数进行平铺柱状图和堆叠柱状图的生成，同时在微信小程序界面用户可随意切换两种图表的效果展示。

具体的，平铺柱状图的生成时：平铺柱状图是多组数据在一个x轴坐标量下进行数据展示。在数据解析成功后，柱状图生成模块接收name、data、color以及xlable字段并调用画图函数进行平铺图的绘制。

平铺柱状图的绘图函数先确定canvas的坐标原点，确定坐标轴的偏移量，这里优选在确定原点以后设置了距离原点的一个偏移量offset。根据数组name与data进行每个数据的x坐标和y坐标的计算，绘制完坐标轴的数据以后利用平铺图的算法进行计算。

在平铺图的算法中核心部分就是柱状图的平铺实现，首先设置一个值固定某一坐标点x轴柱状图的总宽度w，然后计算出data的总项数n进行切分总宽度，每个柱状图的宽度l＝w/n。柱状图的宽度计算完成后进行高度的计算，本实施例中，在高度计算中y轴的原点坐标在canvas中是在左上角，所以在计算高度的y坐标点时需要减去自己的高度来确定实际的y轴坐标，再根据最大值减去此时的原点偏移量计算出高度，再根据设置的不同颜色生成平铺柱状图。

当用户输入的数组越多，每个数组代表的数据柱子不断增加，每个柱子有其独特的颜色，用户触摸某个数据点能看到该数组的数据名称以及对应的数据。

具体的，堆叠柱状图的生成时：堆叠图是同一x的刻度下不同数组的数据叠加。在数据解析成功后，柱状图生成模块接收name、data、color以及xlable字段并调用画图函数进行堆叠柱状图的绘制。

堆叠柱状图的绘图函数先确定canvas的坐标原点，确定坐标轴的偏移量，进行每个数据的x坐标和y坐标的计算，堆叠中多个数组中相同x轴的数据横坐标一致，y坐标进行数据叠加，在y轴数据进行计算时是获取输入data数组中同一个下标(即具有相同数据名称)的数据进行叠加，并且通过遍历找到叠加后的最大值进行y轴数据的绘制。

堆叠图中同一个下标的数据x坐标相同所以只需要确定一个横坐标即可，堆叠图是data数组中相同下标不同数据进行叠加，当绘制同一下标下多个柱状图时柱状图y轴坐标需要加上前一个图的y坐标，从而实现堆叠的效果。堆叠完成后生成堆叠柱状图。

生成堆叠柱状图对于数据的收集、展示、分析非常具有优势。当输入的数组繁多，普通的柱状图对于数据的展示效果特别模糊存在过多地占用x轴空间和数据柱不明显缺点。而堆叠柱状图通过不断地叠加不同数组的数值，不会过多地占用x轴的位置，数据柱呈现效果清晰明确，触摸数据点时能够展示数组数据详情。

实施例二

如图2所示，一种基于微信小程序的柱状图图表插件系统的实现方法，包括以下步骤：

a.数据解析模块获取用户输入的数据并进行解析；

具体的，用户输入的数据至少包含以下数据字段：name:[数据名称]，data：[数据具体数值]，color：[数据颜色]，xlabel：[x轴坐标名称]。

b.数据解析模块将解析出的数据传递至柱状图生成模块；

具体包括以下步骤：

b1.数据解析模块对用户输入的数据进行解析并获取各数据字段的数据格式；

b2.数据解析模块判断解析的各数据字段的格式是否与各数据字段对应的标准数据格式一致，若所有数据字段的数据格式均符合对应的标准数据格式则进入步骤b3，否则，结束本次绘图；

b3.数据解析模块将解析出的各数据字段传递至柱状图生成模块。

c.柱状图生成模块调取平铺柱状图生成模块、堆叠柱状图生成模块根据解析后的数据进行平铺柱状图、堆叠柱状图的生成。

具体的，步骤c具体包括平铺柱状图生成流程及堆叠柱状图的生成流程：

c1.平铺柱状图生成流程：

c1.1所述平铺柱状图生成模块接收以下数据字段：数据名称、数据具体数值、数据颜色、x轴坐标名称；

c1.2平铺柱状图生成模块在canvas画布中确定坐标原点及确定坐标轴的偏移量，本实施例中，所述偏移量为第一个x坐标距离原点坐标的在x轴上的偏移量，通过添加偏移量进行第一个坐标距离原点坐标一定数值可使得数据展示更加好看；

c1.3平铺柱状图生成模块根据以下数据字段：x轴坐标名称、数据具体数值进行每个数据的x坐标轴和y坐标的确定，具有相同x轴坐标名称的数据绘制于同一个x坐标轴上；

c1.4平铺柱状图生成模块利用平铺图的算法进行计算：

c1.4.1平铺柱状图生成模块在canvas画布中设置一个值固定平铺柱状图的总宽度w；

c1.4.2根据数据名称的项数n进行切分总宽度，每个柱状图的宽度l＝w/n，从而确定每个数据的x坐标；

c1.4.3根据数据颜色确定每个柱状图的颜色；当用户输入的数组越多，每个数组代表的数据柱子不断增加，且每个柱子有其独特的颜色，触摸某个数据点能看到该数组的数据名称以及对应的数据

c2堆叠柱状图的生成流程：

c2.1所述堆叠柱状图生成模块接收以下数据字段：数据名称、数据具体数值、数据颜色、x轴坐标名称；

c2.2堆叠柱状图生成模块在canvas画布中确定坐标原点及确定坐标轴的偏移量；所述偏移量为第一个x坐标距离原点坐标的在x轴上的偏移量；

c2.3堆叠柱状图生成模块根据数据字段：数据名称生成x坐标轴，且具有相同数据名称的数据共用同一个x坐标轴；

c2.4堆叠柱状图生成模块获取具有相同数据名称的数据的数据具体数值，并对获取到的数据值进行叠加，同时，通过遍历找到叠加后的最大值进行y坐标轴的生成；

c2.5绘制柱状图时，当前数据的y坐标需要用当前数据的数据具体数值加上前一个与当前数据具有相同数据名称的数据的y坐标作为当前数据的实际y坐标值，其中，第一个绘制柱状图的数据的y坐标值为其数据具体数值；

c2.6堆叠柱状图生成模块根据数据字段：数据颜色、x轴坐标名称确定各堆叠柱状图的颜色及x坐标的坐标名称。

生成堆叠柱状图对于数据的收集、展示、分析非常具有优势。当输入的数组繁多，普通的柱状图对于数据的展示效果特别模糊存在过多地占用x轴空间和数据柱不明显缺点。而堆叠柱状图通过不断地叠加不同数组的数值，不会过多地占用x轴的位置，数据柱呈现效果清晰明确，触摸数据点时能够展示数组数据详情。

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