基本的柱狀圖、折線圖展示：（無(wú)交互事件）
一、柱狀圖展示
1、ZWChartContentView 柱狀圖承載視圖:
默認(rèn)6個(gè)柱狀圖，不滾動(dòng)；超過(guò)6個(gè)，會(huì)設(shè)置可以滾動(dòng)
ZWChartContentView.h
@interfaceZWChartContentView :UIView
/**? 柱狀圖距離兩邊的距離:默認(rèn)30 */
@property (nonatomic, assign)? CGFloat histogramSpace;
/**? 柱狀圖數(shù)據(jù)數(shù)組? */
@property(nonatomic,strong)? NSArray*histogramDataArray;
/** 柱狀圖顏色數(shù)組? */
@property(nonatomic,strong)? NSArray*histogramColorArray;
/** 柱狀圖數(shù)據(jù)顏色? */
@property(nonatomic,strong)? UIColor*histogramTextColor;
/** 柱狀圖數(shù)據(jù)字體大小:默認(rèn)15? */
@property(nonatomic,assign)? CGFloathistogramTextFont;
@end
ZWChartContentView.m
#import "ZWChartContentView.h"
#import "ZWChartsView.h"
@interface ZWChartContentView()
@property (strong, nonatomic) UIScrollView *scrollView;//數(shù)據(jù)過(guò)多，需要滾動(dòng)
@property (strong, nonatomic) ZWChatsView *histogramView;
@end
@implementationZWChartContentView
- (instancetype)initWithFrame:(CGRect)frame
{
? ? if(self= [superinitWithFrame:frame]) {
? ? ? ? [selfsetUI];
? ? }
? ? return self;
}
#pragma mark - 繪制坐標(biāo)軸
- (void)drawRect:(CGRect)rect
{
}
#pragma mark - setUI
- (void)setUI
{
? ? self.backgroundColor = [UIColor brownColor];
? ? //添加圖標(biāo)展示視圖
? ? [self addSubview:self.histogramView];
}
#pragma mark - setter/getter method
//柱狀圖數(shù)據(jù)
- (void)setHistogramDataArray:(NSArray*)histogramDataArray
{
? ? if(histogramDataArray.count> 6) {
? ? ? ? [self.histogramView removeFromSuperview];
? ? ? ? [self addSubview:self.scrollView];
? ? ? ? [self.scrollView addSubview:self.histogramView];
? ? ? ? self.histogramView.histogramWidth = 30.0;
? ? ? ? self.histogramView.histogramSpace = 30.0;
? ? ? ? CGFloatcontent_w = 30.0*(histogramDataArray.count* 2 + 1);
? ? ? ? self.histogramView.frame = CGRectMake(30.0, 30.0, content_w, self.scrollView.bounds.size.height-50.0);
? ? ? ? [self.scrollView setContentSize:CGSizeMake(content_w+30.0f, 0)];
? ? }
? ? self.histogramView.histogramDataArray = histogramDataArray;
? ? [self.histogramView setNeedsDisplay];
}
//柱狀圖顏色
- (void)setHistogramColorArray:(NSArray*)histogramColorArray
{
? ? self.histogramView.histogramColorArray = histogramColorArray;
}
//柱狀圖距離兩邊的距離
- (void)setHistogramSpace:(CGFloat)histogramSpace
{
? ? self.histogramView.histogramSpace = histogramSpace;
}
//柱狀圖數(shù)據(jù)顏色
- (void)setHistogramTextColor:(UIColor*)histogramTextColor
{
? ? self.histogramView.histogramTextColor = histogramTextColor;
}
//柱狀圖數(shù)據(jù)字體大小
- (void)setHistogramTextFont:(CGFloat)histogramTextFont
{
? ? self.histogramView.histogramTextFont = histogramTextFont;
}
#pragma mark - 懶加載
- (UIScrollView*)scrollView
{
? ? if (!_scrollView) {
? ? ? ? _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
? ? ? ? _scrollView.backgroundColor = [UIColor redColor];
? ? }
? ? return _scrollView;
}
- (ZWChatsView*)histogramView
{
? ? if (!_histogramView) {
? ? ? ? _histogramView = [[ZWChatsView alloc] initWithFrame:CGRectMake(30, 30, self.bounds.size.width-40, 300)];
? ? ? ? _histogramView.backgroundColor = [UIColor greenColor];
? ? }
? ? return _histogramView;
}
@end
2、ZWChatsView.h ?創(chuàng)建柱狀圖以及坐標(biāo)軸尺度
ZWChatsView.h
#define Histogram_Height_Scale100.0//柱狀圖高度比例
#define Histogram_Space30//柱狀圖間隔距離
/**
?* ZWChatsView: 利用圖形上下文繪制柱狀圖（僅供簡(jiǎn)單的展示）
?*/
@interfaceZWChatsView :UIView
/**? 柱狀圖距離兩邊的距離:默認(rèn)30 */
@property (nonatomic, assign)? CGFloat histogramSpace;
/**? 柱狀圖數(shù)據(jù)數(shù)組? */
@property(nonatomic,strong)? NSArray*histogramDataArray;
/** 柱狀圖顏色數(shù)組? */
@property(nonatomic,strong)? NSArray*histogramColorArray;
/** 柱狀圖數(shù)據(jù)顏色? */
@property(nonatomic,strong)? UIColor*histogramTextColor;
/** 柱狀圖數(shù)據(jù)字體大小:默認(rèn)15? */
@property(nonatomic,assign)? CGFloathistogramTextFont;
@end
ZWChatsView.m
#import "ZWChatsView.h"
@interface ZWChatsView()
@property (assign, nonatomic) CGFloat view_H;//視圖高度
@property (assign, nonatomic) CGFloat view_W;//視圖寬度
@property (assign, nonatomic) CGFloat max_scale;//根據(jù)數(shù)據(jù)獲取最大刻度值
@end
@implementation ZWChatsView
- (instancetype)initWithFrame:(CGRect)frame
{
? ? if(self= [superinitWithFrame:frame]) {
? ? ? ? self.backgroundColor = [UIColor whiteColor];
? ? ? ? self.histogramDataArray= @[@20, @15, @70, @70, @55];
? ? ? ? self.histogramColorArray = @[[UIColor redColor], [UIColor greenColor], [UIColor blueColor], [UIColor brownColor], [UIColor yellowColor]];
? ? ? ? self.histogramTextColor = [UIColor redColor];
? ? ? ? self.histogramTextFont = 15.0;
? ? ? ? self.histogramSpace= 30;
? ? }
? ? return self;
}
#pragma mark -
#pragma mark - setUI
- (void)drawRect:(CGRect)rect {
? ? if (self.histogramDataArray.count == 0) {
? ? ? ? return;
? ? }
? ? CGContextRef context = UIGraphicsGetCurrentContext();
? ? NSUInteger count = self.histogramDataArray.count;
? ? //柱狀圖寬度
? ? CGFloatw = (self.view_W- 2 *self.histogramSpace- (count-1)*Histogram_Space) / count;
? ? CGFloatx = 0;
? ? CGFloaty = 0;
? ? CGFloath = 0;
? ? for(inti = 0; i < count; i ++) {
? ? ? ? x = (w +Histogram_Space)*i +self.histogramSpace;
? ? ? ? h = ([self.histogramDataArray[i] integerValue] / Histogram_Height_Scale) * self.view_H;
? ? ? ? y =self.view_H- h;
? ? ? ? UIColor*color;
? ? ? ? if (self.histogramColorArray.count == 1) {
? ? ? ? ? ? color = (UIColor*)self.histogramColorArray[0];
? ? ? ? }else{
? ? ? ? ? ? color =self.histogramColorArray[i];
? ? ? ? }
? ? ? ? //繪制橫坐標(biāo)刻度尺
? ? ? ? [self createLabelXWithHistogram_x:x histogram_y:y histogram_w:w tag:i];
? ? ? ? //繪制矩形圖
? ? ? ? [self drawHistogramWithContext:context color:color histogram_x:x histogram_y:y histogram_w:w histogram_h:h];
? ? ? ? //文本繪制
? ? ? ? NSString *str = [NSString stringWithFormat:@"%ld", [self.histogramDataArray[i] longValue]];
? ? ? ? NSMutableDictionary *dict = [self drawDataTextWithtext:str color:self.histogramTextColor size:self.histogramTextFont];
? ? ? ? //設(shè)置文字矩形的左上角位置,并且不會(huì)自動(dòng)換行
? ? ? ? CGPointpoint =CGPointMake(x + w * 0.25, y - 20);
? ? ? ? //drawInRect:會(huì)自動(dòng)換行
? ? ? ? //drawAtPoint:不會(huì)自動(dòng)換行
? ? ? ? [strdrawAtPoint:pointwithAttributes:dict];
? ? }
? ? //畫(huà)坐標(biāo)軸
? ? [self drawCoordinateAxisWithContext:context];
? ? //添加Y軸坐標(biāo)刻度
? ? [self createLabelY];
}
#pragma mark - 畫(huà)坐標(biāo)軸
- (void)drawCoordinateAxisWithContext:(CGContextRef)context
{
? ? /*******畫(huà)出坐標(biāo)軸********/
? ? CGContextSetLineWidth(context, 3.0);
? ? CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
? ? CGContextMoveToPoint(context, 0, 0);
? ? CGContextAddLineToPoint(context, 0, self.view_H);
? ? CGContextAddLineToPoint(context,self.view_W, self.view_H);
? ? CGContextStrokePath(context);
}
#pragma mark - 添加橫-縱坐標(biāo)刻度尺
//創(chuàng)建x軸的數(shù)據(jù)
- (void)createLabelXWithHistogram_x:(CGFloat)histogram_x histogram_y:(CGFloat)histogram_y histogram_w:(CGFloat)histogram_w tag:(NSInteger)tag
{
? ? UILabel* label = [[UILabelalloc]initWithFrame:CGRectMake(histogram_x,self.view_H, histogram_w, 20.0)];
? ? label.textAlignment = NSTextAlignmentCenter;
? ? label.tag= 1000 + tag;
? ? label.text = [NSString stringWithFormat:@"%ld月",tag+1];
? ? label.font = [UIFont systemFontOfSize:10];
? ? label.transform = CGAffineTransformMakeRotation(M_PI * 0.3); //設(shè)置字體傾斜
? ? [selfaddSubview:label];
}
//創(chuàng)建y軸數(shù)據(jù)
- (void)createLabelY
{
? ? CGFloatcount = 10;
? ? CGFloatlabel_H =self.view_H/ count;
? ? for(NSIntegeri = 0; i < count; i++) {
? ? ? ? UILabel* label = [[UILabelalloc]initWithFrame:CGRectMake(-32, label_H*i, 30, label_H)];
? ? ? ? label.textAlignment = NSTextAlignmentRight;
? ? ? ? label.layer.borderColor = [UIColor greenColor].CGColor;
? ? ? ? label.layer.borderWidth= 1.0;
? ? ? ? label.tag= 2000 + i;
? ? ? ? label.text= [NSStringstringWithFormat:@"%.0f",count*10];
? ? ? ? label.font = [UIFont systemFontOfSize:10];
? ? ? ? [selfaddSubview:label];
? ? ? ? count -= 1;
? ? }
}
#pragma mark - 畫(huà)柱狀圖
- (void)drawHistogramWithContext:(CGContextRef)context color:(UIColor*)color histogram_x:(CGFloat)histogram_x histogram_y:(CGFloat)histogram_y histogram_w:(CGFloat)histogram_w histogram_h:(CGFloat)histogram_h
{
? ? //畫(huà)矩形柱體
? ? UIBezierPath*path = [UIBezierPathbezierPathWithRect:CGRectMake(histogram_x, histogram_y, histogram_w, histogram_h)];
? ? //填充對(duì)應(yīng)顏色
? ? [colorset];
? ? CGContextAddPath(context, path.CGPath);
? ? //注意是Fill, 而不是Stroke, 這樣才可以填充矩形區(qū)域
? ? CGContextFillPath(context);
}
#pragma mark - 設(shè)置數(shù)據(jù)文字
- (NSMutableDictionary*)drawDataTextWithtext:(NSString*)text color:(UIColor*)color size:(CGFloat)size
{
? ? //創(chuàng)建文字屬性字典
? ? NSMutableDictionary *dict = [NSMutableDictionary dictionary];
? ? dict[NSFontAttributeName] = [UIFont systemFontOfSize:size];
? ? dict[NSForegroundColorAttributeName] = color;
? ? //設(shè)置筆觸寬度
? ? dict[NSStrokeWidthAttributeName] = @1;
? ? returndict;
}
#pragma mark -
#pragma mark - 邏輯處理
#pragma mark -
#pragma mark - 懶加載
//柱狀圖數(shù)據(jù)
- (void)setHistogramDataArray:(NSArray*)histogramDataArray
{
? ? _histogramDataArray= histogramDataArray;
}
//柱狀圖顏色
- (void)setHistogramColorArray:(NSArray*)histogramColorArray
{
? ? _histogramColorArray= histogramColorArray;
}
//柱狀圖距離兩邊的距離
- (void)setHistogramSpace:(CGFloat)histogramSpace
{
? ? _histogramSpace= histogramSpace;
}
//柱狀圖數(shù)據(jù)顏色
- (void)setHistogramTextColor:(UIColor*)histogramTextColor
{
? ? _histogramTextColor= histogramTextColor;
}
//柱狀圖數(shù)據(jù)字體大小
- (void)setHistogramTextFont:(CGFloat)histogramTextFont
{
? ? _histogramTextFont= histogramTextFont;
}
- (CGFloat)view_H
{
? ? return self.bounds.size.height;
}
- (CGFloat)view_W
{
? ? return self.bounds.size.width;
}
@end
3、控制器里面
- (void)viewDidLoad {
? ? [super viewDidLoad];
? ? [self addSubviews];
}
#pragma mark - 添加子控件
- (void)addSubviews
{
? ? ZWChartContentView *chartContentV = [[ZWChartContentView alloc] initWithFrame:CGRectMake(5, 100, self.view.bounds.size.width-10, 350)];
//不設(shè)置數(shù)據(jù)，默認(rèn)為6個(gè)，不能滾動(dòng)
? ? [self.viewaddSubview:chartContentV];
}
效果圖：
設(shè)置數(shù)據(jù)源：超過(guò)6個(gè)會(huì)自動(dòng)添加scrollView用以滾動(dòng)
? ? chartContentV.histogramDataArray= @[@20, @15, @70, @66, @55, @38, @47, @90, @81, @12, @59, @58];
效果圖：
未完待續(xù).......
