作者cognos初学者·2010-09-25 14:08

cognos列表与图形联动效果

字数 4411阅读 3469评论 14赞 8

cognos中有列表和图形，但是表和图之间总是孤立的，刷新页面也都是全页面刷新，于是经理在想，是否有个方法能在点击cognos列
表时旁边的cognos图表能够实时的变动，类似flex中的绑定效果。在老板的强烈催促下，经理也没什么时间去网上去找去问，觉得凭自己以前
的一些J2EE老底子加上report studio中强大的HTML项目貌似可以搞定,于是开搞了... 
 首先给大家看看数据库 
<a class="example-image-link" href="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082021.jpg" width="508" border="0" height="109" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082021.jpg" width="508" border="0" height="109" alt="" ></a> 
一、先用report studio建立一个带参数的cognos饼图报表(这里可以随便是什么图)，报表灰常简单 
<a class="example-image-link" href="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082022.jpg" width="837" border="0" height="467" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082022.jpg" width="837" border="0" height="467" alt="" ></a> 
设置参数名为par3，并把此报表保存为a1 
二、再用report studio建立一个列表，如图 
<a class="example-image-link" href="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082023.jpg" width="846" border="0" height="211" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082023.jpg" width="846" border="0" height="211" alt="" ></a> 
经理在这里多用了html项目，因为cognos在页面上封装的太好了，只能这样拼凑脚本。 
基本的原理就是在列表旁边放置一个html项目，其内容是一个iframe，其连接也就是刚刚做好的那个带参数的饼图报表。 
然后在列表中放置一个label，在label中设置点击事件出来iframe链接（其实这样就换了一个参数）及重新载入。
其中 
1的代码如下，他主要是点击的列表触发的事件 

<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); width: 98%; font-size: 13px;">1<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a><script type="text/javascript"> 
2<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>    function changeframe(par) 
3<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif" alt="" align="top" id="Codehighlighter1_60_275_Open_Image" ></a><a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ContractedBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ContractedBlock.gif" alt="" align="top" style="display: none;" id="Codehighlighter1_60_275_Closed_Image" ></a>    <a class="example-image-link" href="http://www.blogjava.net/Images/dot.gif" alt="" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/dot.gif" alt="" ></a>{ 
4<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>        sname="http://localhost/cognos8/cgi-bin/cognos.cgi?b_action=cognosViewer&ui.object=/content/package[@name='aa']/report[@name='a1']&ui.action=run&run.prompt=false&p_par3="+par; 
5<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>        frameChart.location.href=sname; 
6<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif" alt="" align="top" ></a>    } 
7<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a></script></div>
 
2到6主要就是定义一个含有点击事件的label 
2的代码为 

<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); width: 98%; font-size: 13px;">1<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a><u><label onclick="changeframe('</div>
 
3其实是一个报表表达式，它是参数 

<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); width: 98%; font-size: 13px;">1<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>[query1].[arr2]</div>
 
4的代码为 

<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); width: 98%; font-size: 13px;">1<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>');"  style="width:100%;height:100%" ></div>
 
5也是一个报表表达式，他是设置该列显示的内容 

<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); width: 98%; font-size: 13px;">1<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>[arr2]</div>
 
6的代码为，他收个尾
<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); width: 98%; font-size: 13px;">1<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a></label ></u></div>
 

7的代码主要是iframe，然后就是刷新等待时候的一个等待提示 
7的代码为 

<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); width: 98%; font-size: 13px;"> 1<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a><iframe frameborder="0" id="frameChart" src="" scrolling="no" height="450" width="100%"></iframe> 
 2<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a><div id="loading" style="display:block; padding:100px 0 100px 0;text-align:center;color:#999999;font-size:12px;"> 
 3<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>      页面加载中<a class="example-image-link" href="http://www.blogjava.net/Images/dot.gif" alt="" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/dot.gif" alt="" ></a> 
 4<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>    </div> 
 5<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a><script type="text/javascript">      
 6<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>     var  a  = document.getElementById("frameChart");    
 7<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>     var b  = document.getElementById("loading");    
 8<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>     a.style.display =  "none";                      
 9<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>     b.style.display = "block";                      
10<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>      
11<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif" alt="" align="top" id="Codehighlighter1_528_859_Open_Image" ></a><a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ContractedBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ContractedBlock.gif" alt="" align="top" style="display: none;" id="Codehighlighter1_528_859_Closed_Image" ></a>        if  (window.ActiveXObject)   <a class="example-image-link" href="http://www.blogjava.net/Images/dot.gif" alt="" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/dot.gif" alt="" ></a>{    
12<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a> 
13<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a> 
14<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>     a.onreadystatechange =  function()      
15<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif" alt="" align="top" id="Codehighlighter1_585_851_Open_Image" ></a><a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ContractedSubBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ContractedSubBlock.gif" alt="" align="top" style="display: none;" id="Codehighlighter1_585_851_Closed_Image" ></a>     <a class="example-image-link" href="http://www.blogjava.net/Images/dot.gif" alt="" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/dot.gif" alt="" ></a>{    
16<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>        if (this.readyState=="complete")    
17<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif" alt="" align="top" id="Codehighlighter1_643_841_Open_Image" ></a><a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ContractedSubBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ContractedSubBlock.gif" alt="" align="top" style="display: none;" id="Codehighlighter1_643_841_Closed_Image" ></a>         <a class="example-image-link" href="http://www.blogjava.net/Images/dot.gif" alt="" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/dot.gif" alt="" ></a>{                                                                    
18<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>             b.innerHTML  =   "";    
19<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>              b.style.display = "none";    
20<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>             a.style.display  = "";    
21<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" alt="" align="top" ></a>          }    
22<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" alt="" align="top" ></a>     }  
23<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif" alt="" align="top" id="Codehighlighter1_864_963_Open_Image" ></a><a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ContractedBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ContractedBlock.gif" alt="" align="top" style="display: none;" id="Codehighlighter1_864_963_Closed_Image" ></a>     }else<a class="example-image-link" href="http://www.blogjava.net/Images/dot.gif" alt="" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/dot.gif" alt="" ></a>{  
24<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>     a.style.display =  "block";                     //隐藏  
25<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" alt="" align="top" ></a>     b.style.display = "none";  
26<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif" alt="" align="top" ></a>     } 
27<a class="example-image-link" href="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/Images/OutliningIndicators/None.gif" alt="" align="top" ></a>  </script></div>
 
拼滴我累死了.....
OK，我们来看看效果 
我先点击一下第一个单元格 
<a class="example-image-link" href="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082024.jpg" width="801" border="0" height="383" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082024.jpg" width="801" border="0" height="383" alt="" ></a> 
再点击第二个 
<a class="example-image-link" href="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082025.jpg" width="803" border="0" height="393" data-lightbox="example-set"><img class="example-image" src="http://www.blogjava.net/images/blogjava_net/zhangyuan/cognos/cognos2/pic2010082025.jpg" width="803" border="0" height="393" alt="" ></a>
注意，列表不会刷新哦，有点像ajax的效果。

商业智能 cognos

著作权归作者所有

如果觉得我的文章对您有用，请点赞。您的支持将鼓励我继续创作！

添加新评论14 条评论

jjylys软件开发工程师xc
2015-05-16 17:43

非常好呢~~

wenshao600其它广州南天
2014-03-25 17:22

联动，刚好适用了

magaochen521软件开发工程师Lenovo
2014-02-20 14:44

学习了谢谢分享

andylve技术支持reno-lit
2014-02-19 11:53

试了一下，有问题没成功

elvalin研发工程师18M
2014-01-07 20:45

如果有多个参数,就是第3个步骤的报表表达式有多个,请问如何拼呢?

elvalin研发工程师18M
2014-01-07 10:02

我用的C10.2.1,不需要这样拼装的,直接在一个html项目里面可以写的.但是不管是拼装还是合并在一起,HTML项目,取不到数据项的值.再次求教.

zhinengyouzi商业智能工程师苏宁易购
2013-12-16 19:21

RSV-SRV-0042 回溯：RSReportService.cpp(856): RSException: CCL_CAUGHT: RSReportService::process()RSReportServiceMethod.cpp(259): RSException: CCL_RETHROW: RSReportServiceMethod::process(): asynchRun_RequestRSASyncExecutionThread.cpp(789): RSException: RSASyncExecutionThread::checkExceptionRSASyncExecutionThread.cpp(250): RSException: CCL_CAUGHT: RSASyncExecutionThread::runImpl(): asynchRun_RequestRSCMHelper.cpp(742): RSException: CCL_THROW: RSCMHelper::getAuthoredReportFromCache()

，不知道为什么点开第一下总是报这个错误，大神指导啊

zhinengyouzi商业智能工程师苏宁易购
2013-12-10 16:03

楼主，为什么我的第三步传参传不过去啊，这种格式能传参数吗

zhinengyouzi商业智能工程师苏宁易购
2013-12-10 15:26

很强大，膜拜