主题
Linux
Oracle ADF 数据可视化图形
Oracle JDeveloper 方法文档
作者： Katarina Obradovic-Sarkic，Oracle Corporation
2007 年 4 月
ADF 数据可视化组件简介
ADF 数据可视化组件是一组丰富的交互式 ADF Faces 组件，可以为数据分析提供重要的图形和表格化功能。数据可视化组件提供了以下常用特性：
- 使用数据控件选项板、JSF 可视编辑器、属性检查器和组件选项板创建设计时
- 支持将数据绑定到标准行集以及分层数据控件
入门
本文的对象为有意深入了解 DVT 组件的用户。在开始创建和使用 Data 可视化组件之前，建议您完成以下步骤：
- 查看 OTN 上 JDeveloper 的在线演示
- 完成 OTN 上的数据可视化组件教程
- 参阅针对 Oracle ADF 的 Fusion 开发人员指南中“创建数据绑定图、计量器、数据透视表、地图以及甘特图”一章。
- 参阅 ADF Faces 组件指南中“使用数据可视化组件”一章
ADF 数据可视化图形
ADF DVT 图形支持 50 多种类型，例如，条形图、饼图、直线图、散点图和股票图，可允许您以多种方式评估多个轴上的数据点。图形自 10g 后就是 JDeveloper 的一部分，现在是一个 JSF 组件。图形的新特性包括：
- 新的图形类型：漏斗图、浮动柱状图、曲线拟合
- 迅速呈现
- SVG 呈现
- 交互性：缩放、滚动、时间选择器窗口、直线和图例突出显示/淡变、动态参照线和区域
- 17 个常用图形类型的高级 JSF 图形标记和简化标记
- 用于设计时数据绑定和编辑的用户界面，包括对设计时期间实时数据的支持
本文介绍了在普通应用情形下 ADF DVT 图形的使用，并提供了示例。以下部分将向您阐释如何
- 为图形启用时间选择器
- 使用时间选择器通过一个参数化的 ADF 业务组件视图绘制详图
- 为一个系列更改颜色
- 定位或隐藏图例
- 在线形图中显示曲线
- 在饼图中创建扇形
- 为扇形显示文本，而不是百分比
- 设定扇形工具提示信息的格式
- 监听图形系列上的点击事件
- 在运行时更改图形类型
1. 高级图形格式设定和时间选择器
时间选择器是可显示在任何图形上的窗口，带有时间轴（显示时间数据的轴）。用户可移动这一窗口并拖动其边缘选择时段。应用程序可以监听时间选择器事件，获取用户选定时段的新起始和终止日期。
下图显示了一个带时间选择器窗口的时间轴图示例。这一线形图显示上月每天进入服务中心的服务请求的数量。
创建带时间选择器的主图形
要创建上面带时间轴的线形图，请完成以下步骤：
1. 下载 SRDemo 模式。
2. 创建新的 Fusion Web Application.
3. 在 Model 项目中，创建新的 View 对象，命名为“Master”，使用以下 SQL 查询返回每天的服务请求数量：
select trunc(request_date) "Incident Date", count(svr_id) "Num SRs Opened" from service_requests group by trunc(request_date) order by trunc(request_date)
4. 在 ViewController 项目中，创建一个新 JSPX 页面。选择在您的页面上名为 SampleGraph 的管理 bean 中公开 UI 组件。您要使用管理 bean 创建时间选择器监听器方法。
5. 将数据控件 Master 拖放到页面上，选择创建 Advanced 图形。在 Graph Binding 对话框中，针对 Numeric Value 选择选择显示 NumSrsOpened，针对 Group Attribute 选择 IncidentDate。
设定主图形的格式
1. 在 Property Inspector 中，在 Common 属性下，将 Graph 类型更改为 Line（“LINE_VERT_ABS”）。
2. 在 Appearance 下，在 Style 部分将图形样式更改为 Comet，在 Image 将图像格式更改为 Flash。
3. 要在图形上显示曲线，从 Component Palette -> ADF Data Visualization -> Graph -> General 选项卡中插入标记 dvt:seriesSet 作为 dvt:graph 标记的子项。使用 Property Inspector，将默认的标记类型更改为 MT_CURVE_LINE。
4. 要更改线的系列颜色，插入 dvt:series 标记作为 dvt:seriesSet 标记的子项。使用 Property Inspector，将系列的颜色更改为 #FDB026。
5. 要在底部显示图例，从 Component Palette -> ADF Data Visualization -> Graph -> General 插入 dvt:legendArea 标记。使用 Property Inspector 将位置属性设为 LAP_BOTTOM。
在主图形上启用时间选择器
1. 将 dvt:timeSelector 标记插入为 dvt:graph 标记的子项。使用 Property Inspector，指定 dvt:timeSelector 标记的以下属性：
<dvt:timeSelector id="timeSelector1"
mode="EXPLICIT"
explicitStart="#{sampleGraph.startDate}"
explicitEnd="#{sampleGraph.endDate}"
borderColor="#313675"
fillColor="#33FFFFFF"/>
2. 使用 Property Inspector 设置以下属性，向图形中添加时间选择器：
timeSelectorListener="#{sampleGraph.processTimeSelector}"
这里提供了主图形的完整代码：
<dvt:graph id="master" graphType="LINE_VERT_ABS"
value="#{bindings.master1Graph.graphModel}"
stylePath="Comet" imageFormat="FLASH"
timeSelectorListener="#{sampleGraph.processTimeSelector}">
<dvt:timeSelector id="timeSelector1"
mode="EXPLICIT"
explicitStart="#{sampleGraph.startDate}"
explicitEnd="#{sampleGraph.endDate}"
borderColor="#313675"
fillColor="#33FFFFFF"/>
<dvt:legendArea position="LAP_BOTTOM"/>
<dvt:seriesSet defaultMarkerType="MT_CURVE_LINE">
<dvt:series id="0" color="#FDB026"/>
</dvt:seriesSet>
</dvt:graph>
创建详细图形
1. 在 Model 项目中，创建一个新 View 对象，命名为“SRsByProduct”，使用以下 SQL 查询根据给定时间段中突发事件数量返回排名前 5 的商品名：
select * from (select products.name "Product", count(products.prod_id) "Num Incidents" from products
join service_requests on products.prod_id = service_requests.prod_id
where service_requests.request_date >= :start_date and service_requests.request_date <= :end_date
group by products.name order by count(products.prod_id) desc) where rownum < 6
定义 start_date 和 end_date 作为 Date 类型的变量。
将数据控件 SRsByDate 拖放到页面上，选择创建 Pie 图形。
3. 在 Graph Binding 对话框，针对 Numeric Value 选择显示 NumIncidents，针对 Group Attribute 选择 Product。
设定详图的格式并创建扇形
详图是一个饼图，它基于服务事件的数量显示 5 大产品。
1. 要创建第一个扇形以突出显示服务请求最多的产品，将 dvt:seriesSet 拖入页面作为 dvt:pieGraph 的子项。将 dvt:series 标记拖入页面作为 dvt:seriesSet 的子项。使用 Property Inspector，将 pieSliceExplode 属性设为 100。
2. 使用 Property Inspector，将饼图的 threeDEffect 设为 True，imageFormat 设为 FLASH，tylePath 设为 Comet。将 partialTriggers 属性设为“master”，Master 图的 ID。
3. 从 Component Palette 的 ADF Data Visualization -> Graph -> Graph Type-Specific 下，插入 dvt:sliceLabel 标记作为 dvt:pieGraph 标记的子项。使用 Property Inspector，将 textType 更改为 LD_TEXT。这将确保扇形标签将显示产品名称而不是百分比值（默认）。
4. 从 Component Palette 的 ADF Data Visualization -> Shared Child Tags 下，插入 dvt:numberFormat 标记作为 dvt:sliceLabel 标记的子项。使用 Property Inspector，将 decimalDigit 属性设为 0。
5. 从 Component Palette 的 ADF Data Visualization -> Graph -> General 下，插入 dvt:legendArea 标记作为 dvt:pieGraph 标记的子项。将渲染属性设为“false”。
详图形应如下所示：
这里提供了详图的完整代码：
<dvt:pieGraph id="pieGraph" stylePath="Comet"
imageFormat="FLASH" threeDEffect="true"
value="#{bindings.SRsByProduct1.graphModel}"
partialTriggers="master">
<dvt:seriesSet>
<dvt:series id="0" pieSliceExplode="100"/>
</dvt:seriesSet>
<dvt:sliceLabel textType="LD_TEXT">
<dvt:numberFormat decimalDigit="0"/>
</dvt:sliceLabel>
<dvt:legendArea rendered="false"/>
</dvt:graph>
创建时间选择器监听器
当时间选择器窗口移至主图上时，时间选择器监听器将接收事件，将新的起始和终止日期传送至详图，并执行详图绑定以获取新数据。要创建时间选择器监听器，添加以下代码至辅助 bean SampleGraph.java：
public void processTimeSelector(TimeSelectorEvent event) throws AbortProcessingException
{
Date sdate = new Date(event.getStartTime());
Date edate = new Date(event.getEndTime());
oracle.jbo.domain.Date startDate = new oracle.jbo.domain.Date(sdate );
oracle.jbo.domain.Date endDate = new oracle.jbo.domain.Date(edate);
JUCtrlAttrsBinding sd = (JUCtrlAttrsBinding)_bindings.get("start_date");
JUCtrlAttrsBinding ed = (JUCtrlAttrsBinding)_bindings.get("end_date");
sd.setInputValue(startDate);
ed.setInputValue(endDate);
try {
JUCtrlActionBinding actionBinding = (JUCtrlActionBinding) _bindings.get("ExecuteWithParams1");
actionBinding.execute();
}
catch(Exception e) {
System.out.println("Error executing the binding with new dates: " + e);
}
}
2. 如何点击图形系列和执行动作
应用程序通常要跟踪用户是否点击了图形系列，并根据点击的位置来执行动作。
1. 要为图形点击事件创建监听器，请在应用程序的辅助 bean 中（如以上使用的 SampleGraph.java 示例）添加以下方法：
public void processClick(ClickEvent event)
{
ComponentHandle handle = event.getComponentHandle();
if (handle instanceof DataComponentHandle)
{
DataComponentHandle dhandle = (DataComponentHandle)handle;
// Get the value displayed in the series
System.out.println("Value: " + dhandle.getValue(DataComponentHandle.UNFORMATTED_VALUE));
// Get the series attributes
Attributes [] seriesInfo = dhandle.getSeriesAttributes();
if(seriesInfo != null)
{
for(Attributes attrs: seriesInfo)
{
System.out.println("Series value: " + attrs.getValue(Attributes.LABEL_VALUE));
System.out.println("Series name: " + attrs.getValue(Attributes.LABEL_ATTRIBUTE));
System.out.println("Series value id: " + attrs.getValue(Attributes.ID_VALUE));
System.out.println("Series name id: " + attrs.getValue(Attributes.ID_ATTRIBUTE));
}
}
// Get the group attributes
Attributes [] groupInfo = dhandle.getGroupAttributes();
if(groupInfo != null)
{
for(Attributes attrs: groupInfo)
{
System.out.println("Group value: " + attrs.getValue(Attributes.LABEL_VALUE));
System.out.println("Group name: " + attrs.getValue(Attributes.LABEL_ATTRIBUTE));
}
}
}
}
2. 设置图形标记上的点击监听器：
clickListener="#{sampleGraph.processClick}"
3. 如何在运行时更改图形类型
要在运行时更改图形类型，可使用高级图形，将 graphType 属性绑定到辅助 bean。然后在运行时可以使用任何 ADF Faces UI 控件更改图形类型属性。
1. 按上面“创建主图”中的步骤从 Data Control 面板创建图形。
2. 将 graphType 属性绑定到辅助 bean，如下所示：
graphType="#{sampleGraph.graphType}"
3. 在图上将 partialTriggerts 属性设定为在运行时控制图形类型的 UI 控件的 ID：
partialTriggers="graphTypeChoice"
3. 图形代码应如下所示：
<dvt:graph id="graph1"
value="#{bindings.master1.graphModel}"
graphType="#{sampleGraph.graphType}"
partialTriggers="graphTypeChoice" />
4. 图形类型可由任何 UI 控件控制。在本示例中我们将使用一个简单的选择控件。
从 Component Palette -> ADF Faces 插入 af:selectOneChoice 组件到页面。将 autoSubmit 属性设为“true”，将 id 属性设为“graphTypeChoice”。为 af:selectOneChoice 创建以下标签/值选项:
- Vertical Bar, BAR_VERT_CLUST
- Line, LINE_VERT_ABS
- Area, AREA_VERT_ABS
- Horizontal Bar, BAR_HORIZ_CLUST
af:selectOneChoice 的代码应如下所示：
<af:selectOneChoice label="Graph Type" value="#{sampleGraph.graphType}"
autoSubmit="true" id="graphTypeChoice">
<af:selectItem label="Vertical Bar" value="BAR_VERT_CLUST"/>
<af:selectItem label="Line" value="LINE_VERT_ABS"/>
<af:selectItem label="Area" value="AREA_VERT_ABS"/>
<af:selectItem label="Horizontal Bar" value="BAR_HORIZ_CLUST"/>
</af:selectOneChoice>
5. 在辅助 bean SampleGraph.java 中，添加 graphType 属性的访问器方法，如下所示：
public String getGraphType() {
return m_graphType;
}
public void setGraphType(String type) {
m_graphType = type;
}
String m_graphType;
6. 运行页面，使用选择控件在运行时更改图形类型：
如何获得更多信息
要了解更多使用数据可视化组件的信息，请参阅针对 Oracle ADF 的 Fusion 开发人员指南中的章节“创建数据绑定图、计量器、数据透视表、地图以及甘特图”、ADF Faces 组件指南中的章节“使用数据可视化组件”以及本文“入门”部分中列出的其他资源。
Printer View