IOS报表解决方案 使用开源组件iChartjs（一）
前几天写了android系统使用ichartjs简单实现移动端图表的例子，怎么能少了乔帮主的ios系统呢 实现效果更炫的ichartjs图表
我们来看看如何实现呢
同android系统一样 使用UIWebView就可以实现 ios对html5的支持也很完美
首先来看效果图
实现效果是首页面展示图标的列表 选择后进入图表详细 来展示本地的图标文件 即为html文件
用的是iphone的模拟器 ios的UIWebView缩放效果还是很不错的 可以自由的进行缩放
下面来看实现：
首先看下项目结构图
将html js文件放在资源文件包内 这里主要用到ichart-1.0.min.js
首界面ichartjsViewController 继承自UIViewController 使用UITableView 所以需要实现UITableViewDataSource, UITableViewDelegate 两个协议
初始化UITableView
tableViewMain = [[UITableView alloc] initWithFrame:CGRectMake(0, 50, 320, 420) style:UITableViewStyleGrouped];
// tableViewMain.style = UITableViewStyleGrouped;
[tableViewMain setDelegate:self];
[tableViewMain setDataSource:self];
[self.view addSubview:tableViewMain];
因为这个只有一个分组 所以直接可以写死sectionName
- (NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
return @"图表Demo";
}
- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return dataArray.count;
}
- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier] autorelease];
}
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
cell.text = [dataArray objectAtIndex:indexPath.row ];
NSLog(@"cell value === %@",[dataArray objectAtIndex:indexPath.row ]);
return cell;
}
实现协议的方法 加载UITableView的数据
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
设置Cell的样式 显示详细点击按钮 点击事件代码如下
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath{
DetailViewController *detailVC = [[DetailViewController alloc] init];
NSString *test = @"test";
if(indexPath.row == 0){
detailVC.charttype = 0;
test = @"面积图报表";
}
if(indexPath.row == 1){
detailVC.charttype = 1;
test = @"柱状图报表";
}
detailVC.navigationItem.title = test;
[self.navigationController pushViewController:detailVC animated:YES];
}
点击进入详细的ViewDetailViewController 通过
detailVC.charttype = 0;
判定传递图表类型
图表展示界面 只需初始化UIWebView 并加载本地HTML即可 初始化代码如下//创建UIWebView
UIWebView *WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];
[WebView setUserInteractionEnabled:YES];
WebView.scalesPageToFit =YES;
[WebView setBackgroundColor:[UIColor clearColor]];
[WebView setOpaque:NO];//使网页透明
WebView.delegate = self;
if(charttype==0){
NSString *path = [[NSBundle mainBundle] pathForResource:@"mianji_chart.html" ofType:nil];
[WebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath: path]]];
}else{
NSString *path = [[NSBundle mainBundle] pathForResource:@"zhuzhuang_chart.html" ofType:nil];
[WebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath: path]]];
}
大功告成 这样静态的图表界面就展示出来了 像上面的效果图一样 可以随意进行缩放
这里需要引入ichart-1.0.min.js 但是需要注意一点 XCode会自动编译.js文件的 这个再XCode左侧 issue navigator视图中就能看到黄叹号提示 js编译有警告
如果js被编译 会导致js代码不能正常执行的 所以这里要设置ichart-1.0.min.js为不自动编译的文件 需要在targets视图中进行配置
不同版本的XCode配置不一样 这是方法可以参考http://blog.csdn.net/lovenjoe/article/details/7383376 来进行
我的XCode版本4.3.2 配置如下
/
在项目配置视图中 选择targets --》 Build Phases 详细配置方式就可以参考刚才博客的介绍了 这里不作详细说明
OK 下面是demo源码 可以下载作参考 Demo项目源码下载
下面会继续深入学习通过UIWebView进行js调用来动态更新图表数据的实现 很快就会跟大家分享的~~~~