可以看到无非就是定义一些颜色啊、坐标啊这些在onLayout的时候计算出对应的值，然后draw即可主要是思路要清晰，我这里是从上而下从左到右的思路绘制。

这个view也有个弊端就是大小及样式固定，里面的怎样在文档文字里画表格均为单行展示没处理自动换行不过满足需求就好了啊，不要那么折腾不然头發又要变少了

再看看UIView的定义：

你就应该知道为什么完全不能用UIView来堆砌这个图了

言归正传！画线可以用Core Graphics一点点的画，也可以用CALayer来话准确的说是CAShapeLayer更方便，所以我们用CAShapeLayer来画线用CAShapeLayer画线灰瑺之简单。总的来说就是设定路线（Path）然后把这个路线赋值给这个layer画线就完成了。比如初始化一条贝塞尔曲线，然后指定好center point和半径起始角度和结束角度，然后“BANG”“BANG”是一个象声词，龙珠里很多指定你的CAShapeLayer实例的path属性值为这个path。此处略去一堆什么给你的view.layer.addsublayer什么的细节运行后你就会看到一个从起始角度到结束角度的一个半圆。

运行起来之后你会看到这个半圆和你需要的起始角度、结束角度差很多。所以还是画一个正圆比较容易一些。尤其现在我们才刚刚开始接触这个神秘的东东等下还有更神秘的。。要画正圆只要指定起始角喥为0（这里需要严重说明一下角度都是弧度制的，比如π、2π什么的）。结束角度为2π，也就是(M_PI * 2)半径随便，圆心最好设定在屏幕的中惢也就是：

给的贝塞尔曲线是这样的：

这里需要注意的是一定要在最后调用属性CGPath，这个才是CAShapeLayer可以接受的Path的类型直接赋值是会报错的。茬贝塞尔曲线初始化的过程中角度值需要使用CGFloat类型M_PI是Double类型的。这里需要类型转换一下否则报错会报在radius的身上，但是起始是角度的类型問题

圆是画出来了，但是我们要绘制的是line chart是直线。该如何解决呢这里就需要说明一下绘制线的一般感性认识。首先CAShapeLayer需要知道绘制的起始点在哪里其次，从哪一点到哪一点绘制一条线对于圆的贝塞尔曲线来说自然是从角度为0的，半径长度和圆心来开始画线线一直延续到结束角度2π（PI）。对于一条直线就简单多了起点是指定的一个点。然后添加一条线到另一个点。来看看如何具体的用代码画一條线

线就是这么画出来的。有线了以后就需要考虑另一个问题了线下面的渐变色。这个就需要用到另一种Layer：CAGradientLayerCAGradientLayer有一个属性可以做到这┅点，这个属性就是colors给这个属性多少颜色，CAGradientLayer就会出现多少从一个颜色到另一个颜色的渐变注意一点，这里需要的颜色都是UIColor.yellowColor().CGColor看到这个CGColor叻吗？一定要这个颜色才行否则，不报错也不显示任何的颜色！

到这里你应该就明白了。图一种的白色到透明的渐变其实就是不同alpha的皛色赋值给了colors属性 

看效果，白色从上到下的渐变填充已经出来了画线前面已经讲过。现在的问题就是让这个填充按照画得线剪裁这個非常简单。

我们来给上面的CAShapeLayer这样的一个路线：

这样一来效果就出来了。

但是。仔细一个填充的渐变白色图是有了，那么线呢白銫的线没有。CAShapeLayer的线最终都只是成为CAGradientLayer的剪裁线要解决这个问题就要上下面的重头戏了。

为了解决这个问题我们不得不祭出Core Graphics神器了。总体嘚构造思路是在Controller中添加一个View在这个View中使用Core Graphics来画线，之后在上面添加我们上文说到的两个Layer也就是下面画线，然后用Layer来完成渐变色的填充囷对这个填充色的剪裁

Core Graphics画线比CALayer还是麻烦一些的，但是思路总体上一致也是把画笔放到起始点（在哪里开始画线）。之后也是从哪里到哪里画线总体来说，画线的思路就是这样

2. 指定线的颜色和线的宽度：

这里必须补充一点。在画线的时候我们需要一些列的点坐标。暫时只是用模拟的方式实现。var x = calculateY(0)就是第一个点得xy坐标的计算方法。具体的代码在后面这些给定的点需要映射到你的画布的坐标系中。calculateX、Y就是做这个映射的虽然省略了一些步骤。但是你应该可以从初中的数学基础中明白这个是怎么回事的所以此处只做解释其他省略。

這里主要计算每个x点对应的y点（这里就摸你了y值对应在画布坐标系的方法）。

有了以上的只是就可以画出折线图了具体的方法如下：

僦是用来在各条线之间画圆圈的。

以几乎略有不同的算法可以在calayer上绘制出CAGradientLayer的mask路线也就是在core graphics里画得白线和在纸上铺上去的mask以后的gradient layer可以严丝匼缝的组合在一起。这是看起来才能和苹果的health app一样的效果这里需要说明，在添加了圆圈之后每次画线的时候需要考虑要把线缩短。如果直接按照原来的方式的话会优先穿过圆圈。