[发明专利]一种树状结构图的绘制方法以及移动终端

说明书

本发明公开了一种树状结构图的绘制方法以及移动终端，所述方法包括：对于待显示的树状结构，利用Canvas绘制所述树状结构的各节点的色块和线条；其中，所述节点的色块的大小为该节点的显示区域的大小，所述色块的颜色是根据预设的节点的颜色显示规则确定的；根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。应用本发明可以适合于在移动终端上展示树状结构图。

技术领域

本发明涉及移动终端技术领域，特别是指一种树状结构图的绘制方法以及移动终端。

背景技术

在计算机技术领域——诸多图表类库中，树状图绘制更适用于展示多层级复杂的团队组织架构，多以Canvas(画布)绘制技术为基础，再进行数据渲染，在该领域内，由于网页端屏幕范围大，容纳信息多等优势，通过计算各层级父子节点数量，分析渲染对应数据，进而完成打开/关闭操作，实现效果相比移动端更能使用户易操作、易浏览。

例如，实际业务中，团队组织人员达百级以上时，可以网页端绘制树状图展示团队组织架构人员分配，使得用户快速了解所属团队组织架构人员分配。

目前行业内现有Echarts技术绘制树状图的方法中，首先在网页端固定设置Canvas画布，进而使用Canvas基础绘制方法，绘制fillText(文字)、stroke(线条)；通过计算各层级父子节点数量，完成节点名称+线条的绘制。

然而传统的树状图绘制展现模式多以网页端为主，在移动终端上进行展示则存在诸多问题：

Echarts树状结构图，显示区域大小固定，不支持移动端自动化扩展；通常，放大操作后，绘制出的文字出现严重虚化；此外，当子节点过多时，会出现明显的数据堆叠现象，如图1所示；个性化展示过于局限，仅支持单色调更换，不能满足移动端个性化主题、全方位拖拽等需求。

发明内容

有鉴于此，本发明的目的在于提出一种树状结构图的绘制方法以及移动终端，可以适合于在移动终端上展示树状结构图。

基于上述目的，本发明提供一种树状结构图的绘制方法，包括：

对于待显示的树状结构，利用Canvas绘制所述树状结构的各节点的色块和线条；其中，所述节点的色块的大小为该节点的显示区域的大小，所述色块的颜色是根据预设的节点的颜色显示规则确定的；

根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。

进一步，在所述利用Canvas绘制所述树状结构的各节点的色块和线条之前，还包括：

统计所述树状结构中节点层级个数；

根据显示屏的宽度，以及统计出的节点层级个数，计算出每个节点的色块的宽度；

根据节点的色块的宽度，按设定比例计算节点的色块的高度；

根据各节点在所述树状结构中的位置，以及各节点的色块的大小，确定各节点的色块在显示屏中的位置坐标。

其中，所述利用Canvas绘制所述树状结构的各节点的色块，具体包括：

根据各节点的色块在显示屏中的大小、位置坐标，以及预设的节点的颜色显示规则，利用Canvas绘制所述树状结构的各节点的色块。

其中，所述根据各节点的色块的显示位置，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染，具体包括：

根据各节点的色块的大小确定各节点的文字信息的字号大小；

根据各节点的文字信息的字号大小，以及各节点的色块的位置坐标，使用树状结构插件将所述树状结构的各节点的文字信息在对应色块处进行数据渲染。