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

核心提示： 图片看不清楚？请点击这里查看原图（大图），要开始创建该用户界面，使用 Google Charts、Ajax 和 Project Zero（WebSphere sMash）创建精巧的 mashup(7)，首先必须创建 chart.maker 应用程序与 zero.charts 应用程序之间的一个依

　　图片看不清楚？请点击这里查看原图（大图）。

要开始创建该用户界面，首先必须创建 chart.maker 应用程序与 zero.charts 应用程序之间的一个依赖关系。可以通过将 zero:zero.charts 添加到 /chart.maker/config/ivy.xml 实现。接下来的两个小节将展示最重要的 markup 部分以及界面所需的代码。通过下载本文包含的 示例项目，并查看 chart.maker 项目，可以看到完整的 markup 和代码。

将用户输入映射为 API 输入

如图 3 所示，用于获取用户图表的表单非常简单。除了一个输入值外，该表单上的所有东西都可以很轻松地转换为所需的 JSON 格式。惟一需要额外步骤的输入是图表类型，它是由 Google Charts API 使用两个或三个字母的缩写表示的。该表单显示对图表类型（Line Graph、Bar Chart - Vertical 和 Bar Chart - Horizontal）的完整描述，因此 HTML 下拉菜单需要在这些描述与缩写（分别为 lc、bvg 和 bhg）之间映射。清单 6 展示了所需 HTML 下拉菜单的定义。您可以看到用粗体表示的图表类型代码。所有其他表单输入都是简单的文本框（<input type="text"/>）

清单 6. 用于图表类型的 HTML 下拉菜单

　　<select　id="chartType">　
　　　<option　value="lc">Line　Graph</option>　
　　　<option　value="bvg">Bar　Graph　-　Vertical</option>　
　　　<option　value="bhg">Bar　Graph　-　Horizontal</option>　
　　</select>