首先我得感谢某位博主,非常抱歉,因为之前直接下载博主提供这篇文章的demo,然后去研究了,没记住博主的名字。再次非常感谢。

而这个dome我又修改了一些,完善了一些不美观的bug,当然还有,后面会陆续更新。

1 、一开始需要给坐标轴初始一个画布

//初始化画布
+(instancetype)initWithFrame:(CGRect)frame{//找到名称叫BezierCurveView的xib视图BezierCurveView *bezierCurveView = [[NSBundle mainBundle] loadNibNamed:@"BezierCurveView" owner:self options:nil].lastObject;bezierCurveView.frame = frame;//背景视图UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];backView.backgroundColor = XYQColor(255, 229, 239);[bezierCurveView addSubview:backView];myFrame = frame;return bezierCurveView;
}

2、然后画坐标轴,包括x、y轴的直线、箭头、字符串的索引、路径的渲染。

/***  画坐标轴*/
-(void)drawXYLine:(NSMutableArray *)x_names AdddistanceValues:(NSInteger )adddistance StartingValues:(NSInteger)starting ProportionValuess:(NSInteger)proportion{UIBezierPath *path = [UIBezierPath bezierPath];//1.Y轴、X轴的直线[path moveToPoint:CGPointMake(MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];[path addLineToPoint:CGPointMake(MARGIN+adddistance, MARGIN)];[path moveToPoint:CGPointMake(MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];[path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];//2.添加箭头[path moveToPoint:CGPointMake(MARGIN+adddistance, MARGIN)];[path addLineToPoint:CGPointMake(MARGIN-5+adddistance, MARGIN+5)];[path moveToPoint:CGPointMake(MARGIN+adddistance, MARGIN)];[path addLineToPoint:CGPointMake(MARGIN+5+adddistance, MARGIN+5)];[path moveToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];[path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN-5+adddistance, CGRectGetHeight(myFrame)-MARGIN-5)];[path moveToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];[path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN-5+adddistance, CGRectGetHeight(myFrame)-MARGIN+5)];//3.添加索引格//X轴for (int i=0; i<x_names.count; i++) {CGFloat X = MARGIN + MARGIN*(i+1);CGPoint point = CGPointMake(X+adddistance,CGRectGetHeight(myFrame)-MARGIN);[path moveToPoint:point];[path addLineToPoint:CGPointMake(point.x, point.y-3)];}//Y轴(实际长度为200,此处比例缩小一倍使用)for (int i=0; i<11; i++) {CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i;CGPoint point = CGPointMake(MARGIN+adddistance,Y);[path moveToPoint:point];[path addLineToPoint:CGPointMake(point.x+3, point.y)];}//4.添加索引格文字//X轴for (int i=0; i<x_names.count+1; i++) {CGFloat X = MARGIN + 15 + MARGIN*i;UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(X+adddistance, CGRectGetHeight(myFrame)-MARGIN, MARGIN, 20)];if(i < x_names.count){textLabel.text = x_names[i];}else{textLabel.text = @"年/月";}textLabel.font = [UIFont systemFontOfSize:10];textLabel.textAlignment = NSTextAlignmentCenter;textLabel.textColor = [UIColor blueColor];[self addSubview:textLabel];}//Y轴for (int i=0; i<11; i++) {CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i;UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, Y-5, MARGIN+adddistance, 10)];textLabel.text = [NSString stringWithFormat:@"%ld",starting+proportion*10*i];textLabel.font = [UIFont systemFontOfSize:10];textLabel.textAlignment = NSTextAlignmentCenter;textLabel.textColor = [UIColor redColor];[self addSubview:textLabel];}//5.渲染路径CAShapeLayer *shapeLayer = [CAShapeLayer layer];shapeLayer.path = path.CGPath;shapeLayer.strokeColor = [UIColor blackColor].CGColor;shapeLayer.fillColor = [UIColor clearColor].CGColor;shapeLayer.borderWidth = 2.0;[self.subviews[0].layer addSublayer:shapeLayer];
}

3、实现的方法

/***  画折线图*  @param x_names      x轴值的所有值名称*  @param targetValues 所有目标值*  @param lineType     直线类型*  @param adddistance  y轴的字符串长度的增加距离*  @param starting     坐标轴原点的大小数值*  @param proportion   y轴上的数值比例差为10的倍数*/
-(void)drawLineChartViewWithX_Value_Names:(NSMutableArray *)x_names TargetValues:(NSMutableArray *)targetValues LineType:(LineType) lineType AdddistanceValues:(NSInteger )adddistance  StartingValues:(NSInteger)starting ProportionValuess:(NSInteger)proportion;
/***  画柱状图*  @param x_names      x轴值的所有值名称*  @param targetValues 所有目标值*  @param adddistance  y轴的字符串长度的增加距离*  @param starting     坐标轴原点的大小数值*  @param proportion   y轴上的数值比例差为10的倍数*/
-(void)drawBarChartViewWithX_Value_Names:(NSMutableArray *)x_names TargetValues:(NSMutableArray *)targetValues AdddistanceValues:(NSInteger )adddistance  StartingValues:(NSInteger)starting ProportionValuess:(NSInteger)proportion;

4、折线图的实现

/***  画折线图*/
-(void)drawLineChartViewWithX_Value_Names:(NSMutableArray *)x_names TargetValues:(NSMutableArray *)targetValues LineType:(LineType) lineType AdddistanceValues:(NSInteger )adddistance  StartingValues:(NSInteger)starting ProportionValuess:(NSInteger)proportion{//1.画坐标轴
    [self drawXYLine:x_names AdddistanceValues:adddistance StartingValues:starting ProportionValuess:proportion];NSMutableArray * targetValues1 =[[NSMutableArray alloc]init];for (int i=0; i<targetValues.count; i++  ){CGFloat coed =[targetValues[i] integerValue];[targetValues1 addObject:@((coed-starting)/proportion)];}//2.获取目标值点坐标NSMutableArray *allPoints = [NSMutableArray array];for (int i=0; i<targetValues1.count; i++) {CGFloat doubleValue = 2*[targetValues1[i] floatValue]; //目标值放大两倍CGFloat X = MARGIN+adddistance + MARGIN*(i+1);CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-doubleValue;CGPoint point = CGPointMake(X,Y);UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(point.x-1, point.y-1, 2.5, 2.5) cornerRadius:2.5];CAShapeLayer *layer = [CAShapeLayer layer];layer.strokeColor = [UIColor purpleColor].CGColor;layer.fillColor = [UIColor purpleColor].CGColor;layer.path = path.CGPath;[self.subviews[0].layer addSublayer:layer];[allPoints addObject:[NSValue valueWithCGPoint:point]];}//3.坐标连线UIBezierPath *path = [UIBezierPath bezierPath];[path moveToPoint:[allPoints[0] CGPointValue]];CGPoint PrePonit;switch (lineType) {case LineType_Straight: //直线for (int i =1; i<allPoints.count; i++) {CGPoint point = [allPoints[i] CGPointValue];[path addLineToPoint:point];}break;case LineType_Curve:   //曲线for (int i =0; i<allPoints.count; i++) {if (i==0) {PrePonit = [allPoints[0] CGPointValue];}else{CGPoint NowPoint = [allPoints[i] CGPointValue];[path addCurveToPoint:NowPoint controlPoint1:CGPointMake((PrePonit.x+NowPoint.x)/2, PrePonit.y) controlPoint2:CGPointMake((PrePonit.x+NowPoint.x)/2, NowPoint.y)]; //三次曲线PrePonit = NowPoint;}}break;}CAShapeLayer *shapeLayer = [CAShapeLayer layer];shapeLayer.path = path.CGPath;shapeLayer.strokeColor = [UIColor greenColor].CGColor;shapeLayer.fillColor = [UIColor clearColor].CGColor;shapeLayer.borderWidth = 2.0;[self.subviews[0].layer addSublayer:shapeLayer];//4.添加目标值文字for (int i =0; i<allPoints.count; i++) {UILabel *label = [[UILabel alloc] init];label.textColor = [UIColor purpleColor];label.textAlignment = NSTextAlignmentCenter;label.font = [UIFont systemFontOfSize:10];[self.subviews[0] addSubview:label];if (i==0) {CGPoint NowPoint = [allPoints[0] CGPointValue];label.text = [NSString stringWithFormat:@"%.0lf",starting+proportion*(CGRectGetHeight(myFrame)-NowPoint.y-MARGIN)/2];label.frame = CGRectMake(NowPoint.x-MARGIN/2, NowPoint.y-20, MARGIN+adddistance, 20);PrePonit = NowPoint;}else{CGPoint NowPoint = [allPoints[i] CGPointValue];if (NowPoint.y<PrePonit.y) {  //文字置于点上方label.frame = CGRectMake(NowPoint.x-MARGIN/2, NowPoint.y-20, MARGIN+adddistance, 20);}else{ //文字置于点下方label.frame = CGRectMake(NowPoint.x-MARGIN/2, NowPoint.y, MARGIN+adddistance, 20);}label.text = [NSString stringWithFormat:@"%.0lf",starting+proportion*(CGRectGetHeight(myFrame)-NowPoint.y-MARGIN)/2];PrePonit = NowPoint;}}
}

5、柱状图的实现

/***  画柱状图*/
-(void)drawBarChartViewWithX_Value_Names:(NSMutableArray *)x_names TargetValues:(NSMutableArray *)targetValues AdddistanceValues:(NSInteger )adddistance  StartingValues:(NSInteger)starting ProportionValuess:(NSInteger)proportion{//1.画坐标轴
    [self drawXYLine:x_names AdddistanceValues:adddistance StartingValues:starting ProportionValuess:proportion];NSMutableArray * targetValues1 =[[NSMutableArray alloc]init];for (int i=0; i<targetValues.count; i++  ){CGFloat coed =[targetValues[i] integerValue];[targetValues1 addObject:@((coed-starting)/proportion)];}//2.每一个目标值点坐标for (int i=0; i<targetValues1.count; i++) {CGFloat doubleValue = 2*[targetValues1[i] floatValue]; //目标值放大两倍CGFloat X = MARGIN + MARGIN*(i+1)+5;CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-doubleValue;UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(X-MARGIN/2+adddistance, Y, MARGIN-10, doubleValue)];CAShapeLayer *shapeLayer = [CAShapeLayer layer];shapeLayer.path = path.CGPath;shapeLayer.strokeColor = [UIColor clearColor].CGColor;shapeLayer.fillColor = XYQRandomColor.CGColor;shapeLayer.borderWidth = 2.0;[self.subviews[0].layer addSublayer:shapeLayer];//3.添加文字UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(X-MARGIN/2, Y-20, MARGIN-10+adddistance*2, 20)];label.text = [NSString stringWithFormat:@"%.0lf",starting+proportion*(CGRectGetHeight(myFrame)-Y-MARGIN)/2];label.textColor = [UIColor purpleColor];label.textAlignment = NSTextAlignmentCenter;label.font = [UIFont systemFontOfSize:10];[self.subviews[0] addSubview:label];}
}

6、父视图view部分代码

- (void)viewDidLoad {[super viewDidLoad];self.view.layer.backgroundColor=[UIColor whiteColor].CGColor;//1.初始化self.bezierView = [BezierCurveView initWithFrame:CGRectMake(20, 30, SCREEN_W-40, 280)];self.bezierView.center = self.view.center;[self.view addSubview:self.bezierView];//2.折线图// [self drawLineChart];//3.柱状图//  [self drawBaseChart];
}//画折线图
-(void)drawLineChart{//直线//    [self.bezierView drawLineChartViewWithX_Value_Names:self.x_names TargetValues:self.targets LineType:LineType_Straight AdddistanceValues:20  StartingValues:120000 ProportionValuess:100];// [self.bezierView drawLineChartViewWithX_Value_Names:self.x_names TargetValues:self.targets LineType:LineType_Curve AdddistanceValues:10  StartingValues:50000 ProportionValuess:100];// [self.bezierView drawLineChartViewWithX_Value_Names:self.x_names TargetValues:self.targets LineType:LineType_Curve AdddistanceValues:20  StartingValues:120000 ProportionValuess:100];
}

7、iponexr演示结果图片

转载于:https://www.cnblogs.com/sheer-code/p/10060010.html

iOS 折线图、柱状图的简单实现相关推荐

  1. jfreechart折线图+柱状图、柱状图(堆叠)+折线图、饼状图、环形图

    记录jfreechart生成图片测试程,主要是为自己研究过之后的记录:) 折线图+柱状图 柱状图(堆叠)+折线图 获取饼状图 获取环形图 jar包下载地址:https://download.csdn. ...

  2. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图

    目录 Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图 1.基本图表绘制 plt.plot() ts.plot() 由Seri ...

  3. echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向

    echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...

  4. poi导出excel文件,并生成原生图表(包括折线图,柱状图,饼状图,面积图)

    前段时间,因为客户需要,要做一个导出excel文件功能,并能生成原生的图表的(不是把图片插入到excel文档),找了很多文档看,也看了很多别人的代码,个人也总结了一下,不足之处,请各位大牛谅解. 需要 ...

  5. chartxy 柱状图_ChartControl 折线图 柱状图

    添加折线图(柱状图) 拖动ChartControl到Form上 在Series Collection中添加Line(或Bar) DevExpress.XtraCharts.Series series1 ...

  6. echarts 折线图 + 柱状图

    Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...

  7. Echarts实现折线图+柱状图+折线图填充

    用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...

  8. java实现将数据生成图表至excel导出(包括折线图,柱状图,饼状图)

    1. 目的 根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使用图表信息字符串. 2. 说明 使用jfree图表绘制类库绘制图表,并生成到本 ...

  9. 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)

    一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...

最新文章

  1. pyecharts a python_python 可视化 | pyecharts基本使用
  2. NYOJ 119 士兵杀敌(三)
  3. 【深度学习】从零开始 Mask RCNN 实战:基于 Win10 + Anaconda 的 Mask RCNN 环境搭建
  4. JS 中 indexOf 的用户及注意事项
  5. 申请表怎么填才能提高信用卡额度?
  6. 网站漏洞扫描工具 - PHPmvs
  7. JavaSE----异常处理
  8. 人机交互,情感计算,,人工智能相关研究的科研团队
  9. 【图像处理】基于matlab GUI打靶仿真系统【含Matlab源码 1043期】
  10. Express框架学习笔记-模板引擎
  11. GitHub 车牌检测识别项目调研
  12. 知了课堂小程序es6
  13. 用 regedit 命令把注册表 .reg 文件导入注册表- -
  14. 推荐一款pdf阅读软件——SumaTra PDF
  15. 深圳-数据岗位面试不完全记录(回忆版)
  16. 第三方直播美颜SDK的美颜功能是怎么实现的?
  17. 微信支付获取rsa加密公钥
  18. 华为摄像头 SDC REST 接口对接 经验
  19. 2014年十大最失意的科技大佬:最差CEO揭晓
  20. ALPU-C防抄板加密芯片

热门文章

  1. C++ 标准库读书杂记6 Tuple
  2. 清晰地打印PDF文档
  3. ios 隐藏app的插件_iOS 10系统可能可以隐藏APP了,iPhone 桌面变得更加整洁
  4. spring-cloud-netflix升级spring-cloud-alibaba-nacos坑
  5. windows server 2016关闭.net后无法打开服务器管理
  6. 手写字识别——可视化训练过程
  7. oracle使用协处理器,协处理器是什么_intel协处理器有什么用
  8. 如何设计安全可靠的开放接口---之签名(sign)
  9. 架构师成长需要具备的三种能力
  10. 《一起来捉妖》: 区块链当个挂件挺好