使用 Google Charts、Ajax 和 Project Zero（WebSphere sMash）创建精巧的 mashup

核心提示： 创建示例项目为了展示您的工作，您需要创建两个项目：一个存放 Groovy 包装器代码，使用 Google Charts、Ajax 和 Project Zero（WebSphere sMash）创建精巧的 mashup(2)，另一个用于存放示例 Ajax UI，您应该创建两个 Zero 应用程序

创建示例项目

为了展示您的工作，您需要创建两个项目：一个存放 Groovy 包装器代码，另一个用于存放示例 Ajax UI。您应该创建两个 Zero 应用程序 — 一个名为 zero.charts，另一个名为 chart.maker — 以分别存放 Groovy 代码和 Ajax 代码。这两个项目是分离的，以便允许不同的应用程序重用 Groovy 代码。您将从 zero.charts 应用程序中开始。

在 Groovy 中生成图表 URL

使用 Groovy 简化图表创建的第一步是定义用于指定图表细节的数据结构。您不会使用 Google Charts 所用的原始参数名称，而是用 JSON 定义一个更详细的数据结构；使用 JSON 意味着可以依赖标准数据类型（例如实际的整数数组，而不是包含以逗号分隔的串行化的整数字符串），并且更容易看到什么值被传递给图表生成器。清单 1 展示了 Ajax 客户机与 Groovy 脚本之间的通信将使用的数据结构。

清单 1. 使用 JSON 的示例图表定义

　　{　
　　　　title:　"Sales　for　1H　2008",　
　　　　type:　"bvg",　
　　　　height:　300,　
　　　　width:　300,　
　　　　data:　[34,　21,　28,　19,　48,　40],　
　　　　xaxis:　["Jan",　"Feb",　"Mar",　"Apr",　"May",　"Jun"],　
　　　　yaxis:　[0,　40]　
　　}　

在开发期间，可以使用 FireBug 或简单的 JavaScript 警告等工具检查清单 1 中所示的 JSON 对象。与 http://chart.apis.google.com/chart?cht=bvg&chs=500x600&chtt=Sales%20for%201Q%202008&chd=t:134,219,188&chxt=x,y&chxl=0:|Jan|Feb|Mar|1:||300 这样冗长的字符串相比，这样的结构更容易调试和验证。