折線圖能用到的地方并不是太多,這兒測試了一個簡單的雙折線圖,要用到的可以看看。
動態效果圖
再看看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)];
就可以達到簡單的適配,是不是很簡單~
接下來進入正題
首先先建一個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
失誤之處請大家多多指正。