前言:
在很多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;