简易的双折线图实现

折线图能用到的地方并不是太多,这儿测试了一个简单的双折线图,要用到的可以看看。

动态效果图


简易的双折线图实现_第1张图片

再看看iphone5和7的效果图


简易的双折线图实现_第2张图片
简易的双折线图实现_第3张图片

如果是新手可以再看看我在里面用到的简单适配

因为设置坐标地方不多,适配比较简单,

#define H [UIScreen

mainScreen].bounds.size.height /667

#define W [UIScreen

mainScreen].bounds.size.width /375

分别在横向坐标数字上乘以宏定义W,纵坐标上乘以宏定义H,如下

LineView* zx = [[LineViewalloc]initWithFrame:CGRectMake(0,300*W,[UIScreenmainScreen].bounds.size.width,350*H)];

就可以达到简单的适配,是不是很简单~

接下来进入正题

首先先建一个UIview类,然后在ViewController里导入UIview

的头文件,初始化view.add到self.view,

ViewController的.m如下

//  Copyright © 2016年RanFeiHong. All rights reserved.折线图能用到的地方并不是太多,这儿测试了一个简单的双折线图,要用到的可以看看。

首先先建一个UIview类,然后在ViewController里导入UIview

的头文件,初始化view.add到self.view,

ViewController的.m如下

//  Copyright © 2016年RanFeiHong. All rights reserved.

//

#import"ViewController.h"

#import"LineView.h"

#define H [UIScreen

mainScreen].bounds.size.height /667

#define W [UIScreen

mainScreen].bounds.size.width /375

@interfaceViewController ()

@end

@implementationViewController

- (void)viewDidLoad{

[superviewDidLoad];

[superviewDidLoad];

self.view.backgroundColor

= [UIColorwhiteColor];

LineView* zx = [[LineViewalloc]initWithFrame:CGRectMake(0,300*W, [UIScreenmainScreen].bounds.size.width,350*H)];

//横纵坐标赋值

zx.horizontalDateArray=@[@"1d",@"2d",@"3d",@"4d",@"5d",@"6d",@"7d",@"8d",@"9d"];

zx.verticalDateArray=@[@"400",@"300",@"200",@"100",@"0"];

//背景颜色

zx.gradientLayerColors= [NSMutableArrayarrayWithArray:@[(__bridgeid)[UIColorcolorWithRed:23/255.0green:155/255.0blue:255/255.0alpha:1.0].CGColor, (__bridgeid)[UIColorcolorWithRed:10/255.0green:240/55.0blue:244/255.0alpha:1.0].CGColor]];

//设置折线颜色

zx.lineColorArray=@[ [UIColorcolorWithRed:28 /255.0green:70 /255.0blue:140 /255.0alpha:1.0],[UIColorcolorWithRed:133 /255.0green:1 /255.0blue:113 /255.0alpha:1.0]];

//设置折线的数据源

zx.dataArray=@[@[@(183),@(235),@(160),@(208),@(116),@(163),@(206),@(168),@(234)],

@[@(236),@(160),@(218),@(166),@(256),@(172),@(271),@(188),@(216)]];

//设置line名称

zx.lineNameArray =@[@"吸收",@"消耗"];

[self.viewaddSubview:zx];

}

@end

在新建的UIview类的.h里是各个属性控件和数据数组如下

//  Copyright ©

2016年RanFeiHong. All rights reserved.

//

#import

@interfaceLineView :UIView

@property

(nonatomic,strong)NSArray* dataArray;

@property(nonatomic,strong)NSArray* horizontalDateArray;

@property(nonatomic,strong)NSArray* verticalDateArray;

@property(nonatomic,strong)NSMutableArray*gradientLayerColors;

@property

(nonatomic,strong)UIColor* LineColor;

@property

(nonatomic,strong)NSArray* lineColorArray;

@property

(nonatomic,strong)NSArray* lineNameArray;

@property

(nonatomic,strong)UIBezierPath* path1;

@property(nonatomic,strong)UIView*gradientBackgroundView;

@property

(nonatomic,strong)CAGradientLayer*gradientLayer;

@property(nonatomic,strong)NSMutableArray* lineChartLayerArray;

- (instancetype)initWithFrame:(CGRect)frame;

- (void)dravLine;

- (void)line;

@end

然后在.m里建立X轴数据,写一个方法在里面画折线图,创建折线点和加上标记label。

.m如下

//  Copyright ©

2016年RanFeiHong. All rights reserved.

//

#import"LineView.h"

@implementationLineView

- (instancetype)initWithFrame:(CGRect)frame{

if(self= [superinitWithFrame:frame]){

self.backgroundColor= [UIColorwhiteColor];

self.lineChartLayerArray = [NSMutableArrayarray];

}

returnself;

}

- (void)setHorizontalDateArray:(NSArray*)horizontalDateArray{

_horizontalDateArray= horizontalDateArray;

[selfcreateLabelX];

}

- (void)setVerticalDateArray:(NSArray*)verticalDateArray{

_verticalDateArray= verticalDateArray;

}

- (void)setGradientLayerColors:(NSMutableArray*)gradientLayerColors{

_gradientLayerColors= gradientLayerColors;

[selfdrawGradientBackgroundView];

}

#pragma mark创建下标的颜色标记

- (void)setLineColorArray:(NSArray*)lineColorArray{

_lineColorArray= lineColorArray;

for(NSIntegeri =0; i < lineColorArray.count; i++) {

UIButton* btn = [UIButtonbuttonWithType:UIButtonTypeCustom];

btn.frame=CGRectMake((20+80*i),self.frame.size.height-13,15,15);

btn.backgroundColor= lineColorArray[i];

btn.tag=666+i;

[btn addTarget:selfaction:@selector(btnClict:)forControlEvents:UIControlEventTouchUpInside];

[selfaddSubview:btn];

}

}

- (void)setLineNameArray:(NSArray*)lineNameArray{

_lineNameArray= lineNameArray;

for(NSIntegeri =0; i < lineNameArray.count; i++) {

UIButton* btn = (UIButton*)[selfviewWithTag:666+ i];

UILabel* nameLabel = [[UILabelalloc]initWithFrame:CGRectMake(CGRectGetMaxX(btn.frame)+3,self.frame.size.height-15,2.0*30,18)];

nameLabel.text=self.lineNameArray[i];

nameLabel.font= [UIFontsystemFontOfSize:13.0];

[selfaddSubview:nameLabel];

}

}

- (void)btnClict:(UIButton*)btn{

for(NSIntegerlineNumber =0; lineNumber

for(NSIntegeri =0; i

UILabel* label = (UILabel*)[selfviewWithTag:3000*(lineNumber+1) + i];

if(lineNumber == btn.tag-666) {

label.hidden= !label.hidden;

}

}

CAShapeLayer*lineChartLayer =self.lineChartLayerArray[lineNumber];

if(lineNumber == btn.tag-666) {

lineChartLayer.hidden=!lineChartLayer.hidden;

}

}

}

- (void)drawRect:(CGRect)rect{

[selfline];

}

#pragma mark创建x轴的数据

- (void)createLabelX{

CGFloatmonth =self.horizontalDateArray.count;

for(NSIntegeri =0; i

CGFloatwidthlable = (self.frame.size.width-30)/month-5;

CGFloatheightlable = widthlable/2;

UILabel* LabelMonth = [[UILabelalloc]initWithFrame:CGRectMake((self.frame.size.width-30)/month* i +15,self.frame.size.height-60+heightlable*0.5, widthlable *0.6, heightlable)];

LabelMonth.tag=1000+ i;

LabelMonth.text=self.horizontalDateArray[i];

LabelMonth.font= [UIFontsystemFontOfSize:10];

[selfaddSubview:LabelMonth];

}

}

- (void)drawGradientBackgroundView{

self.gradientBackgroundView= [[UIViewalloc]initWithFrame:CGRectMake(15,0,self.bounds.size.width-30,self.bounds.size.height-60)];

[selfaddSubview:self.gradientBackgroundView];

self.gradientLayer= [CAGradientLayerlayer];

self.gradientLayer.colors=self.gradientLayerColors;

[self.gradientBackgroundView.layeraddSublayer:self.gradientLayer];

}

- (void)line

{

[selfdravLine];

for(NSIntegeri =0; i

CAShapeLayer*lineChartLayer =self.lineChartLayerArray[i];

lineChartLayer.lineWidth=1;

CABasicAnimation *pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

pathAnimation.duration=2;

pathAnimation.repeatCount=1;

pathAnimation.removedOnCompletion=YES;

pathAnimation.fromValue= [NSNumbernumberWithFloat:0.0f];

pathAnimation.toValue= [NSNumbernumberWithFloat:1.0f];

[lineChartLayeraddAnimation:pathAnimationforKey:@"strokeEnd"];

}

}

#pragma mark画折线图

- (void)dravLine{

CGFloatMaxY ;

CGFloatfirstdate = [[NSStringstringWithFormat:@"%@",self.verticalDateArray[0]]floatValue];

CGFloatlastdate = [[NSStringstringWithFormat:@"%@",[self.verticalDateArraylastObject]]floatValue];

MaxY = firstdate -lastdate;

for(NSIntegerLineNumber =0; LineNumber <2; LineNumber++){

UILabel* label = (UILabel*)[selfviewWithTag:1000];

UIBezierPath* path = [[UIBezierPathalloc]init];

path.lineWidth=1.0;

UIColor* color = [UIColorgreenColor];

[colorset];

NSArray*array =self.dataArray[LineNumber];

CGFloatarc1 = [[NSStringstringWithFormat:@"%@",array[0]]floatValue];

[pathmoveToPoint:CGPointMake(label.frame.origin.x-15, (MaxY-arc1 + lastdate) /MaxY * (self.frame.size.height-60)  )];

//创建折现点标记

for(NSIntegeri =1; i

UILabel* label1 = (UILabel*)[selfviewWithTag:1000+ i];

NSArray*array =self.dataArray[LineNumber];

CGFloatarc =[[NSStringstringWithFormat:@"%@",array[i]]floatValue];

[pathaddLineToPoint:CGPointMake(label1.frame.origin.x-30,  (MaxY -arc + lastdate) /MaxY * (self.frame.size.height-60) )];

UILabel* falglabel = [[UILabelalloc]initWithFrame:CGRectMake(label1.frame.origin.x-15, (MaxY-arc +lastdate) /MaxY * (self.frame.size.height-60)  ,40,20)];

falglabel.tag=3000* (LineNumber )+ i;

falglabel.text= [NSStringstringWithFormat:@"%.1f",arc];

falglabel.font= [UIFontsystemFontOfSize:11.0];

falglabel.textColor=self.lineColorArray[LineNumber];

[selfaddSubview:falglabel];

}

CAShapeLayer*lineChartLayer = [CAShapeLayerlayer];

lineChartLayer.path= path.CGPath;

UIColor* linecolors = (UIColor*)self.lineColorArray[LineNumber];

lineChartLayer.strokeColor= linecolors.CGColor;

lineChartLayer.fillColor= [[UIColorclearColor]CGColor];

lineChartLayer.lineWidth=5;

lineChartLayer.lineCap=kCALineCapRound;

lineChartLayer.lineJoin=kCALineJoinRound;

[self.lineChartLayerArrayaddObject:lineChartLayer];

[self.gradientBackgroundView.layeraddSublayer:lineChartLayer];

}

}

@end

下面是iphone5和7的效果图

如果是新手可以再看看我在里面用到的简单适配

因为设置坐标地方不多,适配比较简单,

#define H [UIScreen

mainScreen].bounds.size.height /667

#define W [UIScreen

mainScreen].bounds.size.width /375

分别在横向坐标数字上乘以宏定义W,纵坐标上乘以宏定义H,如下

LineView* zx = [[LineViewalloc]initWithFrame:CGRectMake(0,300*W,[UIScreenmainScreen].bounds.size.width,350*H)];

就可以达到简单的适配,是不是很简单~

//

#import"ViewController.h"

#import"LineView.h"

#define H [UIScreen

mainScreen].bounds.size.height /667

#define W [UIScreen

mainScreen].bounds.size.width /375

@interfaceViewController ()

@end

@implementationViewController

- (void)viewDidLoad{

[superviewDidLoad];

[superviewDidLoad];

self.view.backgroundColor

= [UIColorwhiteColor];

LineView* zx = [[LineViewalloc]initWithFrame:CGRectMake(0,300*W, [UIScreenmainScreen].bounds.size.width,350*H)];

//横纵坐标赋值

zx.horizontalDateArray=@[@"1d",@"2d",@"3d",@"4d",@"5d",@"6d",@"7d",@"8d",@"9d"];

zx.verticalDateArray=@[@"400",@"300",@"200",@"100",@"0"];

//背景颜色

zx.gradientLayerColors= [NSMutableArrayarrayWithArray:@[(__bridgeid)[UIColorcolorWithRed:23/255.0green:155/255.0blue:255/255.0alpha:1.0].CGColor, (__bridgeid)[UIColorcolorWithRed:10/255.0green:240/55.0blue:244/255.0alpha:1.0].CGColor]];

//设置折线颜色

zx.lineColorArray=@[ [UIColorcolorWithRed:28 /255.0green:70 /255.0blue:140 /255.0alpha:1.0],[UIColorcolorWithRed:133 /255.0green:1 /255.0blue:113 /255.0alpha:1.0]];

//设置折线的数据源

zx.dataArray=@[@[@(183),@(235),@(160),@(208),@(116),@(163),@(206),@(168),@(234)],

@[@(236),@(160),@(218),@(166),@(256),@(172),@(271),@(188),@(216)]];

//设置line名称

zx.lineNameArray =@[@"吸收",@"消耗"];

[self.viewaddSubview:zx];

}

@end

在新建的UIview类的.h里是各个属性控件和数据数组如下

//  Copyright ©

2016年RanFeiHong. All rights reserved.

//

#import

@interfaceLineView :UIView

@property

(nonatomic,strong)NSArray* dataArray;

@property(nonatomic,strong)NSArray* horizontalDateArray;

@property(nonatomic,strong)NSArray* verticalDateArray;

@property(nonatomic,strong)NSMutableArray*gradientLayerColors;

@property

(nonatomic,strong)UIColor* LineColor;

@property

(nonatomic,strong)NSArray* lineColorArray;

@property

(nonatomic,strong)NSArray* lineNameArray;

@property

(nonatomic,strong)UIBezierPath* path1;

@property(nonatomic,strong)UIView*gradientBackgroundView;

@property

(nonatomic,strong)CAGradientLayer*gradientLayer;

@property(nonatomic,strong)NSMutableArray* lineChartLayerArray;

- (instancetype)initWithFrame:(CGRect)frame;

- (void)dravLine;

- (void)line;

@end

然后在.m里建立X轴数据,写一个方法在里面画折线图,创建折线点和加上标记label。

.m如下

//  Copyright ©

2016年RanFeiHong. All rights reserved.

//

#import"LineView.h"

@implementationLineView

- (instancetype)initWithFrame:(CGRect)frame{

if(self= [superinitWithFrame:frame]){

self.backgroundColor= [UIColorwhiteColor];

self.lineChartLayerArray = [NSMutableArrayarray];

}

returnself;

}

- (void)setHorizontalDateArray:(NSArray*)horizontalDateArray{

_horizontalDateArray= horizontalDateArray;

[selfcreateLabelX];

}

- (void)setVerticalDateArray:(NSArray*)verticalDateArray{

_verticalDateArray= verticalDateArray;

}

- (void)setGradientLayerColors:(NSMutableArray*)gradientLayerColors{

_gradientLayerColors= gradientLayerColors;

[selfdrawGradientBackgroundView];

}

#pragma mark创建下标的颜色标记

- (void)setLineColorArray:(NSArray*)lineColorArray{

_lineColorArray= lineColorArray;

for(NSIntegeri =0; i < lineColorArray.count; i++) {

UIButton* btn = [UIButtonbuttonWithType:UIButtonTypeCustom];

btn.frame=CGRectMake((20+80*i),self.frame.size.height-13,15,15);

btn.backgroundColor= lineColorArray[i];

btn.tag=666+i;

[btn addTarget:selfaction:@selector(btnClict:)forControlEvents:UIControlEventTouchUpInside];

[selfaddSubview:btn];

}

}

- (void)setLineNameArray:(NSArray*)lineNameArray{

_lineNameArray= lineNameArray;

for(NSIntegeri =0; i < lineNameArray.count; i++) {

UIButton* btn = (UIButton*)[selfviewWithTag:666+ i];

UILabel* nameLabel = [[UILabelalloc]initWithFrame:CGRectMake(CGRectGetMaxX(btn.frame)+3,self.frame.size.height-15,2.0*30,18)];

nameLabel.text=self.lineNameArray[i];

nameLabel.font= [UIFontsystemFontOfSize:13.0];

[selfaddSubview:nameLabel];

}

}

- (void)btnClict:(UIButton*)btn{

for(NSIntegerlineNumber =0; lineNumber

for(NSIntegeri =0; i

UILabel* label = (UILabel*)[selfviewWithTag:3000*(lineNumber+1) + i];

if(lineNumber == btn.tag-666) {

label.hidden= !label.hidden;

}

}

CAShapeLayer*lineChartLayer =self.lineChartLayerArray[lineNumber];

if(lineNumber == btn.tag-666) {

lineChartLayer.hidden=!lineChartLayer.hidden;

}

}

}

- (void)drawRect:(CGRect)rect{

[selfline];

}

#pragma mark创建x轴的数据

- (void)createLabelX{

CGFloatmonth =self.horizontalDateArray.count;

for(NSIntegeri =0; i

CGFloatwidthlable = (self.frame.size.width-30)/month-5;

CGFloatheightlable = widthlable/2;

UILabel* LabelMonth = [[UILabelalloc]initWithFrame:CGRectMake((self.frame.size.width-30)/month* i +15,self.frame.size.height-60+heightlable*0.5, widthlable *0.6, heightlable)];

LabelMonth.tag=1000+ i;

LabelMonth.text=self.horizontalDateArray[i];

LabelMonth.font= [UIFontsystemFontOfSize:10];

[selfaddSubview:LabelMonth];

}

}

- (void)drawGradientBackgroundView{

self.gradientBackgroundView= [[UIViewalloc]initWithFrame:CGRectMake(15,0,self.bounds.size.width-30,self.bounds.size.height-60)];

[selfaddSubview:self.gradientBackgroundView];

self.gradientLayer= [CAGradientLayerlayer];

self.gradientLayer.colors=self.gradientLayerColors;

[self.gradientBackgroundView.layeraddSublayer:self.gradientLayer];

}

- (void)line

{

[selfdravLine];

for(NSIntegeri =0; i

CAShapeLayer*lineChartLayer =self.lineChartLayerArray[i];

lineChartLayer.lineWidth=1;

CABasicAnimation *pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

pathAnimation.duration=2;

pathAnimation.repeatCount=1;

pathAnimation.removedOnCompletion=YES;

pathAnimation.fromValue= [NSNumbernumberWithFloat:0.0f];

pathAnimation.toValue= [NSNumbernumberWithFloat:1.0f];

[lineChartLayeraddAnimation:pathAnimationforKey:@"strokeEnd"];

}

}

#pragma mark画折线图

- (void)dravLine{

CGFloatMaxY ;

CGFloatfirstdate = [[NSStringstringWithFormat:@"%@",self.verticalDateArray[0]]floatValue];

CGFloatlastdate = [[NSStringstringWithFormat:@"%@",[self.verticalDateArraylastObject]]floatValue];

MaxY = firstdate -lastdate;

for(NSIntegerLineNumber =0; LineNumber <2; LineNumber++){

UILabel* label = (UILabel*)[selfviewWithTag:1000];

UIBezierPath* path = [[UIBezierPathalloc]init];

path.lineWidth=1.0;

UIColor* color = [UIColorgreenColor];

[colorset];

NSArray*array =self.dataArray[LineNumber];

CGFloatarc1 = [[NSStringstringWithFormat:@"%@",array[0]]floatValue];

[pathmoveToPoint:CGPointMake(label.frame.origin.x-15, (MaxY-arc1 + lastdate) /MaxY * (self.frame.size.height-60)  )];

//创建折现点标记

for(NSIntegeri =1; i

UILabel* label1 = (UILabel*)[selfviewWithTag:1000+ i];

NSArray*array =self.dataArray[LineNumber];

CGFloatarc =[[NSStringstringWithFormat:@"%@",array[i]]floatValue];

[pathaddLineToPoint:CGPointMake(label1.frame.origin.x-30,  (MaxY -arc + lastdate) /MaxY * (self.frame.size.height-60) )];

UILabel* falglabel = [[UILabelalloc]initWithFrame:CGRectMake(label1.frame.origin.x-15, (MaxY-arc +lastdate) /MaxY * (self.frame.size.height-60)  ,40,20)];

falglabel.tag=3000* (LineNumber )+ i;

falglabel.text= [NSStringstringWithFormat:@"%.1f",arc];

falglabel.font= [UIFontsystemFontOfSize:11.0];

falglabel.textColor=self.lineColorArray[LineNumber];

[selfaddSubview:falglabel];

}

CAShapeLayer*lineChartLayer = [CAShapeLayerlayer];

lineChartLayer.path= path.CGPath;

UIColor* linecolors = (UIColor*)self.lineColorArray[LineNumber];

lineChartLayer.strokeColor= linecolors.CGColor;

lineChartLayer.fillColor= [[UIColorclearColor]CGColor];

lineChartLayer.lineWidth=5;

lineChartLayer.lineCap=kCALineCapRound;

lineChartLayer.lineJoin=kCALineJoinRound;

[self.lineChartLayerArrayaddObject:lineChartLayer];

[self.gradientBackgroundView.layeraddSublayer:lineChartLayer];

}

}

@end

失误之处请大家多多指正。

你可能感兴趣的:(简易的双折线图实现)