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];}

點擊進入詳細的View DetailViewController  通過

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調用來動態更新圖表資料的實現 很快就會跟大家分享的~~~~