版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
【移動應(yīng)用開發(fā)技術(shù)】iOS如何實現(xiàn)多條折線圖封裝
效果圖如下：/upload/information/20200623/126/121461.png/upload/information/20200623/126/121462.png1、封裝類.h#define
XYQColor(r,
g,
b)
[UIColor
colorWithRed:(r)/255.0
green:(g)/255.0
blue:(b)/255.0
alpha:1.0]
#define
XYQRandomColor
XYQColor(arc4random_uniform(256),
arc4random_uniform(256),
arc4random_uniform(256))
#define
MARGIN
30
//
坐標軸與畫布間距
#define
Y_EVERY_MARGIN
20
//
y軸每一個值的間隔數(shù)
#import
<UIKit/UIKit.h>
//
線條類型
typedef
NS_ENUM(NSInteger,
LineType)
{
LineType_Straight,
//
折線
LineType_Curve
//
曲線
};
@interface
BezierCurveView
:
UIView
//初始化畫布
+(instancetype)initWithFrame:(CGRect)frame;
//畫多根折線圖
-(void)drawMoreLineChartViewWithX_Value_Names:(NSMutableArray
*)x_names
TargetValues:(NSMutableArray
*)targetValues
LineType:(LineType)
lineType;
@end.m#import
"BezierCurveView.h"
static
CGRect
myFrame;
@interface
BezierCurveView
()
@end@implementation
BezierCurveView
//初始化畫布
+(instancetype)initWithFrame:(CGRect)frame{
BezierCurveView
*bezierCurveView
=
[[BezierCurveView
alloc]init];
bezierCurveView.frame
=
frame;
//背景視圖
UIView
*backView
=
[[UIView
alloc]
initWithFrame:CGRectMake(0,
0,
frame.size.width,
frame.size.height)];
backView.backgroundColor
=
[UIColor
clearColor];
[bezierCurveView
addSubview:backView];
myFrame
=
frame;
return
bezierCurveView;
}/**
*
畫坐標軸
*/
-(void)drawXYLine:(NSMutableArray
*)x_names{
UIBezierPath
*path
=
[UIBezierPath
bezierPath];
//1.Y軸、X軸的直線
[path
moveToPoint:CGPointMake(MARGIN,
CGRectGetHeight(myFrame)-MARGIN)];
[path
addLineToPoint:CGPointMake(MARGIN,
MARGIN)];
[path
moveToPoint:CGPointMake(MARGIN,
CGRectGetHeight(myFrame)-MARGIN)];
[path
addLineToPoint:CGPointMake(CGRectGetWidth(myFrame),
CGRectGetHeight(myFrame)-MARGIN)];
//
//2.添加箭頭
//
[path
moveToPoint:CGPointMake(MARGIN,
MARGIN)];
//
[path
addLineToPoint:CGPointMake(MARGIN-5,
MARGIN+5)];
//
[path
moveToPoint:CGPointMake(MARGIN,
MARGIN)];
//
[path
addLineToPoint:CGPointMake(MARGIN+5,
MARGIN+5)];
//
//
[path
moveToPoint:CGPointMake(CGRectGetWidth(myFrame),
CGRectGetHeight(myFrame)-MARGIN)];
//
[path
addLineToPoint:CGPointMake(CGRectGetWidth(myFrame)-5,
CGRectGetHeight(myFrame)-MARGIN-5)];
//
[path
moveToPoint:CGPointMake(CGRectGetWidth(myFrame),
CGRectGetHeight(myFrame)-MARGIN)];
//
[path
addLineToPoint:CGPointMake(CGRectGetWidth(myFrame)-5,
CGRectGetHeight(myFrame)-MARGIN+5)];
//3.添加索引格
//X軸
for
(int
i=0;
i<x_names.count;
i++)
{
CGFloat
X
=
MARGIN
+
(CGRectGetWidth(myFrame)-30)/x_names.count*(i+1)-(CGRectGetWidth(myFrame)-30)/x_names.count/2.0;
CGPoint
point
=
CGPointMake(X,CGRectGetHeight(myFrame)-MARGIN);
[path
moveToPoint:point];
[path
addLineToPoint:CGPointMake(point.x,
point.y-3)];
}
//Y軸（實際長度為200,此處比例縮小一倍使用）
for
(int
i=0;
i<11;
i++)
{
CGFloat
Y
=
CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i;
CGPoint
point
=
CGPointMake(MARGIN,Y);
[path
moveToPoint:point];
[path
addLineToPoint:CGPointMake(point.x+3,
point.y)];
}
//4.添加索引格文字
//X軸
for
(int
i=0;
i<x_names.count;
i++)
{
CGFloat
X
=
MARGIN
+
(CGRectGetWidth(myFrame)-30)/x_names.count/2.0
+
(CGRectGetWidth(myFrame)-30)/x_names.count*i-(CGRectGetWidth(myFrame)-30)/x_names.count/2.0;
UILabel
*textLabel
=
[[UILabel
alloc]
initWithFrame:CGRectMake(X,
CGRectGetHeight(myFrame)-MARGIN,
(CGRectGetWidth(myFrame)-60)/x_names.count,
20)];
textLabel.text
=
x_names[i];
textLabel.font
=
[UIFont
systemFontOfSize:10];
textLabel.textAlignment
=
NSTextAlignmentCenter;
textLabel.textColor
=
[UIColor
blueColor];
[self
addSubview:textLabel];
}
//Y軸
for
(int
i=0;
i<11;
i++)
{
CGFloat
Y
=
CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i;
UILabel
*textLabel
=
[[UILabel
alloc]
initWithFrame:CGRectMake(0,
Y-5,
MARGIN,
10)];
textLabel.text
=
[NSString
stringWithFormat:@"%d",10*i];
textLabel.font
=
[UIFont
systemFontOfSize:10];
textLabel.textAlignment
=
NSTextAlignmentCenter;
textLabel.textColor
=
[UIColor
redColor];
[self
addSubview:textLabel];
}
//5.渲染路徑
CAShapeLayer
*shapeLayer
=
[CAShapeLayer
layer];
shapeLayer.path
=
path.CGPath;
shapeLayer.strokeColor
=
[UIColor
blackColor].CGColor;
shapeLayer.fillColor
=
[UIColor
clearColor].CGColor;
shapeLayer.borderWidth
=
2.0;
[self.subviews[0].layer
addSublayer:shapeLayer];
}/**
*
畫多根折線圖
*/
-(void)drawMoreLineChartViewWithX_Value_Names:(NSMutableArray
*)x_names
TargetValues:(NSMutableArray
*)targetValues
LineType:(LineType)
lineType{
//1.畫坐標軸
[self
drawXYLine:x_names];
for
(int
j=0;
j<targetValues.count;
j++)
{
//2.獲取目標值點坐標
NSMutableArray
*allPoints
=
[NSMutableArray
array];
for
(int
i=0;
i<[targetValues[j]
count];
i++)
{
CGFloat
doubleValue
=
2*[targetValues[j][i]
floatValue];
//目標值放大兩倍
CGFloat
X
=
MARGIN
+
(CGRectGetWidth(myFrame)-30)/x_names.count*(i+1)-(CGRectGetWidth(myFrame)-30)/x_names.count/2.0;
CGFloat
Y
=
CGRectGetHeight(myFrame)-MARGIN-doubleValue;
CGPoint
point
=
CGPointMake(X,Y);
UIBezierPath
*path
=
[UIBezierPath
bezierPathWithRoundedRect:CGRectMake(point.x-1,
point.y-1,
2.5,
2.5)
cornerRadius:2.5];
CAShapeLayer
*layer
=
[CAShapeLayer
layer];
layer.strokeColor
=
[UIColor
purpleColor].CGColor;
layer.fillColor
=
[UIColor
purpleColor].CGColor;
layer.path
=
path.CGPath;
[self.subviews[0].layer
addSublayer:layer];
[allPoints
addObject:[NSValue
valueWithCGPoint:point]];
}
//3.坐標連線
UIBezierPath
*path
=
[UIBezierPath
bezierPath];
[path
moveToPoint:[allPoints[0]
CGPointValue]];
CGPoint
PrePonit;
switch
(lineType)
{
case
LineType_Straight:
//直線
for
(int
i
=1;
i<allPoints.count;
i++)
{
CGPoint
point
=
[allPoints[i]
CGPointValue];
[path
addLineToPoint:point];
}
break;
case
LineType_Curve:
//曲線
for
(int
i
=0;
i<allPoints.count;
i++)
{
if
(i==0)
{
PrePonit
=
[allPoints[0]
CGPointValue];
}else{
CGPoint
NowPoint
=
[allPoints[i]
CGPointValue];
[path
addCurveToPoint:NowPoint
controlPoint1:CGPointMake((PrePonit.x+NowPoint.x)/2,
PrePonit.y)
controlPoint2:CGPointMake((PrePonit.x+NowPoint.x)/2,
NowPoint.y)];
//三次曲線
PrePonit
=
NowPoint;
}
}
break;
}
CAShapeLayer
*shapeLayer
=
[CAShapeLayer
layer];
shapeLayer.path
=
path.CGPath;
shapeLayer.strokeColor
=
XYQRandomColor.CGColor;
shapeLayer.fillColor
=
[UIColor
clearColor].CGColor;
shapeLay
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 農(nóng)業(yè)職業(yè)經(jīng)理人考試營養(yǎng)與食品安全知識與試題答案
- 2025年考研西醫(yī)綜合真題答案及解析大
- 電大土木工程本科《工程地質(zhì)》在線形考(作業(yè)1至4)試題及答案
- 醫(yī)學(xué)人文考試試題及答案
- 2026字節(jié)跳動校招試題及答案
- 初級園林綠化試題及答案
- 2026黑龍江農(nóng)業(yè)職業(yè)技術(shù)學(xué)院公開招聘博士3人參考題庫附答案
- 中國火箭公司2026校園招聘考試備考題庫附答案
- 北京市公安局輔警崗位招聘300人備考題庫附答案
- 吉安市2025年度市直事業(yè)單位公開選調(diào)工作人員【70人】備考題庫必考題
- 甲狀腺乳腺外科診療規(guī)范
- 退換貨方案及措施
- 麻醉科常用耗材分類與管理要點
- 材料力學(xué)性能檢驗工安全教育培訓(xùn)手冊
- 小說影視化改編的深度解析
- JJF 2214-2025 機動車檢測用氣象單元校準規(guī)范
- 嚴格招標需求管理制度
- 外科洗手操作標準與流程
- 2024年注會考試《財務(wù)管理》真題及答案
- 種植樹木協(xié)議合同協(xié)議
- 2024~2025學(xué)年安徽省銅陵市銅官區(qū)第一學(xué)期期末質(zhì)量監(jiān)測 八年級英語試卷（含答案無聽力原文及音頻）
評論
0/150
提交評論