[发明专利]一种矩形树图组件的实现方法

权利要求书

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中将矩形树图组件化的方法为：采用组件化逻辑将矩形树图划分为用户模块、事件模块、视图模块和绘图模块，并进行封装和调用，实现矩形树图的组件化。