iOS图表制作-01
基本的柱状图、折线图展示：（无交互事件）
一、柱状图展示
1、ZWChartContentView 柱状图承载视图:
默认6个柱状图，不滚动；超过6个，会设置可以滚动
ZWChartContentView.h
@interfaceZWChartContentView :UIView
/** 柱状图距离两边的距离:默认30 */
@property (nonatomic, assign) CGFloat histogramSpace;
/** 柱状图数据数组 */
@property(nonatomic,strong) NSArray*histogramDataArray;
/** 柱状图颜色数组 */
@property(nonatomic,strong) NSArray*histogramColorArray;
/** 柱状图数据颜色 */
@property(nonatomic,strong) UIColor*histogramTextColor;
/** 柱状图数据字体大小:默认15 */
@property(nonatomic,assign) CGFloathistogramTextFont;
@end
ZWChartContentView.m
#import "ZWChartContentView.h"
#import "ZWChartsView.h"
@interface ZWChartContentView()
@property (strong, nonatomic) UIScrollView *scrollView;//数据过多，需要滚动
@property (strong, nonatomic) ZWChatsView *histogramView;
@end
@implementationZWChartContentView
- (instancetype)initWithFrame:(CGRect)frame
{
if(self= [superinitWithFrame:frame]) {
[selfsetUI];
}
return self;
}
#pragma mark - 绘制坐标轴
- (void)drawRect:(CGRect)rect
{
}
#pragma mark - setUI
- (void)setUI
{
self.backgroundColor = [UIColor brownColor];
//添加图标展示视图
[self addSubview:self.histogramView];
}
#pragma mark - setter/getter method
//柱状图数据
- (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;
}
//柱状图数据颜色
- (void)setHistogramTextColor:(UIColor*)histogramTextColor
{
self.histogramView.histogramTextColor = histogramTextColor;
}
//柱状图数据字体大小
- (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 创建柱状图以及坐标轴尺度
ZWChatsView.h
#define Histogram_Height_Scale100.0//柱状图高度比例
#define Histogram_Space30//柱状图间隔距离
/**
* ZWChatsView: 利用图形上下文绘制柱状图（仅供简单的展示）
*/
@interfaceZWChatsView :UIView
/** 柱状图距离两边的距离:默认30 */
@property (nonatomic, assign) CGFloat histogramSpace;
/** 柱状图数据数组 */
@property(nonatomic,strong) NSArray*histogramDataArray;
/** 柱状图颜色数组 */
@property(nonatomic,strong) NSArray*histogramColorArray;
/** 柱状图数据颜色 */
@property(nonatomic,strong) UIColor*histogramTextColor;
/** 柱状图数据字体大小:默认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;//根据数据获取最大刻度值
@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];
}
//绘制横坐标刻度尺
[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];
//设置文字矩形的左上角位置,并且不会自动换行
CGPointpoint =CGPointMake(x + w * 0.25, y - 20);
//drawInRect:会自动换行
//drawAtPoint:不会自动换行
[strdrawAtPoint:pointwithAttributes:dict];
}
//画坐标轴
[self drawCoordinateAxisWithContext:context];
//添加Y轴坐标刻度
[self createLabelY];
}
#pragma mark - 画坐标轴
- (void)drawCoordinateAxisWithContext:(CGContextRef)context
{
/*******画出坐标轴********/
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 - 添加横-纵坐标刻度尺
//创建x轴的数据
- (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); //设置字体倾斜
[selfaddSubview:label];
}
//创建y轴数据
- (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 - 画柱状图
- (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
{
//画矩形柱体
UIBezierPath*path = [UIBezierPathbezierPathWithRect:CGRectMake(histogram_x, histogram_y, histogram_w, histogram_h)];
//填充对应颜色
[colorset];
CGContextAddPath(context, path.CGPath);
//注意是Fill, 而不是Stroke, 这样才可以填充矩形区域
CGContextFillPath(context);
}
#pragma mark - 设置数据文字
- (NSMutableDictionary*)drawDataTextWithtext:(NSString*)text color:(UIColor*)color size:(CGFloat)size
{
//创建文字属性字典
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:size];
dict[NSForegroundColorAttributeName] = color;
//设置笔触宽度
dict[NSStrokeWidthAttributeName] = @1;
returndict;
}
#pragma mark -
#pragma mark - 逻辑处理
#pragma mark -
#pragma mark - 懒加载
//柱状图数据
- (void)setHistogramDataArray:(NSArray*)histogramDataArray
{
_histogramDataArray= histogramDataArray;
}
//柱状图颜色
- (void)setHistogramColorArray:(NSArray*)histogramColorArray
{
_histogramColorArray= histogramColorArray;
}
//柱状图距离两边的距离
- (void)setHistogramSpace:(CGFloat)histogramSpace
{
_histogramSpace= histogramSpace;
}
//柱状图数据颜色
- (void)setHistogramTextColor:(UIColor*)histogramTextColor
{
_histogramTextColor= histogramTextColor;
}
//柱状图数据字体大小
- (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)];
//不设置数据，默认为6个，不能滚动
[self.viewaddSubview:chartContentV];
}
效果图：
设置数据源：超过6个会自动添加scrollView用以滚动
chartContentV.histogramDataArray= @[@20, @15, @70, @66, @55, @38, @47, @90, @81, @12, @59, @58];
效果图：
未完待续.......
