练习 3.4:添加图组件

在开始之前,必须先完成练习 3.3:添加树组件

插入并配置图组件

  1. 插入“图”组件:
    1. 确保 JSP 文件已打开。选择“选项卡式面板”中标记为的面板。
    2. 在“选用板”中,通过单击“Faces Client 组件”抽屉来打开该抽屉。
    3. 组件拖放到“设计”视图中的“图”面板上。
  2. 配置“图”组件的属性。“图”组件是一个使用 Macromedia Flash 技术的非常丰富的组件。其行为与您迄今为止已经看到的任何其它 Faces Client 组件相似。不同之处在于,在浏览器内部,不是使用 JavaScript 和 DHTML 来显示控件,而是使用 Macromedia Flash 技术。因此,尽管“图”控件不是高端图表控件,但是它允许您设置许多数据系列,并且可以选择饼图、条形图和折线图。对于本教程,设置下列属性:
    1. 确保已经将“选项卡式面板”的宽度高度分别设置为 700 像素和 250 像素。各个维都适用于整个图表区,包括图注和标题。
    2. 在 odc:graphDraw 选项卡上,对于显示图表属性选择所有复选框,以启用可以使用的所有三种图表类型(饼图条形图折形图)。
    3. 最初显示字段中选择条形图
    4. 选择显示图注复选框。
    5. 输入投资组合作为图表标题
    6. 属性视图左边的“显示选项”下面,对于 X 轴显示选项输入股票
    7. 对于 Y 轴显示选项输入美元
  3. 将数据绑定至“图”组件。“图”控件使用的数据是具有相同 X 轴信息的一个或多个系列。用一个表最容易说明这种情况。假定有一个数据结构,它是股票购买信息记录的列表。每个对象具有三种属性:股票名称、购买数量和购买价格。可以按如下所示使数据可视化:

    股票

    数量

    价格

    IBM

    100

    58

    IBM2

    250

    130

    IBM3

    1000

    100

    IBM4

    500

    82

    要将此表绘制成图形,首先需要将列表本身作为锚点。然后,需要指定应该将哪一列用作 X 轴;最后,指出将表示每个数据系列的每一列。因此,举例来说,如果想要以图形表示四次股票购买情况,并且要并排显示数量和价格信息,则将指定数量和价格列作为数据系列。

    对于本教程,用图形来表示投资组合的内容、绑定位置属性、并排绘制每支股票的当前市值以及拥有的数量。

    1. 从“客户机数据”视图中,将 root.users.portfolios.positions 节点拖动到“图”控件上。
    2. 在“设计”视图中选择“图”控件。
    3. 属性视图的“X 轴的值”选项卡中,选择股票代码来作为 X 轴的数据。
    4. 单击属性视图中的“Y 轴的值”选项卡。您将在此处添加数据系列。
    5. 单击添加系列按钮,并配置每个数据系列。对于本教程,从“添加系列”窗口中的“值”下拉列表中选择价格。将系列名称字段更改为价格。遵循相同的步骤来为数量创建另一个数据系列。
    6. 输入每个系列的名称,它们在图形上将显示为标签。

    注意:如果数据有重复的行,例如,给定股票有多个数据点,则可以通过选择“将值分组”复选框来将相似的数据元素集中在一起。

    如果您正在对值进行分组,则需要选择使用哪个函数来将组合的两个或多个数据元素集中在一起。系统支持一些基本函数,例如,sum、average、min、max, first 和 last。如果您只有两个数据系列,则可以选择用一个图形同时表示它们,但是要在图形的两侧分别绘制它们的 Y 轴标签,这样就有左 Y 轴和右 Y 轴。选择 SUM 函数以组合数据,原因是同一支股票具有多个条目。在“数据格式”面板中,选择每个数据系列的格式。当显示实例的数字数据时,指定应该显示多少位小数是很重要的。定义格式选项的行为与它们在“图”中的行为完全相同。

“图”面板上的“图”组件

管理事件处理程序

“图”组件没有任何事件,原因是它不允许来自用户的任何输入;所有显示事件都是在内部由 Flash 控件管理的。它只对其它页面事件作出响应,并因此而更新它的显示。

编辑样式

如果需要定制“图”的外观,则编辑名为 graph.css 的缺省“级联样式表”(CSS)。在“项目导航器”中,在您的项目的 /WebContent/theme/graph.css 中提供了此文件。

现在,您可以开始进行练习 3.5:在服务器上测试了。

使用条款 | 反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.