這篇文章的重點有
- 自訂 cell
- web view 呈現 html + javascript
- NSArray 轉成 JSON String
- web view 呼叫 javascript function，傳資料給 javascript
- 動態呈現 Pie Chart
命名為 PieDemo
自訂 Cell
我們想要產生的效果如下圖
我們先著眼在 MasterViewController.m 加入幾行程式，從 Line 15 開始
@interface MasterViewController () {新加一個 ivar categories 的 array 在 ViewDidLoad 初始化資料，然後把一個 leftBarButtonItem 去掉。
NSMutableArray *_objects;
NSArray * categories;
}
@end
- (void)viewDidLoad
{
[super viewDidLoad];
categories = [NSArray arrayWithObjects:@"食",@"衣",@"住",@"行",@"娛", nil];
// Do any additional setup after loading the view, typically from a nib.
// self.navigationItem.leftBarButtonItem = self.editButtonItem;
UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(insertNewObject:)];
self.navigationItem.rightBarButtonItem = addButton;
}
接著到 insertNewObject: 隨機產生數字和隨機選一個類別
- (void)insertNewObject:(id)sender粗體字是新加的，其他部分是原本 Xcode 產生的。我們把每個 row 需要的資料放在一個 dictionary 裡面，原本的 _object 就是存這些 dictionary。其中筆者用到一個隨機產生數字的 function 為
{
if (!_objects) {
_objects = [[NSMutableArray alloc] init];
}
NSNumber * num = [NSNumber numberWithInteger:arc4random()%2000];
NSString * cat = [categories objectAtIndex:arc4random()%5];
NSDictionary * content = [NSDictionary dictionaryWithObjectsAndKeys:num, @"amount",cat ,@"cat", nil];
[_objects insertObject:content atIndex:0];
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
[self.tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
}
arc4random()再把數值包成 NSNumber 加到 dictionary content 中，也用 arc4random() % 5 隨機選了一個類別加到 content 中。
資料的部分齊全了，接下來看 cell 的部分，這個時候要打開 MainStoryboad.storyboard
選好 Table View 裡的 Cell 為 Custom 如下圖。
接著就是修改 MasterViewController.m 的程式碼了。找到 tableView:cellForRowAtIndexPath: 改成如下
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath利用 viewWithTag: 從 cell 中找到 amount 和 category label 的物件，從 _objects 中讀出相對應的值分別是 amount 和 cat 的 key 再加到 label 的 text 上面。
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
UILabel * amount = (UILabel *) [cell viewWithTag:10];
UILabel * cat = (UILabel *)[cell viewWithTag:11];
NSDictionary * object = [_objects objectAtIndex:indexPath.row];
amount.text = [NSString stringWithFormat:@"%d", [[object objectForKey:@"amount"] integerValue]];
cat.text = [object objectForKey:@"cat"];
// NSDate *object = [_objects objectAtIndex:indexPath.row];
// cell.textLabel.text = [object description];
return cell;
}
這樣一來就可以執行玩，按下一開始畫面右上的加號看看，應該會有下圖出現。
web view 呈現 html + javascript
接著我們要在Master 的左邊加上一個 item 名為 Chart，可以直接從 MainStoryboard.storyboard 從 Library 拉一個 bar button item 到 MasterViewController 的 Navigation Bar 上。如下
新的 View Controller 也會多了一個 Navigation Bar。接著在 View Controller 上拉一個 web view 上去。如下圖。
是時候為這個 View Controller 新增一個 Class 命名為 GraphViewController 是繼承自 UIViewController。其中 GraphViewController.h 的程式碼如下
#import <UIKit/UIKit.h>
@interface GraphViewController : UIViewController<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *myWebView;
@property (strong) NSMutableDictionary * sums;
@end
其中 IBOutlet myWebView 是用來連接 storyboard 上面 web view 的元件。sums 這個 dictionary 是用來存 MasterViewController 給的資料。
接著到 GraphViewController.m 的 viewDidLoad 新增程式碼如下
- (void)viewDidLoad
{
[super viewDidLoad];
NSString * fileURL = [[NSBundle mainBundle] pathForResource:@"graph" ofType:@"html" inDirectory:@"jqplot"];
NSURL * url = [NSURL URLWithString:[fileURL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
NSURLRequest * urlRequest = [NSURLRequest requestWithURL:url];
[myWebView loadRequest:urlRequest];
myWebView.delegate = self;
}
其中 fileURL 是一個指向 html 檔的位置，筆者等會要把所有畫圖相關的 html javascript 都放到 main bundle 裡 jqplot 這個資料夾下，所以程式碼會寫
接著把 fileURL 這個 string 包到一個 NSURL 底下。就用到[[NSBundle mainBundle] pathForResource:@"graph" ofType:@"html" inDirectory:@"jqplot"];
[NSURL URLWithString:[fileURL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];有一個讀者可能會問的問題什麼是 stringByAddingPercentEscapesUsingEncoding ?
對於 browser 的網址列上的字串比如 http://127.0.0.1/?name=michael 會變轉碼成
http://127.0.0.1/%3fname=michael也就是說 ? 會被轉成 %3F，更多的 precent escape 可以看一下 wiki。
最後的步驟就是把 NSURL 包成 NSURLRequest 然後給 myWebView 來讀取。
[myWebView loadRequest:urlRequest];寫到這裡，先去 download jqPlot 然後把需要的檔案拉到 Xcode 專案去。 下載好解完壓縮會看到一個 dist 資料夾。如下。
圖中新增了一個 html 名為 graph.html。來看看它的程式碼
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="./plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<script type="text/javascript">
$(document).ready(function(){
var s1 = [['Sony',7], ['Samsumg',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]];
var plot8 = $.jqplot('pie8', [s1], {
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow:false
},
axesDefaults: {
},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: {
show: true,
rendererOptions: {
numberRows: 1
},
location: 's'
}
});
});
</script>
</head>
<body>
<div id="pie8" class="jqplot-target" style="height:400px;width:300px;">
</div>
</body>
</html>
把整包 dist 改名成 jqplot 然後拉到 Xcode 專案，記得選擇 folder。如下圖示。
為了要先測試一下 jqPlot 是否正確，先把 MainStoryboard.storyboard 裡有 Web View 的 View Controller 的 class 改成 GraphViewController。如下
接著把 IBOutlet 連結上去。如下
到目前為止可以先執行一下 App 會，按下 Master 左上的 Chart 會看到如下的圖。
如果有看到上方左圖就表示 jqPlot 功能正常我們沒有設定錯誤。
NSArray 轉成 JSON String
到了這個階段我們要試著想怎麼把很多筆的資料，在 MasterViewContorller 整合好之後傳給 GraphViewController 的 sums。
在 MasterViewController.m 的開始新增下面程式碼
然後在 viewDidload 初始化 sums 如下@interface MasterViewController () {
NSMutableArray *_objects;
NSArray * categories;
NSMutableDictionary * sums;
}
@end
categories = [NSArray arrayWithObjects:@"食",@"衣",@"住",@"行",@"娛", nil];準備好 sums 是一個 dictionary 要傳給 GraphViewController 的目前 sums 的內容是
sums = [NSMutableDictionary dictionaryWithCapacity:[categories count]];
[categories enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
[sums setObject:[NSNumber numberWithInteger:0] forKey:obj];
}];
食=0在 MainStoryboard 的地方給左上角 Chart 相關的 segue 一個 ID 名為 showGraph。如下圖
衣=0
住=0
行=0
娛=0
然後在 prepareForSegue 的地方新增下列程式碼
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
if ([[segue identifier] isEqualToString:@"showDetail"]) {
NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
NSDate *object = [_objects objectAtIndex:indexPath.row];
[[segue destinationViewController] setDetailItem:object];
}
if ([[segue identifier] isEqualToString:@"showGraph"]) {
[_objects enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
NSInteger current = [[sums objectForKey:[obj objectForKey:@"cat"]] integerValue];
current += [[obj objectForKey:@"amount"] integerValue];
[sums setObject:[NSNumber numberWithInteger:current] forKey:[obj objectForKey:@"cat"]];
}];
GraphViewController * graph = segue.destinationViewController ;
graph.sums = sums;
}
}
在 segue identifier 的判斷式裡，這裡有一個 enumerateObjectsUsingBlock: 的用意是在 _object 裡的每一筆資料都是
食=1234於是要把每一筆資料的數值加到 sums 裡面，用
衣=3455
食=590
娛=456
NSInteger current = [[sums objectForKey:[obj objectForKey:@"cat"]] integerValue];取得某一個分類的值
current += [[obj objectForKey:@"amount"] integerValue];把在 sums 裡的值和目前值加起來
[sums setObject:[NSNumber numberWithInteger:current] forKey:[obj objectForKey:@"cat"]];最後還是寫回到 sums 裡面。
run 完所有的 _objects 裡的元素後，sums 的值也準備好了，就利用
GraphViewController * graph = segue.destinationViewController ;傳給 GraphViewController。目光轉到 GraphViewController.m 身上。新增一個 method
graph.sums = sums;
-(void) webViewDidFinishLoad:(UIWebView *)webView{裡面筆者打算把 sums 分開成兩個 array 分別是 catArray 和 valueArray 而
NSMutableArray * catArray = [NSMutableArray array];
NSMutableArray * valueArray = [NSMutableArray array];
[self.sums enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop) {
[catArray addObject:key];
[valueArray addObject:obj];
}];
NSString * jsonArray = [[NSString alloc] initWithData:[NSJSONSerialization dataWithJSONObject:catArray options:NSJSONWritingPrettyPrinted error:NULL] encoding:NSUTF8StringEncoding];
NSString * jsonValue = [[NSString alloc] initWithData:[NSJSONSerialization dataWithJSONObject:valueArray options:NSJSONWritingPrettyPrinted error:NULL] encoding:NSUTF8StringEncoding];
NSLog(@"json Array %@", jsonArray);
NSLog(@"value array %@", jsonValue);
[myWebView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"gotData(%@,%@); ",jsonArray ,jsonValue]];
}
[self.sums enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop) {就是做這件事情。
[catArray addObject:key];
[valueArray addObject:obj];
}];
然後接著就是把 NSArray 物件轉成 JSON String ，我們用的是
[NSJSONSerialization dataWithJSONObject:catArray options:NSJSONWritingPrettyPrinted error:NULL]是把 NSArray 轉成 JSON 格式的 NSData，然後再用 NSString 的 initWithData:encoding: 來把 NSData 轉成 NSString.
NSString * jsonArray = [[NSString alloc] initWithData:[NSJSONSerialization dataWithJSONObject:catArray options:NSJSONWritingPrettyPrinted error:NULL] encoding:NSUTF8StringEncoding];catArray 轉成 jsonArray，valueArray 轉成 jsonValue。接下來的就是把 jsonArray和 jsonValue 那兩個 json 格式的物件利用 web view 的 stringByEvaluatingJavaScriptFromString: 傳給 html 的 javascript 接住。如下
[myWebView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"gotData(%@,%@); ",jsonArray ,jsonValue]];這邊可以看到 javascript 承接的 function 為 gotData()，而 jsonArray 和 jsonValue 透過 %@ 方式進入 gotData 裡去了。
所以接下來我們要在 graph.html 新增 javascript function gotData 來接收 web view 給 javascript 的資料。
web view 呼叫 javascript function，傳資料給 javascript
用 Xcode 打開 graph.html，在 <script> </script> 中新增如下程式碼。<script type="text/javascript">筆者新增三個變數，catArray 用來存 jsonArray 的資料，valueArray 用來存 jsonValue的資料，而pieData 則是用來畫 pie chart 的資料，也是 catArray 和 valueArray 的組合。接著我們看到 gotData這個 function
var catArray = "";
var valueArray ="";
var pieData = [];
function gotData(data1,data2){
catArray = data1;
valueArray = data2;
}
</script>
function gotData(data1,data2){
catArray = data1;
valueArray = data2;
}
在 web view 執行這個 function的時候就會透過 data1, data2 把資料給 catArray 和 valueArray。
動態呈現 Pie Chart
為了要符合 jqPlot 的運作方式，筆者要再新增一個 function 名為 drawPie() 如下function drawPie(){
for(var index in catArray){
pieData.push([catArray[index],valueArray[index]]);
}
var plot8 = $.jqplot('pie8', [pieData], {
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow:false
},
axesDefaults: {
},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: {
show: true,
rendererOptions: {
numberRows: 1
},
location: 's'
}
});
}
這個 function 主要是依照 jqPlot 畫圖的資料格式，之前是
[['Sony',7], ['Samsumg',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]]就一個 array 裡面每一筆資料都是只有兩個元素的 array，第一個元素是代表 label 第二個元素 代表數值，所以這邊用
for(var index in catArray){把 catArray[index],valueArray[index] 組合起來的 array 加到 pieData 裡面，當 index 是所有 catArray 的 index 之後，pieData 就準備好了，就可以直接丟給 $.jqplot 去畫圖。
pieData.push([catArray[index],valueArray[index]]);
}
存檔之後就可以執行看到如下畫面。眼尖的讀者可以看一下有沒有算錯？
一樣地，所有的程式碼放在GitHub。
沒有留言:
張貼留言