第十章 BIRT图表（续） .

于 2014-07-15 15:08:58 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： birt
本文详细介绍了如何使用BIRT JSP Tag Lib实现报表的动态设置与异步刷新，包括创建报表、数据源、数据集、参数、布局以及JavaScript脚本的运用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

10.4 图表的动态设置与异步刷新

首先我们实现一个jsp输入框与birt的异步刷新。

新建一个报表，取名TopNPercent.rptdesign，空白模板，sql查询结果集。

新建数据源MyDataSource，采用BIRT设计器自带的例子数据库：

驱动程序类：org.eclipse.birt.report.data.oda.sampledb.Driver (Classic Models Inc. SampleDB Driver)

Database URL：jdbc:classicmodels:sampled

用户名：ClassicModels

新建数据集Customer Sales

select CUSTOMERS.CUSTOMERNAME,

       CUSTOMERS.CUSTOMERNUMBER,

       sum(ORDERDETAILS.QUANTITYORDERED *

       ORDERDETAILS.PRICEEACH) as CUSTOMERTOTAL

from CUSTOMERS, ORDERS, ORDERDETAILS

where CUSTOMERS.CUSTOMERNUMBER = ORDERS.CUSTOMERNUMBER

and ORDERS.ORDERNUMBER = ORDERDETAILS.ORDERNUMBER

group by CUSTOMERS.CUSTOMERNAME, CUSTOMERS.CUSTOMERNUMBER

order by CUSTOMERTOTAL

新建两个参数：

参数：Top Count

提示文本：Number of Customers for Top "N" Chart

数据类型：十进制

显示类型：文本框

帮助文本：Enter the number of customers you wish included in the top "N" graph of the report

默认值：5

参数：Top Percentage

提示文本：Percentage of Customers for Top N% Listing

数据类型：十进制

显示类型：文本框

帮助文本：Enter the percentage of customers you wish included in the top N% listing of the report

默认值：25

在报表编辑器中插入三个网格，分别为1行2列，2行1列，2行1列。

最上面的网格，左边一列插入一个图片，格式为嵌入，地址为：C:\Documents and Settings\pclenahan\My Documents\ClassicModels\logos\Classic-Models-Full-M.jpg

右边一列插入三个文本，分别为：

文本：Classic Models, Inc. 字体格式：蓝色字体，加粗，大小20点

HTML格式动态文本：701 Gateway Boulevard, San Francisco, CA 94107

HTML格式动态文本：Top <VALUE-OF>params["Top Count"]</VALUE-OF> / Top <VALUE-OF>params["Top Percentage"]</VALUE-OF>% Customers by Revenue 字体格式：黑色字体，加粗，大小16点

中间插入图表：

第一行插入文本：

HTML格式动态文本：Top <VALUE-OF>params["Top Count"]</VALUE-OF> Customers

第二行插入图表：

使用以下来源的数据- Customer Sales，类别(X)系列选择可用列绑定-图表- row["CUSTOMERNAME"]，值(Y)系列选择可用列绑定-图表- row["CUSTOMERTOTAL"].

筛选器：row["CUSTOMERTOTAL"]，Top N, params["Top Count"]

在第二行图表上建立书签："TopSalesChart"

最下面的网格：

第一行插入文本：

HTML格式动态文本：Top <VALUE-OF>params["Top Percentage"]</VALUE-OF>% Customers (sorted by name)

第二行插入一个1行3列的表：分别绑定dataSetRow["CUSTOMERNAME"]，dataSetRow["CUSTOMERNUMBER"]，dataSetRow["CUSTOMERTOTAL"]，

新建过滤器：row["CUSTOMERTOTAL"],上百分比，params["Top Percentage"]

在最下面的网格上新建书签："TopPercent"

最终预览的效果：

新建JSP，名称为mashup.jsp,内容如下：

 

[html]  view plain copy
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  2. pageEncoding="ISO-8859-1"%>  
  3. <%@ taglib uri="/birt.tld" prefix="birt" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  8.     <meta http-equiv="Content-Language" content="en-us">  
  9.     <title>BIRT JSP Tag Lib Mashup</title>  
  10.     <style>  
  11.         .pageHeader {  
  12.             position: absolute;  
  13.             width: 1020px;  
  14.             text-align: center;  
  15.             color: #224499;  
  16.             font-size: xx-large;  
  17.             font-weight: bold;  
  18.         }  
  19.           
  20.         .mashupContainer {  
  21.             position: absolute;  
  22.             font-family: Verdana, Tahoma, Arial;  
  23.             font-size: 11px;  
  24.             border: 1px solid #87AFDA;  
  25.             margin: 3px;  
  26.         }  
  27.           
  28.         .mashupTitle {  
  29.             position: absolute;  
  30.             background: #D4E6FC;  
  31.             font-size: 14px;  
  32.             font-weight: bold;  
  33.             color: #224499;  
  34.             padding: 3px;  
  35.             border-bottom: 1px solid #87AFDA;  
  36.         }  
  37.           
  38.         .mashupContent {  
  39.             position: absolute;  
  40.             padding: 3px;  
  41.         }  
  42.     </style>  
  43.     <script type="text/javascript">  
  44.         function populateDefaults(elem){  
  45.             txtBox = document.getElementById(elem);  
  46.             if(txtBox.value == ""){  
  47.                 if(elem == "TopN"){  
  48.                     txtBox.value = 5;  
  49.                 }else if(elem == "TopP"){  
  50.                     txtBox.value = 25;  
  51.                 }  
  52.             }  
  53.         }  
  54.       
  55.         function refreshTag(iframeName, elem, paramName) {  
  56.             var c = document.getElementById(elem).value;  
  57.             origUrl = window.frames[iframeName].location.toString();  
  58.             var pos = origUrl.indexOf('&__overwrite=true&Top');  
  59.             if (pos > 0) {  
  60.                 window.frames[iframeName].location = origUrl.substr(0, pos) + '&__overwrite=true&' + paramName + '=' + c;  
  61.             } else {  
  62.                 window.frames[iframeName].location = origUrl  
  63.                         + '&__overwrite=true&' + paramName + '=' + c;  
  64.             }  
  65.         }  
  66.     </script>  
  67. </head>  
  68. <body>  
  69.       
  70.         <div class="mashupContainer"  id="salesDataContainer" style="z-index: 1000; top: 50px; left: 50px; height: 400px; width: 320px;">  
  71.         <div class="mashupTitle" style="z-index: -1; width: 98%; height: 20px;">Report Parameters</div>  
  72.         <div class="mashupContent" id="SalesData" style="padding-top: 20px; z-index: -1; top: 24px; left: 0px; width; 320px%; height: 300px;">  
  73.             TOP COUNT PARAMETER  
  74.             <input type="Text" id="TopN" name="TopN" onblur="populateDefaults('TopN')">  
  75.             <br><br>  
  76.             <INPUT TYPE="button" NAME="button" Value="Refresh Chart" onClick="refreshTag('birtViewer', 'TopN', 'Top%20Count')" >   
  77.             <br><br>  
  78.             <br><br>  
  79.             TOP PERCENT PARAMETER  
  80.             <input type="Text" id="TopP" name="TopP" onblur="populateDefaults('TopP')">  
  81.             <br><br>  
  82.             <INPUT TYPE="button" NAME="button" Value="Refresh Table" onClick="refreshTag('birtViewer2', 'TopP', 'Top%20Percentage')" >   
  83.         </div>  
  84.      </div>  
  85.       
  86.         <div class="mashupContainer" id="salesChartContainer" style="top: 50px; left: 400px; width: 655px; height: 400px;">  
  87.         <div class="mashupTitle" style="width: 99.1%; height: 20px;">Top Customer Sales Chart</div>  
  88.         <div class="mashupContent" id="SummaryDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">  
  89.             <birt:viewer id="birtViewer"  
  90.                 reportDesign="TopNPercent.rptdesign"  
  91.                 baseURL="<%= request.getContextPath( )%>"  
  92.                 pattern="run"  
  93.                 height="367"  
  94.                 width="645"  
  95.                 format="html"  
  96.                 frameborder="false"  
  97.                 isHostPage="false"  
  98.                 isReportlet="true"  
  99.                 bookmark="TopSalesChart"  
  100.                 showParameterPage="false"  
  101.             >  
  102.             </birt:viewer>  
  103.         </div>  
  104.     </div>  
  105.   
  106.   
  107.   
  108.     <div class="mashupContainer" style="top: 500px; left: 20px; height: 650px; width: 1000px;">  
  109.         <div class="mashupTitle" style="width: 99.4%; height: 20px;">Top % of Customers by Sales</div>  
  110.         <div class="mashupContent" id="SalesByYearDiv" style="top: 25px; width: 99%; height: 40px; align: middle; text-align: center;">  
  111.             <!-- This example uses the same report design, but this can a different rptdesign file than used above -->  
  112.             <birt:viewer id="birtViewer2"  
  113.                 reportDesign="TopNPercent.rptdesign"  
  114.                 baseURL="<%= request.getContextPath( )%>"  
  115.                 pattern="run"  
  116.                 height="615"  
  117.                 width="990"  
  118.                 format="html"  
  119.                 frameborder="false"  
  120.                 isHostPage="false"  
  121.                 isReportlet="true"  
  122.                 bookmark="TopPercent"  
  123.                 showParameterPage="false"  
  124.             >  
  125.             </birt:viewer>  
  126.         </div>  
  127.     </div>  
  128. </body>  
  129. </html>  
[html]  view plain copy
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  2. pageEncoding="ISO-8859-1"%>  
  3. <%@ taglib uri="/birt.tld" prefix="birt" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  8.     <meta http-equiv="Content-Language" content="en-us">  
  9.     <title>BIRT JSP Tag Lib Mashup</title>  
  10.     <style>  
  11.         .pageHeader {  
  12.             position: absolute;  
  13.             width: 1020px;  
  14.             text-align: center;  
  15.             color: #224499;  
  16.             font-size: xx-large;  
  17.             font-weight: bold;  
  18.         }  
  19.           
  20.         .mashupContainer {  
  21.             position: absolute;  
  22.             font-family: Verdana, Tahoma, Arial;  
  23.             font-size: 11px;  
  24.             border: 1px solid #87AFDA;  
  25.             margin: 3px;  
  26.         }  
  27.           
  28.         .mashupTitle {  
  29.             position: absolute;  
  30.             background: #D4E6FC;  
  31.             font-size: 14px;  
  32.             font-weight: bold;  
  33.             color: #224499;  
  34.             padding: 3px;  
  35.             border-bottom: 1px solid #87AFDA;  
  36.         }  
  37.           
  38.         .mashupContent {  
  39.             position: absolute;  
  40.             padding: 3px;  
  41.         }  
  42.     </style>  
  43.     <script type="text/javascript">  
  44.         function populateDefaults(elem){  
  45.             txtBox = document.getElementById(elem);  
  46.             if(txtBox.value == ""){  
  47.                 if(elem == "TopN"){  
  48.                     txtBox.value = 5;  
  49.                 }else if(elem == "TopP"){  
  50.                     txtBox.value = 25;  
  51.                 }  
  52.             }  
  53.         }  
  54.       
  55.         function refreshTag(iframeName, elem, paramName) {  
  56.             var c = document.getElementById(elem).value;  
  57.             origUrl = window.frames[iframeName].location.toString();  
  58.             var pos = origUrl.indexOf('&__overwrite=true&Top');  
  59.             if (pos > 0) {  
  60.                 window.frames[iframeName].location = origUrl.substr(0, pos) + '&__overwrite=true&' + paramName + '=' + c;  
  61.             } else {  
  62.                 window.frames[iframeName].location = origUrl  
  63.                         + '&__overwrite=true&' + paramName + '=' + c;  
  64.             }  
  65.         }  
  66.     </script>  
  67. </head>  
  68. <body>  
  69.       
  70.         <div class="mashupContainer"  id="salesDataContainer" style="z-index: 1000; top: 50px; left: 50px; height: 400px; width: 320px;">  
  71.         <div class="mashupTitle" style="z-index: -1; width: 98%; height: 20px;">Report Parameters</div>  
  72.         <div class="mashupContent" id="SalesData" style="padding-top: 20px; z-index: -1; top: 24px; left: 0px; width; 320px%; height: 300px;">  
  73.             TOP COUNT PARAMETER  
  74.             <input type="Text" id="TopN" name="TopN" onblur="populateDefaults('TopN')">  
  75.             <br><br>  
  76.             <INPUT TYPE="button" NAME="button" Value="Refresh Chart" onClick="refreshTag('birtViewer', 'TopN', 'Top%20Count')" >   
  77.             <br><br>  
  78.             <br><br>  
  79.             TOP PERCENT PARAMETER  
  80.             <input type="Text" id="TopP" name="TopP" onblur="populateDefaults('TopP')">  
  81.             <br><br>  
  82.             <INPUT TYPE="button" NAME="button" Value="Refresh Table" onClick="refreshTag('birtViewer2', 'TopP', 'Top%20Percentage')" >   
  83.         </div>  
  84.      </div>  
  85.       
  86.         <div class="mashupContainer" id="salesChartContainer" style="top: 50px; left: 400px; width: 655px; height: 400px;">  
  87.         <div class="mashupTitle" style="width: 99.1%; height: 20px;">Top Customer Sales Chart</div>  
  88.         <div class="mashupContent" id="SummaryDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">  
  89.             <birt:viewer id="birtViewer"  
  90.                 reportDesign="TopNPercent.rptdesign"  
  91.                 baseURL="<%= request.getContextPath( )%>"  
  92.                 pattern="run"  
  93.                 height="367"  
  94.                 width="645"  
  95.                 format="html"  
  96.                 frameborder="false"  
  97.                 isHostPage="false"  
  98.                 isReportlet="true"  
  99.                 bookmark="TopSalesChart"  
  100.                 showParameterPage="false"  
  101.             >  
  102.             </birt:viewer>  
  103.         </div>  
  104.     </div>  
  105.   
  106.   
  107.   
  108.     <div class="mashupContainer" style="top: 500px; left: 20px; height: 650px; width: 1000px;">  
  109.         <div class="mashupTitle" style="width: 99.4%; height: 20px;">Top % of Customers by Sales</div>  
  110.         <div class="mashupContent" id="SalesByYearDiv" style="top: 25px; width: 99%; height: 40px; align: middle; text-align: center;">  
  111.             <!-- This example uses the same report design, but this can a different rptdesign file than used above -->  
  112.             <birt:viewer id="birtViewer2"  
  113.                 reportDesign="TopNPercent.rptdesign"  
  114.                 baseURL="<%= request.getContextPath( )%>"  
  115.                 pattern="run"  
  116.                 height="615"  
  117.                 width="990"  
  118.                 format="html"  
  119.                 frameborder="false"  
  120.                 isHostPage="false"  
  121.                 isReportlet="true"  
  122.                 bookmark="TopPercent"  
  123.                 showParameterPage="false"  
  124.             >  
  125.             </birt:viewer>  
  126.         </div>  
  127.     </div>  
  128. </body>  
  129. </html>  


说明：中间的style用来定义格式，javascript脚本用来刷新指定的frame，传递参数

下面的三个frame，第一个是两个输入框，提交到javascript脚本刷新frame

第二个和第三个是个jsp tag方式嵌入birt的frame，需要先在jsp引入birt tag，

<%@ taglib uri="/birt.tld" prefix="birt" %>

格式说明如下

<birt:viewer id="birtViewer" 

<!—指定iframe的名称，方便javascript脚本查找指定—>

reportDesign="TopNPercent.rptdesign"

<!—指定嵌入报表的名称—>

baseURL="<%= request.getContextPath( )%>"

<!—指定嵌入报表的路径—>

pattern="run"

<!—指定报表的运行模式，run模式没有导航栏和工具栏，没有分页，需自己指定，运行较快，frame模式有导航栏和工具栏，能分页，运行较慢—>

height="367"

width="645"

format="html"

<!—指定嵌入报表的高度，宽度，显示格式—>

frameborder="false"

<!—指定嵌入报表的边界—>

isHostPage="false"

isReportlet="true"

bookmark="TopSalesChart"

<!—指定嵌入报表的书签部分—>

showParameterPage="false"

<!—不显示提示输入参数对话框—>

>

部署jsp，birtdesign文件，运行效果如下，初始页面如下：

分别输入10,30，提交刷新：

下面我们用这种jsp内置多个frame的方式来实现一个列表和图表的联动，图表和图表的联动。

新建报表overall2.rptdesign，空白模板，sql查询结果集

新建数据源MyDataSource，采用BIRT设计器自带的例子数据库：

驱动程序类：org.eclipse.birt.report.data.oda.sampledb.Driver (Classic Models Inc. SampleDB Driver)

Database URL：jdbc:classicmodels:sampled

用户名：ClassicModels

新建数据集OverallDataSet：

select CLASSICMODELS.PRODUCTS.PRODUCTNAME,

sum(CLASSICMODELS.ORDERDETAILS.PRICEEACH * CLASSICMODELS.ORDERDETAILS.QUANTITYORDERED) as "sales"

from CLASSICMODELS.ORDERS, CLASSICMODELS.ORDERDETAILS, CLASSICMODELS.PRODUCTS

where (CLASSICMODELS.ORDERS.ORDERNUMBER = CLASSICMODELS.ORDERDETAILS.ORDERNUMBER)

and (CLASSICMODELS.ORDERDETAILS.PRODUCTCODE = CLASSICMODELS.PRODUCTS.PRODUCTCODE)

and (CLASSICMODELS.PRODUCTS.PRODUCTLINE = 'Classic Cars')

group by CLASSICMODELS.PRODUCTS.PRODUCTNAME

在报表编辑器里新建一个1行1列的网格，在网格内插入一个1行2列的表

在表的第一列插入动态文本，表达式生成器中输入row.__rownum，或者可用列绑定为行数，在javascript脚本的onRender方法中输入以下脚本：

[javascript]  view plain copy
  1. var value1=row["PRODUCTNAME"];  
  2.   
  3. var str="<script language='JavaScript' type='text/JavaScript'>function refreshTag (paravalue){var origUrl = parent.frames['birtViewer2'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer2'].location = origUrl.substr(0, pos) + '&__overwrite=true&productname='+paravalue ;} else {parent.frames['birtViewer2'].location = origUrl+ '&__overwrite=true&productname='+ paravalue;} }</script><a href='' οnclick=' refreshTag (\""+value1+"\")'><i><u><b>" + value1 + "</b></u></i></a>";  
  4.   
  5. this.text = str;  
[javascript]  view plain copy
  1. var value1=row["PRODUCTNAME"];  
  2.   
  3. var str="<script language='JavaScript' type='text/JavaScript'>function refreshTag (paravalue){var origUrl = parent.frames['birtViewer2'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer2'].location = origUrl.substr(0, pos) + '&__overwrite=true&productname='+paravalue ;} else {parent.frames['birtViewer2'].location = origUrl+ '&__overwrite=true&productname='+ paravalue;} }</script><a href='' οnclick=' refreshTag (\""+value1+"\")'><i><u><b>" + value1 + "</b></u></i></a>";  
  4.   
  5. this.text = str;  


说明如下：动态文本为显示名称为row["PRODUCTNAME"]的超链接，添加的鼠标单击事件响应为javascript函数refreshTag，为什么用parent.frames['birtViewer2']，不同于jsp的input输入框调用的javascript脚本是直接放置在jsp的顶级document中的，图表和列表的设计先放置到了一个frame中了。

第二列绑定dataSetRow["sales"]

做适当美化，修改属性，插入表头标签，设置背景色，删除表尾，设置单元格格式，加上边框

预览效果如下图：

鼠标事件现在还不能起作用，因为尚未嵌入到jsp中。

新建报表JDBC报表类型，SQL查询类型的空白模板报表trend1.rptdesign，

数据源MyDataSource，采用BIRT设计器自带的例子数据库：

驱动程序类：org.eclipse.birt.report.data.oda.sampledb.Driver (Classic Models Inc. SampleDB Driver)

Database URL：jdbc:classicmodels:sampled

用户名：ClassicModels

数据集TrendDataSet，查询SQL如下：

select CLASSICMODELS.PRODUCTS.PRODUCTNAME,

(CLASSICMODELS.ORDERDETAILS.PRICEEACH * CLASSICMODELS.ORDERDETAILS.QUANTITYORDERED) as sales,

CLASSICMODELS.ORDERS.ORDERDATE

from CLASSICMODELS.ORDERS,

CLASSICMODELS.ORDERDETAILS,

CLASSICMODELS.PRODUCTS

where (CLASSICMODELS.PRODUCTS.PRODUCTCODE = CLASSICMODELS.ORDERDETAILS.PRODUCTCODE)

and (CLASSICMODELS.ORDERS.ORDERNUMBER = CLASSICMODELS.ORDERDETAILS.ORDERNUMBER)

and (CLASSICMODELS.PRODUCTS.PRODUCTNAME = ?)

报表参数productname，字符串静态文本框，

参数：productname

数据类型：字符串

显示类型：文本框

默认值：1992 Ferrari 360 Spider red（此默认值为overall2.rptdesign报表数据集OverallDataSet的数据列dataSetRow ["PRODUCTNAME"]的一个值）

绑定数据集TrendDataSet占位符和报表参数productname，如图

新建一行一列网格，在网格框内插入图表，选择图表类型为折线图，如图，

选择数据，使用以下来源的数据-TrendDataSet，类别(X)系列选择可用列绑定-图表- row["ORDERDATE"]，值(Y)系列选择可用列绑定-图表- row["SALES"]，如图。

在图表格式中定制X轴，把标签顺时针旋转45度，如图，

同上例，在XML中去掉页脚的日期，完成。

<page-footer>

      <text id="3">

           <property name="contentType">html</property>

              <text-property name="content"><![CDATA[<value-of>new Date()</value-of>]]></text-property>

              </text>

</page-footer>

选择图表格式-值Y系列-交互，在系列交互中添加鼠标事件，选择事件-鼠标移过，操作-显示工具条提示，编辑工具提示文本，用表达式生成器添加如下内容"$" + row["SALES"] + " made on " + row["ORDERDATE"]，如图

添加鼠标单击事件交互，调用脚本如下：

[javascript]  view plain copy
  1. var value1=params["productname"].value;  
  2.   
  3. function refreshTag(paravalue){var origUrl = parent.frames['birtViewer3'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer3'].location = origUrl.substr(0, pos) + '&__overwrite=true&productname='+paravalue ;} else {parent.frames['birtViewer3'].location = origUrl+ '&__overwrite=true&productname='+ paravalue;} }  
  4.   
  5. refreshTag(params["productname"].value);  
[javascript]  view plain copy
  1. var value1=params["productname"].value;  
  2.   
  3. function refreshTag(paravalue){var origUrl = parent.frames['birtViewer3'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer3'].location = origUrl.substr(0, pos) + '&__overwrite=true&productname='+paravalue ;} else {parent.frames['birtViewer3'].location = origUrl+ '&__overwrite=true&productname='+ paravalue;} }  
  4.   
  5. refreshTag(params["productname"].value);  

说明如下：调用脚本内可以定义javascript函数，表达式生成器最终顺序执行

新建报表JDBC报表类型，SQL查询类型的空白模板报表customers.rptdesign，

数据源MyDataSource，采用BIRT设计器自带的例子数据库：

驱动程序类：org.eclipse.birt.report.data.oda.sampledb.Driver (Classic Models Inc. SampleDB Driver)

Database URL：jdbc:classicmodels:sampled

用户名：ClassicModels

数据集CustomersDataSet，查询SQL如下：

select CLASSICMODELS.CUSTOMERS.CUSTOMERNAME,

CLASSICMODELS.ORDERS.ORDERDATE,

(CLASSICMODELS.ORDERDETAILS.PRICEEACH * CLASSICMODELS.ORDERDETAILS.QUANTITYORDERED) as sales

from 

CLASSICMODELS.CUSTOMERS, 

CLASSICMODELS.PRODUCTS, 

CLASSICMODELS.ORDERS,

CLASSICMODELS.ORDERDETAILS

where

(CLASSICMODELS.PRODUCTS.PRODUCTCODE = CLASSICMODELS.ORDERDETAILS.PRODUCTCODE)

and (CLASSICMODELS.ORDERDETAILS.ORDERNUMBER = CLASSICMODELS.ORDERS.ORDERNUMBER)

and (CLASSICMODELS.ORDERS.CUSTOMERNUMBER = CLASSICMODELS.CUSTOMERS.CUSTOMERNUMBER)

and (CLASSICMODELS.PRODUCTS.PRODUCTNAME = ?)

数据集DistributionDataSet，查询SQL如下：

select CLASSICMODELS.CUSTOMERS.CUSTOMERNAME,

sum(CLASSICMODELS.ORDERDETAILS.PRICEEACH * CLASSICMODELS.ORDERDETAILS.QUANTITYORDERED) as sales

from CLASSICMODELS.CUSTOMERS, CLASSICMODELS.ORDERS, CLASSICMODELS.ORDERDETAILS, CLASSICMODELS.PRODUCTS

where (CLASSICMODELS.ORDERS.CUSTOMERNUMBER = CLASSICMODELS.CUSTOMERS.CUSTOMERNUMBER)

and (CLASSICMODELS.ORDERDETAILS.ORDERNUMBER = CLASSICMODELS.ORDERS.ORDERNUMBER)

and (CLASSICMODELS.PRODUCTS.PRODUCTCODE = CLASSICMODELS.ORDERDETAILS.PRODUCTCODE)

and (CLASSICMODELS.PRODUCTS.PRODUCTNAME = ?)

group by CLASSICMODELS.CUSTOMERS.CUSTOMERNAME

order by CLASSICMODELS.CUSTOMERS.CUSTOMERNAME

报表参数productname，字符串静态文本框，

参数：productname

数据类型：字符串

显示类型：文本框

默认值：1992 Ferrari 360 Spider red（此默认值为overall2.rptdesign报表数据集OverallDataSet的数据列dataSetRow ["PRODUCTNAME"]的一个值）

绑定CustomersDataSet和DistributionDataSet数据集的占位符和报表参数。

在编辑器区域，新建一个2行1列的网格，第一个网格插入一个饼图，如图10-30，第二个网格插入一个面积图如图10-31，


饼图选择数据，使用以下来源的数据- DistributionDataSet，类别(X)系列选择可用列绑定-图表- row["CUSTOMERNAME"]，值(Y)系列选择可用列绑定-图表- row["SALES"]，如图10-32

面积图选择数据，使用以下来源的数据- CustomersDataSet，类别(X)系列选择可用列绑定-图表- row["ORDERDATE"]，值(Y)系列选择可用列绑定-图表- row["SALES"]，如图10-32，

在饼图的图表格式-值Y系列-交互，在系列交互中添加鼠标事件，选择事件-鼠标单击，操作是调用脚本，脚本内容是alert(valueData)，如图

预览的效果如图，

建完这三个报表之后，我们新建test6.jsp，把报表嵌入到jsp的frame中，如下

[html]  view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2. pageEncoding="ISO-8859-1"%>  
  3. <%@ taglib uri="/birt.tld" prefix="birt" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  8.     <meta http-equiv="Content-Language" content="en-us">  
  9.     <title>BIRT JSP Tag Lib Mashup</title>  
  10.     <style>  
  11.         .pageHeader {  
  12.             position: absolute;  
  13.             width: 1020px;  
  14.             text-align: center;  
  15.             color: #224499;  
  16.             font-size: xx-large;  
  17.             font-weight: bold;  
  18.         }  
  19.           
  20.         .mashupContainer {  
  21.             position: absolute;  
  22.             font-family: Verdana, Tahoma, Arial;  
  23.             font-size: 11px;  
  24.             border: 1px solid #87AFDA;  
  25.             margin: 3px;  
  26.         }  
  27.           
  28.         .mashupTitle {  
  29.             position: absolute;  
  30.             background: #D4E6FC;  
  31.             font-size: 14px;  
  32.             font-weight: bold;  
  33.             color: #224499;  
  34.             padding: 3px;  
  35.             border-bottom: 1px solid #87AFDA;  
  36.         }  
  37.           
  38.         .mashupContent {  
  39.             position: absolute;  
  40.             padding: 3px;  
  41.         }  
  42.     </style>  
  43. </head>  
  44. <body>  
  45.     <div class="mashupContainer" id="salesChartContainer" style="top: 50px; left: 20px; width: 655px; height: 400px;">  
  46.         <div class="mashupTitle" style="width: 99.1%; height: 20px;">overall Chart</div>  
  47.         <div class="mashupContent" id="overallDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">  
  48.             <birt:viewer id="birtViewer"  
  49.                 reportDesign="overall2.rptdesign"  
  50.                 baseURL="<%= request.getContextPath( )%>"  
  51.                 pattern="run"  
  52.                 height="367"  
  53.                 width="645"  
  54.                 format="html"  
  55.                 frameborder="false"  
  56.                 isHostPage="false"  
  57.                 isReportlet="true"  
  58.                 showParameterPage="false"  
  59.             >  
  60.             </birt:viewer>  
  61.         </div>  
  62.     </div>  
  63.   
  64.     <div class="mashupContainer" id="salesChartContainer" style="top: 50px; left: 700px; width: 655px; height: 400px;">  
  65.         <div class="mashupTitle" style="width: 99.1%; height: 20px;">trend Chart</div>  
  66.         <div class="mashupContent" id="trendDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">  
  67.             <birt:viewer id="birtViewer2"  
  68.                 reportDesign="trend1.rptdesign"  
  69.                 baseURL="<%= request.getContextPath( )%>"  
  70.                 pattern="run"  
  71.                 height="367"  
  72.                 width="645"  
  73.                 format="html"  
  74.                 frameborder="false"  
  75.                 isHostPage="false"  
  76.                 isReportlet="true"  
  77.                 showParameterPage="false"  
  78.             >  
  79.             </birt:viewer>  
  80.         </div>  
  81.     </div>  
  82.   
  83.     <div class="mashupContainer" style="top: 500px; left: 20px; height: 650px; width: 1000px;">  
  84.         <div class="mashupTitle" style="width: 99.4%; height: 20px;">customers</div>  
  85.         <div class="mashupContent" id="customersDiv" style="top: 25px; width: 99%; height: 40px; align: middle; text-align: center;">  
  86.             <!-- This example uses the same report design, but this can a different rptdesign file than used above -->  
  87.             <birt:viewer id="birtViewer3"  
  88.                 reportDesign="customers.rptdesign"  
  89.                 baseURL="<%= request.getContextPath( )%>"  
  90.                 pattern="run"  
  91.                 height="615"  
  92.                 width="990"  
  93.                 format="html"  
  94.                 frameborder="false"  
  95.                 isHostPage="false"  
  96.                 isReportlet="true"  
  97.                 showParameterPage="false"  
  98.             >  
  99.             </birt:viewer>  
  100.         </div>  
  101.     </div>  
  102. </body>  
  103. </html>  
[html]  view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2. pageEncoding="ISO-8859-1"%>  
  3. <%@ taglib uri="/birt.tld" prefix="birt" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  8.     <meta http-equiv="Content-Language" content="en-us">  
  9.     <title>BIRT JSP Tag Lib Mashup</title>  
  10.     <style>  
  11.         .pageHeader {  
  12.             position: absolute;  
  13.             width: 1020px;  
  14.             text-align: center;  
  15.             color: #224499;  
  16.             font-size: xx-large;  
  17.             font-weight: bold;  
  18.         }  
  19.           
  20.         .mashupContainer {  
  21.             position: absolute;  
  22.             font-family: Verdana, Tahoma, Arial;  
  23.             font-size: 11px;  
  24.             border: 1px solid #87AFDA;  
  25.             margin: 3px;  
  26.         }  
  27.           
  28.         .mashupTitle {  
  29.             position: absolute;  
  30.             background: #D4E6FC;  
  31.             font-size: 14px;  
  32.             font-weight: bold;  
  33.             color: #224499;  
  34.             padding: 3px;  
  35.             border-bottom: 1px solid #87AFDA;  
  36.         }  
  37.           
  38.         .mashupContent {  
  39.             position: absolute;  
  40.             padding: 3px;  
  41.         }  
  42.     </style>  
  43. </head>  
  44. <body>  
  45.     <div class="mashupContainer" id="salesChartContainer" style="top: 50px; left: 20px; width: 655px; height: 400px;">  
  46.         <div class="mashupTitle" style="width: 99.1%; height: 20px;">overall Chart</div>  
  47.         <div class="mashupContent" id="overallDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">  
  48.             <birt:viewer id="birtViewer"  
  49.                 reportDesign="overall2.rptdesign"  
  50.                 baseURL="<%= request.getContextPath( )%>"  
  51.                 pattern="run"  
  52.                 height="367"  
  53.                 width="645"  
  54.                 format="html"  
  55.                 frameborder="false"  
  56.                 isHostPage="false"  
  57.                 isReportlet="true"  
  58.                 showParameterPage="false"  
  59.             >  
  60.             </birt:viewer>  
  61.         </div>  
  62.     </div>  
  63.   
  64.     <div class="mashupContainer" id="salesChartContainer" style="top: 50px; left: 700px; width: 655px; height: 400px;">  
  65.         <div class="mashupTitle" style="width: 99.1%; height: 20px;">trend Chart</div>  
  66.         <div class="mashupContent" id="trendDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">  
  67.             <birt:viewer id="birtViewer2"  
  68.                 reportDesign="trend1.rptdesign"  
  69.                 baseURL="<%= request.getContextPath( )%>"  
  70.                 pattern="run"  
  71.                 height="367"  
  72.                 width="645"  
  73.                 format="html"  
  74.                 frameborder="false"  
  75.                 isHostPage="false"  
  76.                 isReportlet="true"  
  77.                 showParameterPage="false"  
  78.             >  
  79.             </birt:viewer>  
  80.         </div>  
  81.     </div>  
  82.   
  83.     <div class="mashupContainer" style="top: 500px; left: 20px; height: 650px; width: 1000px;">  
  84.         <div class="mashupTitle" style="width: 99.4%; height: 20px;">customers</div>  
  85.         <div class="mashupContent" id="customersDiv" style="top: 25px; width: 99%; height: 40px; align: middle; text-align: center;">  
  86.             <!-- This example uses the same report design, but this can a different rptdesign file than used above -->  
  87.             <birt:viewer id="birtViewer3"  
  88.                 reportDesign="customers.rptdesign"  
  89.                 baseURL="<%= request.getContextPath( )%>"  
  90.                 pattern="run"  
  91.                 height="615"  
  92.                 width="990"  
  93.                 format="html"  
  94.                 frameborder="false"  
  95.                 isHostPage="false"  
  96.                 isReportlet="true"  
  97.                 showParameterPage="false"  
  98.             >  
  99.             </birt:viewer>  
  100.         </div>  
  101.     </div>  
  102. </body>  
  103. </html>  


 

部署到服务器上，运行效果如下：

切记，这三个报表的参数一定要有默认值，否则在页面初始化的时候会报出缺失参数值的错误。

单击左上的列表的超链接，右上会根据商品名称刷新，单击右上的折线图的点，下面的饼图和面积图都会刷新。如果在javascript脚本中做多个frame的刷新，反映到页面上就是一个鼠标事件刷新了多个frame。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值