折线图

前言：

在很多app应用会有数据统计功能，为此就要用到图表，在这里我先说折线图实现原理。

大家都知道，折线图上点的位置大小是会大于屏幕宽高，为此，我们要通过个等比例计算，计算出该点在屏幕的具体位置。

公式：

      设折线点p(x,y) , 视图view的size(width,height), 纵坐标y最大值ymax，横坐标x最大值xmax.

      x = width/xmax*(xmax-x)

      y = height/ymax*(ymax-y)

需要注意的有2点：

   1、y轴上的值应该通过最大值来等比例划分（如果不是等比例划分，那么计算出来的折线点y是不对的）。

   2、多个折线共存一个视图，那么y轴最大值应该是这些折线中取最大ymax，而不是每次绘制一根折线，取这根折线最大值ymax。

---

效果图：

首先，我们来绘制x，y轴。

我这里为了方便，所以就在drawRect方法里直接绘制。

接下来，就是绘制折线图背景图层以及x轴月份（为什么不连同y轴的值一起绘制呢，那是因为y轴的值是要根据传入的最大值来绘制)

接下来，外部我传个y轴最大值verticalMaxValue = 1000和y轴值单位，然后绘制y轴上的点以及值单位、虚线。

通过传入的最大值verticalMaxValue，来10等份算出y轴上所有值。

绘制y轴上的点以及单位、虚线

最后，外部传入折线点和路径颜色、点颜色，通过我上面所说的公式来算出每个点的x，y,利用贝塞尔将这些点连起来。

再通过set方法把曲线路径颜色，点颜色传入。

_chartView.values = @[

@[@500,@200,@600,@400,@800,@900,@700,@500,@300,@100],

@[@1000,@800,@300,@600,@100,@400,@700,@200],

@[@100,@200,@700,@300,@600,@400,@800,@700,@300,@600]

];

_chartView.colorChartValues = @[[UIColor greenColor],[UIColor blueColor],[UIColor yellowColor]];

_chartView.colorPointValus = @[[UIColor magentaColor],[UIColor cyanColor],[UIColor purpleColor]];

结尾，动态绘制路径，默认不动态绘制路径，需要手动打开，即在外部将改成YES即可。

_chartView.isAnimation = YES;

源码地址github

总结：在绘制折线图的时候需要注意我上面所说的2点，那么就可以轻轻松松绘制出来了。