ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 用 IBM WebShpere Dashboard Framework 创建图表

用 IBM WebShpere Dashboard Framework 创建图表

原创 Linux操作系统 作者:genusBIT 时间:2009-04-07 14:56:00 0 删除 编辑

WebCharts3D 简介

WebCharts3D 是一个非常强大的图表设计工具,利用它用户可以根据自己的需要创建各种形式丰富的图表,诸如 Bar( 饼图 ),Pie( 柱状图 ),Gantt( 甘特图 ) 以及 Map( 地图 ) 等等。并且这些图形可以被导出为 XML 格式的文件,以方便在其他工具中使用。比如 WebSphere Dashboard Framework 中的 WebCharts 构建器便是使用这些图表的模型文件作为其创建图形的模版。

本文我们将以一个简单的饼图为例来介绍如何在 WebChart3D Designer 中创建一个 WebCharts 图表(如图 2 所示)。然后以此图表模型为基础,介绍如何使用 WebSphere Dashboard Framework 中的 WebCharts 构建器来创建具有图表功能的 Portlet 应用。


图 2. WebCharts 图表
图 2. WebCharts 图表

在 WebCharts 3D Designer 中 , 选择 File -> New,打开 WebCharts 3D 的模板页面。在这个页面中可以为将要创建的图表选择相应的模板,WebCharts 3D 为用户提供了非常丰富的图形模板,选择正确的模板可以减少你在后面图表的定制过程中的工作量,这里我们选择 Pie Chart 作为我们要创建图表的模板,如图 3 所示。


图 3. WebCharts 模板
图 3. WebCharts 模板

接下来就可以在设计页面中定制你所需要的图表属性了,下面是图表的设计界面。“Xml Style”和“Xml Model”分别提供了图表的样式模型和数据模型的视图,而“Code View”可以让用户把当前的图表生成可以用于不同平台的脚本,比如 JSP, Applet, Swing, AWT 等等。


图 4. WebChats3D 图形定制界面
图 4. WebChats3D 图形定制界面

下面我们就在 图 4 的定制界面中修改图形的显示样式。

  1. 修改图表的风格为“Solid”,选择Style. > Solid
  2. 为图表添加一组数据。缺省的图表中提供了 5 组数据,如图中的 5 种颜色所示。这里,我们添加一组新的数据并用不同的颜色来显示。

    选择 Elements > Series 将弹出对话框供用户来添加新的数据块,在这个界面中用户可以设置每一个数据块的显示属性,设置完以后并将其添加到当前的数据列表中。



    图 5. 添加数据模块
    图 5. 添加数据模块

    添加了如上图所示的扩展后,该图表便具有了显示 6 组数据的功能了。为验证其效果,切换到 Xml Model 页面。缺省情况下,WebCharts 3D 提供了 5 条示例数据。用户可以添加一条新的数据,点击“Insert Column”将新增一条数据。



    图 6. 添加一列数据
    图 6. 添加一列数据

    设置好数据的标识和数值后返回到设计页面可以看到新加的数据已经显示在图中了,如 图 7 中的蓝色数据块所示。



    图 7. 扩展后的饼图
    图 7. 扩展后的饼图

  3. 设置图形的显示风格:选择 Paint > Palette > Pastel

    这里我们只是作为一个简单的示例,设计界面中还有很多的属性可以让用户来定制。在定制完图表的显示样式后,在 Xml Style. 页面中用户可以看到该模型的 Xml 内容。我们可以将它导出到 Xml 文件中以便在 WebSphere Dashboard Framework 中使用。

  4. 设置图形的标注。

    选择 Legend > Decoration > Style. > Shadow。另外在 Legend 中选中“useMarkers”。其他的属性比如字体的大小,标注的位置等等,用户可以根据自己的需要进行设置。

    WebCharts 构建器介绍

    这一节我们将介绍如何利用 WebSphere Dashboard Framework 中的 WebCharts 构建器来创建具有图表功能的 Dashboard 应用。 IBM WebSphere Dashboard Framework 是在 IBM WebSphere Portlet Factory 基础上所做的扩展,主要提供一些有助于创建 Dashboard 应用的构建器,比如 Alert module, Annotation 以及对原有 WebCharts 构建器的增强。这一章我们将通过一个实际的例子来介绍 WebSphere Dashboard Framework 中的 WebCharts Enhanced 构建器的使用。

    1. 创建 WebSphere Portlet Factory 项目


    图 8. 创建 WebSphere Portlet Factory 项目
    图 8. 创建 WebSphere Portlet Factory 项目

    点击下一步,选择需要添加到项目中的 Feature。选择“Charting”->“GreenPoint Web Chart Builder”,如 图 9 所示。这样 WebCharts 构建器以及与该构建器有关的所有文件诸如依赖的 Java 包、模板文件以及一些图表的样式文件等都将被导入到项目中。如果用户需要其他的一些 Feature,可以选择这些 Feature 导入到项目中。对于本例子来说选择“GreenPoint Web Chart Builder”和“WebSphere Dashboard Framework”就可以了。


    图 9. 添加 Feature Set
    图 9. 添加 Feature Set

    其余的步骤与创建一般的 Portlet Factory 项目过程一样,所以这里略过,用户可以参考 WebSphere Portlet Factory 的帮助文档。

    2. 创建应用模型

    创建模型,选择New > WebSphere Portlet Factory Model。这里我们省略了具体的创建步骤,方法可以参见 WebSphere Portlet Factory 帮助文档。

    3. 添加 WebCharts Enhanced 构建器

    模型创建完以后,在 Outline 视图 中点击 添加构建器 按钮打开 Builder Palette 窗口


    图 10. Outline 视图
    图 10. Outline 视图

    Builder Palette 中选择 Web Charts – Enhanced 构建器,将在模型中创建它的一个实例,如 图 11 所示。


    图 11. 向模型中添加构建器
    图 11. 向模型中添加构建器

    下面是 Web Charts – Enhanced 构建器的配置界面,它提供了一组供用户对该构建器进行定制的输入框,比如图表生成的位置,图表的样式,图表的数据来源等等。

    首先,输入构建器的名称,作为该构建器在模型中的标识。然后在“Page Location”中选定图表生成的位置,这里我们选择在 page1 中的“namedTag”,如 图 12。(注:“page1”是模型中的一个 Import Page 构建器实例,用于向模型中添加 HTML 或 JSP 页面。在本例子中,我们以 page1 中的“namedTag“作为图表生成的位置)。关于 Page Location 的更多介绍请参见 WebSphere Portlet Factory 帮助文档。


    图 12. 设定图表在 Web 页面中位置
    图 12. 设定图表在 Web 页面中位置

    接下来,我们将开始定制图表的两个主要属性:图表的显示样式和数据模型。

    1. 显示样式

    显示样式用于定制图形的形状,比如饼图,柱状图还是雷达图等。在缺省情况下,Web Charts - Enhanced 构建器为用户提供了一些标准的图表类型(点击“Chart Type”下拉列表框)。用户可以选择这些简单的图表使用,另外如果用户希望使用自己在 WebCharts 3D Designer 中创建的图表模型,Web Charts - Enhanced 构建器也提供了这一扩展功能。选择“Provide Custom Style”将会显示用户自定义样式的输入框(“Style. Data”),这里用户可以输入自己定制的一些图形样式,如图 11。


    图 13. 设置图形的样式
    图 13. 设置图形的样式

    在本文中,我们选择前一章中创建的图表样式 WebChartsDemo.xml 作为该构建器的图表模板。首先将 WebChartsDemo.xml 导入到项目的目录 WebContent/solutions/Dashboard/ 下。然后在 Style. Data 中选择该文件,如 图 14。


    图 14. 选择图表的样式模型
    图 14. 选择图表的样式模型

    2. 数据模型

    数据模型用于定制该图表所要显示的数据内容。在“Chart Data”中输入图表的数据内容,点击右边的按钮选择数据的来源,数据可以通过模型中的一个变量或方法来得到。在本例子中,为方便演示,我们在模型中创建一个变量作为图表数据的来源,当然数据也可以来自其他地方,比如文件、数据库、Web Service 等等。首先在模型中添加一个“Variable”构建器的实例,在构建器的配置界面中选择该变量的类型为 XML,并在初始值中输入代表数据的 XML 内容,如 图 15 所示。


    图 15. 创建数据变量
    图 15. 创建数据变量

    在 WebCharts Enhanced 构建器的“Chart data”输入框输入该变量作为图表的数据来源。

    3. 图表的内容

    完成了图表的样式和数据模型的设置以后,接下来就可以设置数据如何在图表中显示,比如 X 轴、Y 轴的数据等等。在“Data Source Format”中选择前面创建的变量的数据格式。一般情况下推荐使用第一种数据格式,因为在 WebSphere Dashboard Framework 中大部分和数据有关的构建器所生成的结果都以第一种方式来存储。

    4. 图表的外部属性

    在图表属性这一部分中,用户可以设置图表的标题,图形的类型,比如 PNG、JPD、SWF、SVG、WBMP 等等。另外还可以设置图形的大小、图形的标注以及是否显示为 3D 等等。如图 16 所示。


    图 16. 设置图形的显示属性
    图 16. 设置图形的显示属性

    5. 图表的事件响应

    除了显示图形以外,Web Chart 构建器还提供了响应用户事件的功能,如图 17 所示。

    图 15. 设置图形的事件响应


    图 17. 设置图形的显示属性
    图 17. 设置图形的显示属性

    这一部分用来设置如何响应在图形上的单击事件。如果用户希望在点击图形的时候做一些特殊的动作,比如跳转到一个表格以查看相应数据块的详细内容,可以在这里设置该事件。为此,用户需要先在模型中创建一个方法(使用 Method 构建器),然后在“Method to Call”属性中输入该 Method 并设置相应的参数。方法的创建可以参见帮助文档。

    6. 设置数据的标注

    通过设置数据的标注可以指定图形在显示数据的时候如何显示它的标注。比如位置,样式,是否允许多行显示以及对其添加什么样的装饰 ( 边框,形状等 )。在此例子中我们都选择这些属性的默认值。

    部署应用

    在“Outline”视图中可以看到该模型的所有构建器实例,如图 18 所示。


    图 18. WebChartsDemo 模型
    图 18. WebChartsDemo 模型

    表 1 是对这些构建器的一个简单说明:


    表 1 模型中各构建器的说明

    名称 类型 功能
    Main Action List 模型运行的入口方法
    Page1 Imported Page 模型运行的 HTML 页面
    SampleData Variable 数据变量,存储将要在图表中显示的数据
    WebChartDemo Web Charts – Enhanced 创建 WebChart 图表,并显示在 page1 的对应位置

    运行该模型,将在 Web 页面中显示如下的图形


    图 19. 测试页面
    图 19. 测试页面

    注:关于如何搭建测试和运行环境,请参见 WebSphere Portlet Facotry 相关文档。

    其他构建器介绍

    在 WebSphere Dashboard Framework 6.1 中还有一些构建器也能创建带有图表功能的 Portlet 应用,这些构建器都是建立在 WebCharts 构建器的基础上,但是更好地集成了企业的数据信息,方便用户创建一些比较高级的图表应用。比如 Summary Drill Down 构建器、Status Page 构建器和 Map 构建器。这些构建器都是通过调用 Web Chars 构建器来实现绘制图表的功能。

    下面是一些用这些高级的构建器生成的图表样例,关于这些构建器的更详细的介绍请参考帮助文档。

    Map 构建器


    图 20. Map 构建器
    图 20. Map 构建器

    Status Page 构建器


    图 21. Status Page 构建器
    图 21. Status Page 构建器

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/14751907/viewspace-586492/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-07-04

  • 博文量
    233
  • 访问量
    436461