iphone上如何绘制点状图（原创）

先上效果图：

直接贴上完整的实现代码， 看不懂的地方自己google查询，学习。

CustomPolylineView.h

 

//create by suruiqiang 10.10.8
#import <UIKit/UIKit.h>

//  点状图
@interface CustomPolylineView : UIView {

	NSArray* dataSource;
	NSMutableArray* dataSourceAfterPorcess;
	float maxValue, minValue, averageScaleValue, columnWidth;
	float standardValue;
	int numberOfPlayedTimes,IntervalValue;
	UIImage* ballImage;
}
@property(nonatomic, retain)NSArray* dataSource;
@property(nonatomic, retain)NSMutableArray* dataSourceAfterPorcess;
@property(nonatomic,assign)float standardValue;
@end

CustomPolylineView.m

 

 

//
//  CustomPolylineView.m
//  GolfSense
//
//  Created by suruiqiang on 10/8/10.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//

#import "CustomPolylineView.h"
#define MARGIN_LEFTSIDE 20
#define MARGIN_BOTTOM_SIDE 20
#define MARGIN_TOP_SIDE 10
@interface CustomPolylineView(private)
-(void)drawScale:(CGContextRef)context rect:(CGRect)_rect;
-(void)calcScale:(CGRect)_rect;
-(UIImage*)createImage;
@end

@implementation CustomPolylineView
@synthesize dataSource;
@synthesize dataSourceAfterPorcess;
@synthesize standardValue;

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
        // Initialization code
		dataSourceAfterPorcess = [[NSMutableArray alloc] init];
		ballImage =[UIImage imageNamed:@"cir2.png"];
		self.backgroundColor = [UIColor clearColor];
    }
    return self;
}



- (void)drawRect:(CGRect)rect {
    // Drawing code
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
	CGContextFillRect(context, rect);
	[@"nihao" drawAtPoint:CGPointMake(40, 60) withFont:[UIFont systemFontOfSize:12]];
	[self calcScale:rect];
	[self drawScale:context rect:rect];
	
}


-(void)drawScale:(CGContextRef)context rect:(CGRect)_rect
{
	CGPoint points[3];
	points[0] = CGPointMake(MARGIN_LEFTSIDE-10, MARGIN_TOP_SIDE);
	points[1] = CGPointMake(MARGIN_LEFTSIDE-10, _rect.size.height-MARGIN_BOTTOM_SIDE+1);
	points[2] = CGPointMake(_rect.size.width-10, _rect.size.height-MARGIN_BOTTOM_SIDE+1);
	CGContextSetAllowsAntialiasing(context, NO);
	CGContextAddLines(context, points, 3);
	
	points[0] = CGPointMake(MARGIN_LEFTSIDE-16, MARGIN_TOP_SIDE+5);
	points[1] = CGPointMake(MARGIN_LEFTSIDE-10, MARGIN_TOP_SIDE);
	points[2] = CGPointMake(MARGIN_LEFTSIDE-4, MARGIN_TOP_SIDE+5);
	CGContextSetAllowsAntialiasing(context, NO);
	CGContextSetLineWidth(context,1);
	CGContextAddLines(context, points, 3);
	
	
	points[0] = CGPointMake(_rect.size.width-16, _rect.size.height-MARGIN_BOTTOM_SIDE+7);
	points[1] = CGPointMake(_rect.size.width-10, _rect.size.height-MARGIN_BOTTOM_SIDE+1);
	points[2] = CGPointMake(_rect.size.width-16, _rect.size.height-MARGIN_BOTTOM_SIDE-5);
	CGContextSetAllowsAntialiasing(context, NO);
	CGContextSetLineWidth(context,1);
	CGContextAddLines(context, points, 3);
	
	
	
	points[0] = CGPointMake(MARGIN_LEFTSIDE-10, _rect.size.height/2);
	points[1] = CGPointMake(_rect.size.width-10, _rect.size.height/2);
	CGContextSetLineDash(context, 0, NULL, 0);
	CGContextAddLines(context, points, 2);
	CGContextSetLineWidth(context,2);
	CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:3/255.0 green:198.0/255.0 blue:196.0/255.0 alpha:1.0].CGColor);
	CGContextDrawPath(context, kCGPathStroke);
	
	CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor); 
	
	for (int i=0; i<numberOfPlayedTimes; ++i) {
		float averagevalue = [[dataSourceAfterPorcess objectAtIndex:i] floatValue];
		NSLog(@"averagevalue=%f", averagevalue);
		int distance = standardValue-averagevalue;
		float offsetValue = (abs(distance)*_rect.size.height/2)/standardValue;
		float pointAtX, pointAtY;
		if (distance>=0) {
			pointAtX = (i+1)*columnWidth+MARGIN_LEFTSIDE-10;
			pointAtY = (_rect.size.height/2-offsetValue); 
		}else {
			pointAtX = (i+1)*columnWidth+MARGIN_LEFTSIDE-10;
			pointAtY = (_rect.size.height/2+offsetValue); 
		}
		[ballImage drawAtPoint:CGPointMake(pointAtX, pointAtY)];
		
		NSString* scaleStr = nil;
		if(numberOfPlayedTimes<=5)
		{
			scaleStr = [NSString stringWithFormat:@"%d", IntervalValue*(i+1)];
		}
		else {
			if (numberOfPlayedTimes!=4) {
				scaleStr = [NSString stringWithFormat:@"%d-%d", IntervalValue*i+1,IntervalValue*(i+1)];
			}else {
				scaleStr = [NSString stringWithFormat:@"%d-%d", IntervalValue*i+1,[dataSource count]];
			}

			
		}
		[scaleStr drawAtPoint:CGPointMake(pointAtX, _rect.size.height-MARGIN_BOTTOM_SIDE) withFont:[UIFont systemFontOfSize:12]];
	}
	
	CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
	
	CGContextDrawPath(context, kCGPathStroke);
	CGContextSetAllowsAntialiasing(context, YES);
}



-(void)calcScale:(CGRect)_rect
{
	if ([dataSource count]<=5) {
		IntervalValue = 1;
		numberOfPlayedTimes = [dataSource count];
	}else
	if ([dataSource count]>5) {
		numberOfPlayedTimes = 5;
		IntervalValue = [dataSource count]/numberOfPlayedTimes;
	}
	
	for(NSNumber* v in dataSource)
	{
		if (maxValue<[v floatValue]) {
			maxValue = [v floatValue];
		}
		if (minValue>[v floatValue]) {
			minValue = [v floatValue];
		}
	}
	
	standardValue = 28.0;
	
	columnWidth = (_rect.size.width-MARGIN_LEFTSIDE*2)/(numberOfPlayedTimes+1);
	
	for(int i=0;i<numberOfPlayedTimes;++i)
	{
		float oneGroupTotalValue = 0.0;
		float oneGroupAvageValue = 0.0;
		int startPos = i*IntervalValue;
		int endPos;
		if (i!=numberOfPlayedTimes-1) {
			endPos = (i+1)*IntervalValue;
		}
		else 
		{
			endPos = [dataSource count];
		}

		for (int index=startPos; index<=endPos-1; ++index) {
			oneGroupTotalValue += [[dataSource objectAtIndex:index] floatValue];
		}
		
		oneGroupAvageValue = oneGroupTotalValue/IntervalValue;
		[dataSourceAfterPorcess addObject:[NSNumber numberWithFloat:oneGroupAvageValue]];
	}
}


- (void)dealloc {
    [super dealloc];
}
@end



//-(UIImage*)createImage
//{
//	CGSize size = CGSizeMake(32,32);
//	CGRect rect = CGRectMake(0, 0, 32, 32);
//	UIGraphicsBeginImageContext(size);
//	CGContextRef context = UIGraphicsGetCurrentContext();
//	
//	unsigned int red, green, blue;
//	// Fill color.
//	CGContextSetRGBFillColor(context, 0.7, 0.7, 0.7, 1.0);
//	
//	// Your drawing code.
//	CGContextFillEllipseInRect(context, rect);
//	
//	// Get the image and return.
//	UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
//	UIGraphicsEndImageContext();
//	return image;
//}

 

 

 

 

调用处代码 *viewControler.m：

 

	CustomPolylineView* polyView = [[CustomPolylineView alloc] initWithFrame:CGRectMake(10,30, 200, 200)];
	NSArray* g = [NSArray arrayWithObjects:[NSNumber numberWithFloat:18.0],
									[NSNumber numberWithFloat:21.0],
									[NSNumber numberWithFloat:22.0],
									[NSNumber numberWithFloat:32.0],
									[NSNumber numberWithFloat:34.0],nil];
	
	polyView.dataSource = g;
	polyView.frame = CGRectOffset(polyView.frame, 0, 44);
	[self.view addSubview:polyView];

 

 

图上的紫色图片即可以使用代码生成，也可以直接使用图片。代码中已经将代码生成图片的代码注释掉