CN111381822B - 一种矩形树图组件的实现方法 - Google Patents

Abstract

本发明公开了一种矩形树图组件的实现方法，包括：搭建矩形树图的结构，包括：向矩形绘制函数中传入方向参数，通过判断方向参数的布尔值，来决定矩形的纵横；依据用户传入数据data的长度，矩形绘制函数循环调用自身，每循环绘制一次，方向参数取反，更换矩形绘制方向，直到完成矩形树图的结构搭建；将矩形树图的各个层级独立划分，实现各个层级模块的循环绘制；将矩形树图进行组件化，供用户引入并使用矩形树图组件。本发明采用设置方向参数并结合递归算法，解决绘制矩形树图时矩形起始坐标和排布方向难以确定，绘制方法和过程都较为复杂的问题；用户能够通过简单方式引入并使用矩形树图组件，有助于数据的可视化分析。

Description

一种矩形树图组件的实现方法

技术领域

本发明涉及计算机技术领域，具体的说，是一种矩形树图组件的实现方法。

背景技术

在计算机软件开发技术日趋完善的今天，人们对数据可视化需求不仅限于数据的可视化展示，逐渐对可视化所带来的视觉效果要求提高，为了满足人们对数据可视化的不同需求，各类图表组件库陆续出现。在现有技术中，对矩形树图的绘制采用的是利用二叉树算法来实现，虽然这样能实现矩形树图的绘制，对数据进行较好的可视化。但对于开发者而言，这种方式需要依次计算各个层级的区域面积及坐标位置，矩形起始坐标和排布方向难以确定，且实现过程极为复杂，大量的代码编写导致组件渲染方面性能较差以及效率较慢的问题。

发明内容

本发明的目的在于提供一种矩形树图组件的实现方法，用于解决现有技术中需要依次计算各个层级的区域面积及坐标位置，矩形起始坐标和排布方向难以确定，且实现过程极为复杂、效率低的问题。

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

一种矩形树图组件的实现方法，包括：

步骤S1：搭建矩形树图的结构，包括：

步骤S11：向矩形绘制函数中传入方向参数，通过判断方向参数的布尔值，来决定矩形的纵横；

步骤S12：依据用户传入数据data的长度，矩形绘制函数循环调用自身，每循环绘制一次，方向参数取反，更换矩形绘制方向，直到完成矩形树图的结构搭建；

步骤S2：将矩形树图的各个层级独立划分，实现各个层级模块的循环绘制；

步骤S3：将矩形树图进行组件化，供用户引入并使用矩形树图组件。

进一步地，所述步骤S2具体为：在canvas绘制图表的基础上，将矩形树图的各个层级进行独立划分，并利用递归函数实现各个层级的循环绘制。

进一步地，所述步骤S3中将矩形树图组件化的方法为：采用组件化逻辑将矩形树图划分为用户模块、事件模块、视图模块和绘图模块，并进行封装和调用，实现矩形树图的组件化。

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

本发明采用设置方向参数并结合递归算法，解决绘制矩形树图时矩形起始坐标和排布方向难以确定，绘制方法和过程都较为复杂的问题；用户能够通过简单方式引入并使用矩形树图组件，有助于数据的可视化分析。

附图说明

图1是矩形树图递归绘制方法的实现示意图；

图2是递归绘制的树图实现可自定义引入所采用的业务逻辑示意图；

图3是用户引入矩形树图的实现步骤示意图。

具体实施方式

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

实施例1：

结合附图1所示，本发明提供一种矩形树图组件的实现方法，首先搭建矩形树图的结构，具体方案如下：

1、递归算法实现矩形树图主体绘制的方法如附图1所示：矩形树图通过矩形面积大小来显示每个类别的数量，在单层结构中，矩形的排布依次按照纵向、横向的顺序进行罗列。矩形树图的绘制，包含纵向绘制和横向绘制，定义矩形绘制函数，传入基础原点坐标参数x0、y0，并传入参数i和r。其中，i用于标记遍历用户输入data时数据所在的位置；所传r为布尔类型的方向参数，其值true、false分别代表需要绘制的矩形树图子层级模块的方向为纵向或横向。

在创建矩形路径之前，需要依次获取各个矩形的起始坐标和矩形宽高：采用if、else语句对不同方向的矩形进行所需值的设定，具体方式为：

(1)当r的值为true时，记为纵向绘制，矩形高度为当前剩余区域的高；宽度由当前data[i]的value值占剩余data总值的比例乘以剩余区域的宽度所得；新的初始坐标x0’赋值为当前x0的值加上当前矩形的水平宽度所得，新的初始坐标y0’仍为当前y0的值；

(2)当r的值为false时，记为横向绘制，绘制宽度为当前剩余区域的宽；高度由当前data[i]的value值占剩余data总值的比例乘以剩余区域高度所得；新的初始坐标x0’仍为当前x0的值，新的初始坐标y0’为当前y0的值加上当前矩形的垂直高度所得。

通过当前r的值获取到绘制矩形所需的值后，调用CanvasContext.rect()和相应的canvas绘制方法，即完成当前data[i]的矩形绘制。

每绘制完一个矩形模块，需判断当前i是否在data长度范围内。若在长度范围内，则在矩形绘制函数方法内部方法自身，但参数i变为i+1，参数x0、y0也选择传入最新的x0、y0，同时方向参数r取反；当超出长度范围时，结束绘制，从而完成整个矩形树图的绘制。

2、树图组件附加子组件Tooltip(工具提示)的绘制：

定义一个初始化方法，并通过switch条件判断，判断用户传入的图表类型参数style，来选择调用哪个图表的Tooltip绘制方法。矩形的排布依次按照纵向、横向的顺序进行罗列，因此，对于矩形树图的Tooltip绘制，也需分为纵向、横向两种情况，故本发明中提出的矩形树图的递归绘制方法可拓展运用到矩形树图Tooltip的绘制。

3、通过递归绘制的树图实现可自定义引入所采用的业务逻辑如图2所示：

1)事件模块即为组件js文件，在事件模块中，组件属性列表中定义组件的初始化数据data和组件方法methods。在该文件组件方法列表methods中，除了定义组件相关的touchStart()、touchMove()、touchEnd()、longTap()等触摸方法，还包含用户引入组件时所用的数据处理函数setOptions(value)和图表组件初始化函数initChart(width,height),其中参数value为用户设置的图表参数options，width、height为画布宽高。对于上述函数setOptions(value)，用于对用户传入的图表数据data进行排序、转化等处理；对于上述函数initChart(width,height)，用于对用户引入的图表进行初始化操作，如对用户调用组件的画布宽高等样式进行配置，并获取canvas绘图上下文，即实现图表的初始化。在事件模块中，通过require进行绘图模块js文件的引入。

2)上述绘图模块js即绘图层，主要用于图表绘制，包括矩形树图等图表组件的主体绘制方法和各类附加子组件的绘制方法。在该js文件中，设置两个初始化方法，即initChart()、requestTooltip()，其中initChart()依据用户传入options的style值来调用对应类型图表的绘制方法，requestTooltip()依据用户传入options的style值来调用对应类型图表的附加组件Tooltip的绘制方法。通过module.exports返回定义的模块对象，由事件模块进行调用，从而实现事件模块和绘图模块的绑定。

3)用户引入组件库并完成矩形树图的初始化是通过初始化方法传入相关参数，事件模块调用初始化参数并执行绘图模块对应的方法来实现的。具体方式为用户在视图层wxml或html文件中使用组件，并通过canvasId绑定到对应组件，然后在页面js中，配置图表相关参数options，通过selectComponent(‘#canvasId’)方法找到对应组件并调用该组件的setOptions(options)向事件模块传递图表参数，并调用initChart(width,height)方法。依据用户传入的style参数值，事件模块初始化图表并调用绘图模块中对应的绘图方法，绘图完成后返回绘图到组件视图层，完成图表的渲染，即用户完成矩形树图的构建。

4、在canvas绘制图表的基础上，将矩形树图各个层级进行独立划分，并利用递归函数实现各个层级模块的循环绘制；同时通过组件化逻辑划分为用户、事件、视图、绘图等模块，通过封装和调用，实现该矩形树图的组件化，可以使用户通过极为简单的方式，引入并使用该矩形树图组件，有助于数据的可视化分析。

用户引入矩形树图组件的具体实现过程如图3所示：

1)用户page中.json文件通过usingComponents属性引入canvas组件库；

2)用户page中.wxml文件引入组件标签，设置画布和组件id，与组件构建中的方法通过id实现绑定即可使用组件。

3)用户page中.js文件，用户配置参数options，其中”style：treemap”为引入组件的类型为矩形树图；传入参数showLegend、showLabel为true或false来确定是否显示图表相关的附加子组件；利用id从组件库中匹配获取对应图表组件，通过调用setOptions方法向事件层组件方法列表中的setOptions传递options。事件层组件setOptions方法获取到options值。

4)用户调用initChart方法初始化组件并传入组件画布宽高参数值。组件方法获取到初始化请求后将用户层参数传送至绘图层；

5)绘图层初始化方法中，利用switch条件语句，依据传入的options的style值，调用相应的绘图函数和tooltip函数等。

6)绘图函数中，传入options、微信小程序绘图上下文、画布宽高等参数。利用微信小程序提供的画布API，通过递归算法实现矩形树图主体的绘制。

7)tooltip方法用于定义和设置图表的tooltip，传入参数点击点的坐标、画布宽高；依据options的style属性调用对应的tooltip方法；点击事件的触发方式由事件层定义，当点击图表子数据模块时，触发tooltip显示事件。

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

Claims (3)

1.一种矩形树图组件的实现方法，其特征在于，包括：

步骤S1：搭建矩形树图的结构，包括：

步骤S11：向矩形绘制函数中传入方向参数，通过判断方向参数的布尔值，来决定矩形的纵横；

步骤S12：依据用户传入数据data的长度，矩形绘制函数循环调用自身，每循环绘制一次，方向参数取反，更换矩形绘制方向，直到完成矩形树图的结构搭建；在创建矩形路径之前，需要依次获取各个矩形的起始坐标和矩形宽高：采用if、else语句对不同方向的矩形进行所需值的设定，具体方式为：

(1)当r的值为true时，记为纵向绘制，矩形高度为当前剩余区域的高；宽度由当前data[i]的value值占剩余data总值的比例乘以剩余区域的宽度所得；新的初始坐标x0’赋值为当前x0的值加上当前矩形的水平宽度所得，新的初始坐标y0’仍为当前y0的值；

(2)当r的值为false时，记为横向绘制，绘制宽度为当前剩余区域的宽；高度由当前data[i]的value值占剩余data总值的比例乘以剩余区域高度所得；新的初始坐标x0’仍为当前x0的值，新的初始坐标y0’为当前y0的值加上当前矩形的垂直高度所得；

通过当前r的值获取到绘制矩形所需的值后，调用CanvasContext.rect()和相应的canvas绘制方法，即完成当前data[i]的矩形绘制；

步骤S2：将矩形树图的各个层级独立划分，实现各个层级模块的循环绘制；

步骤S3：将矩形树图进行组件化，供用户引入并使用矩形树图组件。

2.根据权利要求1所述的一种矩形树图组件的实现方法，其特征在于，所述步骤S2具体为：在canvas绘制图表的基础上，将矩形树图的各个层级进行独立划分，并利用递归函数实现各个层级的循环绘制。

3.根据权利要求2所述的一种矩形树图组件的实现方法，其特征在于，所述步骤S3中将矩形树图组件化的方法为：采用组件化逻辑将矩形树图划分为用户模块、事件模块、视图模块和绘图模块，并进行封装和调用，实现矩形树图的组件化。

Images