关于这个的使用是源于我参看的一个图表表格的使用

操作步骤是这样的

第一步,自己写个页面,用来实现页面的某些效果的,比如这里的温度曲线图,是调用的highchart的js插件。外加一些css效果。

第二步,在自己的app中将要使用的页面加载进来,这里调用的是index.html

第三步,使用webview进行呈现,还要灵活的使用webview的一个方法【stringByEvaluatingJavaScriptFromString】

这里只演示一下如何使用,具体的页面部分,可以自己写,我放在自己的github上。

TemperatureCurveViewController.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//
// TemperatureCurveViewController.h
// Real-time temperature curve
//
// Created by david on 13-8-15.
// Copyright (c) 2013年 WalkerFree. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface TemperatureCurveViewController : UIViewController<UIWebViewDelegate, UITextFieldDelegate>

@property(retain, nonatomic) UIWebView *webViewForSelectDate;
@property(retain, nonatomic) NSTimer *timer;

@end

TemperatureCurveViewController.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
//
// TemperatureCurveViewController.m
// Real-time temperature curve
//
// Created by david on 13-8-15.
// Copyright (c) 2013年 WalkerFree. All rights reserved.
//

#import "TemperatureCurveViewController.h"

@interface TemperatureCurveViewController ()

@end

@implementation TemperatureCurveViewController

@synthesize webViewForSelectDate;
@synthesize timer;

- (void)viewDidLoad
{
[super viewDidLoad];

// UIInterfaceOrientation orientation = [UIDevice currentDevice].orientation;
// if(UIDeviceOrientationIsPortrait(orientation) || orientation == UIDeviceOrientationUnknown){
// if([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]){
// [[UIDevice currentDevice] performSelector:@selector(setOrientation:)
// withObject:(id)UIDeviceOrientationLandscapeRight];
// }
//
// }

CGRect webFrame = self.view.frame;
webFrame.origin.x = 0;
webFrame.origin.y = 0;

webViewForSelectDate = [[UIWebView alloc] initWithFrame:webFrame];
webViewForSelectDate.delegate = self;
webViewForSelectDate.scalesPageToFit = YES;
webViewForSelectDate.opaque = NO;
webViewForSelectDate.backgroundColor = [UIColor clearColor];
webViewForSelectDate.autoresizingMask = (UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth);
[self.view addSubview:webViewForSelectDate];

NSString *htmlPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"curve.bundle/index.html"];

NSURL *url = [NSURL fileURLWithPath:htmlPath];
NSURLRequest *request = [NSURLRequest requestWithURL:url];

[webViewForSelectDate loadRequest:request];



}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

-(BOOL) shouldAutorotate{
return YES;
}

-(NSUInteger)supportedInterfaceOrientations{
return UIInterfaceOrientationMaskAll;
}

-(void) updateData{
NSDate *nowDate = [[NSDate alloc] init];
NSTimeInterval nowTimeInterval = [nowDate timeIntervalSince1970] * 1000;

int temperature = [self getRandomNumber:20 to:50];

NSMutableString *jsStr = [[NSMutableString alloc] initWithCapacity:0];
[jsStr appendFormat:@"updateData(%f,%d)",nowTimeInterval, temperature];

[webViewForSelectDate stringByEvaluatingJavaScriptFromString:jsStr];
}

-(int) getRandomNumber:(int)from to:(int)to{
return (int)(from + (arc4random() % (to - from + 1)));
}

#pragma mark - delegate o webview
-(BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
return YES;
}

-(void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{

}

-(void) webViewDidFinishLoad:(UIWebView *)webView{
timer = [NSTimer scheduledTimerWithTimeInterval:1
target:self
selector:@selector(updateData)
userInfo:nil
repeats:YES];
}

@end

其主要的一点就是使用stringByEvaluatingJavaScriptFromString这个方法,他可以灵活的将js嵌入页面中,进行操作,而且一定是要在webview加载完后进行调用。