1. 概述编辑
1.1 预期效果
我们有时需要在双向折叠树中显示对应的图表，以方便动态查看，怎么实现呢？效果如下图所示：
1.2 实现思路
双向折叠树就是行与列方向都有 动态折叠树，将图表子表通过 网页框控件 嵌入到主表中，再给动态树节点设置点击事件，将节点值传递给图表，从而实现双向折叠树与图表的交互。
2. 示例编辑
2.1 制作动态折叠树模板
2.1.1 准备数据
新建普通报表，新建数据库查询，SQL 查询语句为：
SELECT 货主地区,货主城市,客户ID,类别名称,订单.订单ID,产品名称 FROM 产品,类别,订单,订单明细
where 产品.类别ID=类别.类别ID and 订单.订单ID=订单明细.订单ID and 产品.产品ID=订单明细.产品ID and 货主地区 in ('华东','华北') and 类别名称 in ('谷类/麦片','肉/家禽','饮料') and 客户ID like '%a'
如下图所示：
2.1.2 设计表格
首先要设计一个双向折叠树，双向折叠树需要注意折叠树数据列不可位于同一行或者同一列。具体设置详见模板，主要注意单元格的扩展方向、父格设置以及过滤条件。表格样式如下图所示：
2.1.3 设置点击事件
为了实现双向折叠树与图表的交互，需要为树节点添加「按钮控件」并设置「点击事件」，通过点击事件将树节点的值作为参数传递给图表。
以效果图中「食品」节点为例，说明控件的点击事件设置：
1）选择「食品」单元格，点击控件设置，选择「按钮控件」，添加点击事件。
2）引用 JavaScript 脚本文件，点击「+」按钮，选择 %FR_HOME%\webapps\webroot\help\demo.js 。demo.js 文件是将树与图表模板相关联，将树节点的值传递给图表模板。
3）添加参数「cv」，值为公式 $$$ ，表示当前树节点的值。
4）输入 JavaScript 代码，调用 demo.js 中的方法。
注：demo.js 文件内容修改后，需要删除原先引用重新添加引用，才可生效。
步骤如下图所示：
treenode_lb1() 是 demo.js 中的一个方法，作用是传参。对应的 demo.js 的内容是：
function treenode_lb1(treenode, cv) {
if (treenode.selected()) {
if (!window.fr_lb1_param){
window.fr_lb1_param = {};
}
window.fr_lb1_param[cv] = cv;
} else {
window.fr_lb1_param[cv] = null;
}
postParam();
}
demo.js 中还有一个方法是关联折叠树模板和网页框嵌入的图表模板，代码如下：
注：其中 ?viewlet= 后面部分为嵌入模板预览时的 URL 地址，'IFRAME' 为网页框控件的「控件名」。
FR.doHyperlinkByPost('?viewlet=demo%252Fbasic%252F%25E5%258F%258C%25E5%2590%2591%25E6%258A%2598%
25E5%258F%25A0%25E6%25A0%2591%25E5%25B9%25B6%25E4%25B8%258E%25E5%259B%25BE%25E8%25A1%25A8%25E4%25
BA%25A4%25E4%25BA%2592%25E5%25AD%2590%25E5%259B%25BE%25E8%25A1%25A8.cpt',
{diqu:diqu_str,city:city_str,lb1:lb1_str,lb2:lb2_str,lx1:lx1_str,lx2:lx2_str},'IFRAME');
2.1.4 嵌入图表模板
图表模板通过树模板中的一个「网页框控件」引入，在设计的表格下方合并单元格，添加「网页框」控件，地址栏输入：${servletURL}?viewlet=模板名.cpt
即本例输入：${servletURL}?viewlet=demo/basic/双向折叠树并与图表交互子图表.cpt 。
注：控件名必须与 demo.js 中 FR.doHyperlinkByPost() 方法中的名字对应。如示例均为「iframe」。
2.2 制作图表模板
2.2.1 准备数据
新建普通报表，新建数据库查询，SQL 查询语句为：
SELECT 货主地区,货主城市,客户ID,类别名称,订单.订单ID,产品名称 FROM 产品,类别,订单,订单明细
where 产品.类别ID=类别.类别ID and 订单.订单ID=订单明细.订单ID and 产品.产品ID=订单明细.产品ID and 客户ID like '%a'
如下图所示：
2.2.2 设计表格
图表模板中，需要设置根据树节点传参的条件设置。具体设置详见模板，主要注意单元格的扩展方向、父格设置、过滤条件以及条件属性，并且 F 列、I 列被隐藏。表格样式如下图所示：
2.2.3 插入图表
选中单元格，点击单元格元素，插入图表，设置图表的类型、数据、样式等。
2.3 效果预览
保存报表，点击「数据分析」预览，效果同 1.1 节预期效果。
注：只支持「数据分析」预览，且不支持移动端。
3. 模板下载编辑
已完成模板可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\basic\双向折叠树并与图表交互.cpt
点击下载模板：双向折叠树并与图表交互.cpt
已完成模板可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\basic\双向折叠树并与图表交互子图表.cpt
点击下载模板：双向折叠树并与图表交互子图表.cpt