ios 画线平滑_iOS 画折线图(包括平滑曲线和渐变阴影)

前几天接到业务需求 需要画折线图，网上也看了许多的资料，也有许多封装好的第三方类库比如AAChartKit、XYPieChart、PNChart等好多，不过这些类库大多封装的太厉害了，我这边的业务需求有比较简单，就是单纯的绘制折线图并保证是平滑的曲线，而且要有添加渐变阴影。说下我的思路：

先画整个表的横纵坐标系

画出纵坐标延伸的网格线

添加横纵坐标数字

绘制折线

变成平滑曲线

绘制渐变阴影

最后得到效果是这样的

animiation.gif

具体的代码如下：

首先画出横纵坐标系,以及横网格线

-(void)makeChartXView{

//X轴

layerX = [CAShapeLayer layer];

layerX.frame = CGRectMake(25,LABLE_HEIGHT + 25, LABLE_WIDTH, 1);

layerX.backgroundColor = [UIColor colorFromHexCode:@"d8d8d8"].CGColor;

[self.layer addSublayer:layerX];

}

-(void)makeChartYView{

//左侧纵坐标轴

layerY = [CAShapeLayer layer];

layerY.frame = CGRectMake(25,25, 1, LABLE_HEIGHT);

layerY.backgroundColor = [[UIColor colorFromHexCode:@"d8d8d8"] CGColor];

[self.layer addSublayer:layerY];

float height= 30;

// 纵坐标上的横线

for (int i=0; i<5; i++) {

if (i!=5) {

CAShapeLayer *layer5 = [CAShapeLayer layer];

layer5.frame = CGRectMake(0, i*height,LABLE_WIDTH, 0.5f);

layer5.backgroundColor = [[UIColor colorFromHexCode:@"d8d8d8"] CGColor];

[layerY addSublayer:layer5];

}

}

// 右侧侧纵轴线

CAShapeLayer *layerLeft = [CAShapeLayer layer];

layerLeft.frame = CGRectMake(VIEW_WIDTH-2,25, 0.5f, LABLE_HEIGHT);

layerLeft.backgroundColor = [[UIColor colorFromHexCode:@"d8d8d8"] CGColor];<