13518219792
第一 折线图实现
创新互联专业为企业提供市中网站建设、市中做网站、市中网站设计、市中网站制作等企业网站建设、网页设计与制作、市中企业网站模板建站服务，10余年市中做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
.1) 自定义视图实现
.2)关键技术实现
.3) 方法调用
.4) 效果展示
第二 走势曲线图实现
.1) 导入DJChart第三方库
.2)横竖轴参数设置
.3) 方法调用
.4) 效果展示
第三 画线图实现
.1) 导入ZXQuartz第三方库
.2) 自定义视图,画各种图形
.3) 方法调用
.4) 效果展示
第四 柱状图实现
.1) 导入ZXQuartz第三方库
.2)横竖轴参数设置
.3) 方法调用
.4) 效果展示
第五 各式图形实现
.1) 导入DJChart第三方库
.2)关键技术实现
.3) 方法调用
.4) 效果展示
第六 饼状图实现
.1) 关键技术实现
.2) 方法调用
.3) 效果展示
总结
前言
大家经常在做项目过程中,都会遇到一些画图,例如我们在天气预报中,统计这一周的天气状况变化时,这时我们就需要用折线图来进行统计(图一);例如统计就业率时,我们可能会用到柱状图等等.
首先我们来看看这样的折线该怎么实现呢?.现在我们来看看整体效果图.
现在我们来看看各种不同的图形到底是什么样的.
1) 折线图
2) 走势趋势图
3) 画线图
4) 柱状图
5) 各种图形
6)饼状图
好了看了上面各种折线图,大家一定很关心这些折线图是如何完成绘制的,下面我们就来看看各种图形的具体实现.
第一 折线图实现
1) 自定义视图
2) 关键技术实现
3 方法调用
4) 效果展示
第二 走势曲线图实现
1) 导入DJChart第三方库
2) 横竖轴参数设置
3) 方法调用
4) 效果图展示
第三 画线图实现
1) 导入ZXQuartz第三方库
2) 自定义视图,画各种图形
3) 方法调用
4) 效果图展示
第四 柱状图实现
1) 导入ZXQuartz第三方库
2) 关键技术实现
3) 方法调用
4) 效果图展示
第六 饼状图实现
1) 关键技术实现
2) 方法调用
3) 效果图展示
总结
是不是看起来很简单,把所有的绘图方式都集中起来,以后大家要用到就不用那么麻烦了.
公司的项目要使用到折线图，然后用的是第三方Charts框架，不得不说Charts很强大的一个第三方，几乎所有你想要的功能都可以做到，刚开始使用的时候很多功能没有找到，比如只标记最高点，滑动的时候数值变化等等，下面是简单的效果示意图。
现在我们开始一步一步来实现图中的效果吧。
在控制器中我们首先需要创建一个LineChartView的对象，在Charts框架中折线图用到的类是 LineChartView.h
在 LineChartView 中有两个属性 rightAxis 和 leftAxis 属于 ChartYAxis 类，是分别用来设置左边Y轴和右边Y轴的，可以根据自己的需求去设置。
在这里要注意的是，一般情况下y轴的数据是double类型的并且是没有特殊符号的，如果想要做到像图中的那样的百分数类型是要去设置的，然后我们发现 ChartYAxis 类中有一个属性 valueFormatter ,这个属性就是用来设置数据格式的，但比较麻烦的是这个属性必须遵循 IChartAxisValueFormatter 的协议，所以我们需要去自定义一个 SymbolsValueFormatter 类来完成
在.m的代理方法中
y轴设置完了，现在我们来设置x轴，在 LineChartView 中也有个属性 xAxis 使用来设置x轴的样式的，它属于 ChartXAxis 类，现在我们来创建它
到这里我们 _lineView 的x轴和y轴都设置好了，但是还少了一个选中数据滑动的时候值会变化的标签， LineChartView 中有个 marker 属性就是我们要找的， marker 属性遵循 IChartMarker 协议，是id类型，找了好久终于发现 ChartMarkerView 和 ChartMarkerImage 都有遵循 IChartMarker 协议，都是可以用的，可以根据自己的需求自己选择
折线图的数据 data 属性是属于 LineChartData 类，所以setData方法需要返回一个 LineChartData 的对象，但是在 LineChartData 的对象的初始化方法中 - (nonnull instancetype)initWithDataSets:(NSArrayid IChartDataSet * _Nullable)dataSets 发现还需要一个装有 LineChartDataSet 的数组， LineChartDataSet 其实就是每一条折线，而绘制每一条折线又需要数据，所以我们先从数据开始一步一步创建。
上面创建的是模拟日期的格式，从02-1到03-21，x轴默认的数据格式也是double类型，所以我们需要像上面取设置y轴的数据格式那样来设置x轴的日期，我们新建 DateValueFormatter 类遵循 IChartAxisValueFormatter 协议，然后重写init方法，将x轴的数组传过去，在 DateValueFormatter 类中定义一个全局数组，在协议方法中去返回数据
x轴的数据设置完，我们需要来设置Y轴的数据了,因为是两条折线图，所以我们需要两个数组数据
数据完成后，我们就要来创建折线了，创建两个LineChartDataSet对象其中有一个对象是要返回最高点的值，所以要设置 valueFormatter 和前面的一样，重写了init方法
SetValueFormatter.h和前面的一样要继承协议,.m文件中定义了两个全局属性一个数组和一个记录最大值。
这样写好就会只有最高值显示，其他都显示 @""
前面两个 LineChartDataSet 对象都添加进了数组，接下来我们就可以创建 LineChartData 对象，然后返回就可以了
最后还有个 ChartView 的选中数据代理方法，主要用来显示选中折线数据的时候label值的变化
最后附上demo链接 ChartsDemo
-(void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, _lineWidth);
CGContextSetStrokeColorWithColor(context, _lineColor.CGColor);
CGContextMoveToPoint(context, 10, 10);
CGContextAddLineToPoint(context, 50, 30);
CGContextAddLineToPoint(context, 65, 50);
CGContextStrokePath(context);
}
无非是在UIView重写这个drawRect方法。这样最便捷。
CGContextMoveToPoint是画线的起点，CGContextAddLineToPoint是从起点添加一条线到另一个点p2，可以继续从p2加一条线到p3，不限制。
你也可以画若干条线，
只需CGContextMoveToPoint重新移动到一个新的起点，继续上面的步骤。
上面的moveToPoint,addLineToPoint并不会马上把线绘制出来，只是规划好要绘制的内容，
执行CGContextStrokePath，才最终把线条绘制出来。
下面是这个系列的几篇汇总：
1、 折线图
2、 柱状图
3、 饼状图
4、 k线图
