利用FusionCharts XT 为 iPhone 和iPad应用创建图表


利用 FusionCharts XT 为 iPhone 和 iPad 应用创建图表 为了让高层在旅途中也能浏览业务数据,企业对 iPhone 和 iPad 趋之若鹜。这些应用程序 有很多数据需要进行智能展示,但是受限于各种 iOS 图表库有限的表现力。有些图表类型非常有 限,而另外一些则缺乏视觉上的吸引力和互动性。开放源码库也没有提供足够的技术支持。那么, 你该怎么选择呢? 试一试 FusionCharts XT,它解决了所有这些问题。作为一个 JavaScript 图表库,它可以 很容易地在一个 iOS 应用中的 UIWebView 生成图表和小部件。FusionCharts XT 拥有九十多种 具备动画效果和交互性的图表类型,增强了你的 iOS 应用的视觉吸引力和功能。此外,我们提供 的专属技术支持准备随时回答您提出的任何问询。 您可以从远程 Web 服务获得数据,或者访问设备上的本地数据。这些数据需要以 FusionCharts 的 JavaScript 能够理解的 XML 或 JSON 格式进行提供。在这个系列的文章中,我 们将向你展示如何在 iOS 应用中使用 FusionCharts XT,以及如何利用来自 Web Service 的数据。 我们将创建在 UIWebView 中显示图表所需的 XML 和 HTML。 实例-- 一个使用 FusionCharts XT 展现微博数据的 iOS 应用 我们将使用 FusionCharts XT 在 UIWebView 中绘制过去七天 ‘HTML5’被提到的次数。下面是你的图表在 iPhone 中最后看上去的 样子: 要求  Xcode 3.2 或更高版本  FusionCharts XT 最新版本  JSONKit 库  您还需要访问因特网。我们将使用 Topsy API 的 searchhistogram 查询。确切的查询是 http://otter.topsy.com/searchhistogram.json?q=html5&slice=86400&period=7。 你可以运行这个查询(要翻墙),看看它返回的 JSON 数据,该数据包含了过去 7 天 ‘HTML5’被提及的次数。 如何创建图表  创建图表需要以下步骤:  在 Xcode 中创建一个基于视图(View-based)的项目  通过 Topsy 的 Otter API 获取‘HTML5’在过去七天中被提及的次数  使用 JSONKit 解析收到的 JSON 数据  为图表创建 XML 数据  创建展现图表所需的 HTML  让图表可以根据设备的方向自动翻转,让图表在设备横向或垂直时都可以铺满手机屏幕 创建 Xcode 项目 让我们打开 Xcode,创建一个基于视图的项目,保存为 FusionChartsXTiOSDemo。 我们需要把 FusionCharts XT 的 JavaScript 文件添加到我们的项目中。把下载包->Charts 中包含的 JavaScript 文件拷贝到 Xcode 项目。 我们需要稍微修改一下 Xcode 的编译过程。XCode 把 JavaScript 文件当成代码(它也应该 这么做),并尝试去编译它们。但是我们希望用这些文件在 UIWebView 中渲染我们的图表,不 需要被编译。打开 Targets 集合以及你的项目 Target。我们的 Target 的名字是 FusionChartsXTiOSDemo。打开 Copy Bundle Resources 和 Compile Sources 编译过程,选 中所有的 JavaScript 文件,把它们从编译阶段拷贝到 copy bundle 资源中。 把名为 JSONKit.h 和 JSONKit.m 的 JSONKit 文件也添加到你的项目中。XCode 现在获得 了所有必要的文件。让我们开始设计和编码吧! 设计与编码 在 FusionChartsXTiOSDemo.h 这个头文件中,添加 IBOutlet。 @property (nonatomic, retain) IBOutlet UIWebView *webView; 还有@synthesize,同时依据你的 XCode 编译选项选择 release 相应的 Property 与否。 打开项目主视图控制器 Interface Builder 文件(在 Resources 部分)。在我们的项目中这个 文件名为 FusionChartsXTiOSDemoViewController.xib。从 Interface Builder 的 UI 控件库中 拖拽一个 UIWebView 到视图中,为我们的应用添加一个 WebView 控件。 我们需要把 UIWebView 的 outlet 跟这个 UIWebView 联系起来。从 Interface Builder 的 文档窗口中,从文件的所有者通过 Ctrl+Drag 添加到 UIWebView。会弹出一个对话框,点击 webView。保存并关闭 Interface Builder。 接下来我们需要添加创建图表的数据及配置所需的属性。在 FusionChartsXTiOSDemo.h 中加入以下代码: 添加参与处理 HTTP 请求和返回数据的属性: 记得@synthesize 并对上述属性进行相应 release。 声明下列四个函数,我们将在后面对其进行定义 作为一种最佳实践,我们最好在一开始就先处理所有由于连接问题而带来的错误。为此,我 们定义一个 displayDataError 方法。我们需要创建 HTML,用简明易懂的语言在 WebView 中显 示错误信息。 我们创建了 HTML,在 WebView 中显示可能发生的网络错误或者 Topsy API 失去响应。 为了测试这个方法,我们可以拔掉网线或关掉 WiFi 来模拟一个网络错误。当你准备好以后,运 行这个项目,你应该看到如下的错误提示: 接下来,让我们看一看你 HTTP 查询,处理返回的 JSON 数据。 去掉 viewDidLoad 方法的注释,创建并执行针对 Topsy 的 API 的查询: 每次从 connection:didReceiveResponse 收到一条消息时,我们都需要重置历史数据。 让我们实现 delegate 中处理最新收到的数据的部分。 如果 NSURLConnection 在载入数据时返回一个错误,我们通过 displayDataError 方法用 简明的英语显示这个错误信息。 最后,让我们通过 JSONKit 把存储在 self.twitterData 中的数据转化为一个 Objective-C 字典(Dictionary)。一旦数据被转化完成,我们调用 createChartData::(UIInterfaceOrientation)interfaceOrientation 方法。 在 createChartData::(UIInterfaceOrientation)interfaceOrientation 方法中,我们需要遍 历这个字典,来形成我们的 XML。要注意字典中存在两个键值,名为请求(request)和响应 (response)。在请求中有一个名为 histogram 的数组,它保存了过去七天‘HTML5’被提及 的次数。我们需要在 NSArray 保存这个数组。 我们在同一段代码中遍历 histogramData,并在 XML 中生成图表数据。数组中存储了从昨 天开始过去七天的数据,我们需要相应的计算并组织数据。 在同一段代码中,我们创建显示图表所需的 HTML。在