1. 概述编辑
1.1 应用场景
矩形树图是用来描述层次结构数据的占比关系,能够进行逐级钻取显示下层数据情况,采用矩形表示层次结构的节点,父子层次关系用矩阵间的相互嵌套来表达。从根节点开始,空间根据相应的子节点数目被分为多个矩形,矩形面积大小对应节点属性。每个矩形又按照相应节点的子节点递归的进行分割,直到叶子节点为止。
矩形树图适合展现具有层级关系的数据,能够直观体现同级之间的比较。
1.2 图表特点
优点:图形更紧凑,同样大小的画布可以展现更多的信息,可以展现成员间的权重。
缺点:不够直观、明确、不像树图那么清晰,分类占比太小时不容易排布。
2. 属性介绍编辑
2.1 类型
以单元格元素或悬浮元素插入矩形树图后,可在右边属性面板的类型设置项下,选择矩形树图,如下图所示:
2.1.1 矩形树图
矩形树图,适合展现具有层级关系的数据,能够直观体现同级之间的比较。
注:使用标签时,标签如果显示不下,则不显示。
2.2 数据
矩形树图数据绑定的详细介绍可以参见文档:图表数据。
矩形树图数据绑定的部分设置项有所不同,此处单独介绍:
数据来源:散点图的数据来源,分为数据集数据、单元格数据两种。
数据集:选择预先配置好的数据查询或内置数据集等内容。
指标名:此处控制显示具体数值前的提示文字。
层级数:此处设置矩形树图的层级,默认为1,具体数值跟下面的层次匹配。
层次1:此处设置矩形树图层级1对应的字段。
层次2:此处设置矩形树图层级1对应的字段。
值:此处设置矩形树图对应的数值。
汇总方式:可设置为无、求和、平均、最大值、最小值、个数,默认为无。
2.3 样式
矩形树图样式设计的详细介绍可以参见文档:图表样式。
2.4 特效
矩形树图特效设置的详细介绍可以参见文档:图表特效。
3. 示例编辑
3.1 报表设计
3.1.1 准备数据
新建内置数据集 Android,分别记录 Android 系统各大品牌下的各型号的手机使用量占比关系,如下图所示:
3.1.2 组件设计
以单元格图表为例,合并单元格,点击A1单元格,选择单元格元素>插入图表>矩形树图,如下图:
3.1.3 数据绑定
选中图表,在右侧图表属性表中选择图表属性表-数据,层级设置为 2,具体设置如下图所示:
注:层级数限制为 1~15;改变层级数时,下面对应的层级选项也进行删减或增加。
3.1.4 样式设计
矩形树图的基础样式只需要改个标题,其余默认设置即可。
1)在右侧图表属性表中选择样式>标签,勾选使用标签,具体设置如下:
2)在右侧图表属性表中选择样式>系列,配色选择自定义,具体设置如下:
3.2 效果预览
1)PC 端
保存报表,点击表单预览,效果如下图所示:
2)移动端
4. 模板下载编辑
已完成模板可参考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\treemap\treemap.cpt
点击下载模板:矩形树图.cpt