多语言展示
当前在线:447今日阅读:126今日分享:42

智能报表系统中如何设置双向折叠树并与图表交互

我们有时需要在双向折叠树中显示对应的图表,以方便查看,怎么实现呢?下面就通过智能报表系统FineReport来简单介绍。
工具/原料
1

智能报表系统FineReport7.1.1

2

大小:148.2M 适用平台:windows/linux

方法/步骤
1

建立双向折叠树首先建立一个双向折叠树,双向折叠树需要注意折叠树数据列不可位于同一行或者同一列。

2

设定节点点击事件为了实现双向折叠树与图表的交互,需要设置树节点的点击事件,通过点击事件将树节点的值作为参数传递给图表。以效果图中食品节点为例,说明控件的点击事件设置食品节点事件设置图如下:

3

treenode_lb1()方法作用是传参,内容是: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();}

4

demo.js中还有个方法是关联tree.cpt和tree_chart.cpt两个文档,内容是:FR.doHyperlinkByPost('ReportServer?reportlet=demo/analytics/tree/tree_chart.cpt', {diqu:diqu_str,city:city_str,lb1:lb1_str,lb2:lb2_str,lx1:lx1_str,lx2:lx2_str},'iframe');}

5

图表模板的引入图表模板通过树模板中的一个网页框控件引入,详见tree.cpt。网页框控件属性如下,关联tree_chart.cpt图中,控件名为空,即默认值iframe,如果设置控件名,则必须与3.2中最后一个方法中的名字对应,如上文是iframe。

6

图表模板的设置图表模板中,需要设置根据树节点传参的条件设置。

7

效果如下:

推荐信息