iOS 折线图、柱状图的简单实现

首先我得感谢某位博主，非常抱歉，因为之前直接下载博主提供这篇文章的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(, , frame.size.width, frame.size.height)];

    backView.backgroundColor = XYQColor(, , );

    [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)-*MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];

    //2.添加箭头

    [path moveToPoint:CGPointMake(MARGIN+adddistance, MARGIN)];

    [path addLineToPoint:CGPointMake(MARGIN-+adddistance, MARGIN+)];

    [path moveToPoint:CGPointMake(MARGIN+adddistance, MARGIN)];

    [path addLineToPoint:CGPointMake(MARGIN++adddistance, MARGIN+)];

    [path moveToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-*MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];

    [path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-*MARGIN-+adddistance, CGRectGetHeight(myFrame)-MARGIN-)];

    [path moveToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-*MARGIN+adddistance, CGRectGetHeight(myFrame)-MARGIN)];

    [path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-*MARGIN-+adddistance, CGRectGetHeight(myFrame)-MARGIN+)];

    //3.添加索引格

    //X轴

    for (int i=; i<x_names.count; i++) {

        CGFloat X = MARGIN + MARGIN*(i+);

        CGPoint point = CGPointMake(X+adddistance,CGRectGetHeight(myFrame)-MARGIN);

        [path moveToPoint:point];

        [path addLineToPoint:CGPointMake(point.x, point.y-)];

    }

    //Y轴（实际长度为200,此处比例缩小一倍使用）

    for (int i=; i<; i++) {

        CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i;

        CGPoint point = CGPointMake(MARGIN+adddistance,Y);

        [path moveToPoint:point];

        [path addLineToPoint:CGPointMake(point.x+, point.y)];

    }

    //4.添加索引格文字

    //X轴

    for (int i=; i<x_names.count+; i++) {

        CGFloat X = MARGIN +  + MARGIN*i;

        UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(X+adddistance, CGRectGetHeight(myFrame)-MARGIN, MARGIN, )];

        if(i < x_names.count){

            textLabel.text = x_names[i];

        }

        else{

            textLabel.text = @"年/月";

        }

        textLabel.font = [UIFont systemFontOfSize:];

        textLabel.textAlignment = NSTextAlignmentCenter;

        textLabel.textColor = [UIColor blueColor];

        [self addSubview:textLabel];

    }

    //Y轴

    for (int i=; i<; i++) {

        CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i;

        UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(, Y-, MARGIN+adddistance, )];

        textLabel.text = [NSString stringWithFormat:@"%ld",starting+proportion**i];

        textLabel.font = [UIFont systemFontOfSize:];

        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[].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=; i<targetValues.count; i++  ){

        CGFloat coed =[targetValues[i] integerValue];

        [targetValues1 addObject:@((coed-starting)/proportion)];

    }

    //2.获取目标值点坐标

    NSMutableArray *allPoints = [NSMutableArray array];

    for (int i=; i<targetValues1.count; i++) {

        CGFloat doubleValue = *[targetValues1[i] floatValue]; //目标值放大两倍

        CGFloat X = MARGIN+adddistance + MARGIN*(i+);

        CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-doubleValue;

        CGPoint point = CGPointMake(X,Y);

        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(point.x-, point.y-, 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[].layer addSublayer:layer];

        [allPoints addObject:[NSValue valueWithCGPoint:point]];

    }

    //3.坐标连线

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:[allPoints[] CGPointValue]];

    CGPoint PrePonit;

    switch (lineType) {

        case LineType_Straight: //直线

            for (int i =; i<allPoints.count; i++) {

                CGPoint point = [allPoints[i] CGPointValue];

                [path addLineToPoint:point];

            }

            break;

        case LineType_Curve:   //曲线

            for (int i =; i<allPoints.count; i++) {

                if (i==) {

                    PrePonit = [allPoints[] CGPointValue];

                }else{

                    CGPoint NowPoint = [allPoints[i] CGPointValue];

                    [path addCurveToPoint:NowPoint controlPoint1:CGPointMake((PrePonit.x+NowPoint.x)/, PrePonit.y) controlPoint2:CGPointMake((PrePonit.x+NowPoint.x)/, 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[].layer addSublayer:shapeLayer];

    //4.添加目标值文字

    for (int i =; i<allPoints.count; i++) {

        UILabel *label = [[UILabel alloc] init];

        label.textColor = [UIColor purpleColor];

        label.textAlignment = NSTextAlignmentCenter;

        label.font = [UIFont systemFontOfSize:];

        [self.subviews[] addSubview:label];

        if (i==) {

            CGPoint NowPoint = [allPoints[] CGPointValue];

            label.text = [NSString stringWithFormat:@"%.0lf",starting+proportion*(CGRectGetHeight(myFrame)-NowPoint.y-MARGIN)/];

            label.frame = CGRectMake(NowPoint.x-MARGIN/, NowPoint.y-, MARGIN+adddistance, );

            PrePonit = NowPoint;

        }else{

            CGPoint NowPoint = [allPoints[i] CGPointValue];

            if (NowPoint.y<PrePonit.y) {  //文字置于点上方

                label.frame = CGRectMake(NowPoint.x-MARGIN/, NowPoint.y-, MARGIN+adddistance, );

            }else{ //文字置于点下方

                label.frame = CGRectMake(NowPoint.x-MARGIN/, NowPoint.y, MARGIN+adddistance, );

            }

            label.text = [NSString stringWithFormat:@"%.0lf",starting+proportion*(CGRectGetHeight(myFrame)-NowPoint.y-MARGIN)/];

            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=; i<targetValues.count; i++  ){

        CGFloat coed =[targetValues[i] integerValue];

        [targetValues1 addObject:@((coed-starting)/proportion)];

    }

    //2.每一个目标值点坐标

    for (int i=; i<targetValues1.count; i++) {

        CGFloat doubleValue = *[targetValues1[i] floatValue]; //目标值放大两倍

        CGFloat X = MARGIN + MARGIN*(i+)+;

        CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-doubleValue;

        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(X-MARGIN/+adddistance, Y, MARGIN-, doubleValue)];

        CAShapeLayer *shapeLayer = [CAShapeLayer layer];

        shapeLayer.path = path.CGPath;

        shapeLayer.strokeColor = [UIColor clearColor].CGColor;

        shapeLayer.fillColor = XYQRandomColor.CGColor;

        shapeLayer.borderWidth = 2.0;

        [self.subviews[].layer addSublayer:shapeLayer];

        //3.添加文字

        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(X-MARGIN/, Y-, MARGIN-+adddistance*, )];

        label.text = [NSString stringWithFormat:@"%.0lf",starting+proportion*(CGRectGetHeight(myFrame)-Y-MARGIN)/];

        label.textColor = [UIColor purpleColor];

        label.textAlignment = NSTextAlignmentCenter;

        label.font = [UIFont systemFontOfSize:];

        [self.subviews[] addSubview:label];

    }

}

6、父视图view部分代码

- (void)viewDidLoad {

    [super viewDidLoad];

    self.view.layer.backgroundColor=[UIColor whiteColor].CGColor;

    //1.初始化

    self.bezierView = [BezierCurveView initWithFrame:CGRectMake(, , SCREEN_W-, )];

    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:  StartingValues: ProportionValuess:];

}

7、iponexr演示结果图片

iOS 折线图、柱状图的简单实现的更多相关文章

ChartControl 折线图柱状图
添加折线图(柱状图) 拖动ChartControl到Form上在Series Collection中添加Line(或Bar) DevExpress.XtraCharts.Series series1 ...
v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图，附官网地址
v-charts 官网地址:https://v-charts.js.org/#/ 柱状图: <template> <ve-histogram :data="chartDat ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...
OpenGL——折线图柱状图饼图绘制
折线图绘制代码: #include<iostream> //旧版本固定管线 #include<Windows.h> #include <GL/glut.h> // ...
G2 基本使用折线图柱状图饼图基本配置
G2的基本使用 1.浏览器引入  <script src="https://gw.alipayobjects.com/os/lib/antv ...
IOS折线图二
上周把项目的折线图给做了下,今天想着把它完善完善,自己设置了不同的数据源来测试,哈哈,还真遇到问题了, 就是给图表设置折点数为0时,视图显示的还是原来的,由于数据为空,应该将其设置为空,所以想着怎么把 ...
iOS 折线图实现
图表绘制的过程实际上是坐标位置的计算过程,至于画线只要有了position,通过CAShapeLayer+BezierPath很快就可以画出来,这里提供一个绘制折线的demo,贵在思路,有需要的可以参 ...
echarts双y轴折线图柱状图混合实时更新图
先看下效果,自己用ps做了张gif图,发现很好玩啊..不喜勿喷自己下载个echarts.min.js 直接上代码: <!DOCTYPE html><html><head ...

随机推荐

gotop（返回顶部）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
应用Python处理空间关系数据
from osgeo import ogrimport jsonfrom geojson import loads, dumps, Feature, FeatureCollectionfrom sha ...
Linux 网络流量查看 Linux ip traffic monitor
Network monitoring on Linux This post mentions some linux command line tools that can be used to mon ...
分布式文件系统比较出名的有HDFS 和 GFS
分布式文件系统比较出名的有HDFS 和 GFS,其中HDFS比较简单一点.本文是一篇描述非常简洁易懂的漫画形式讲解HDFS的原理.比一般PPT要通俗易懂很多.不难得的学习资料. 1.三个部分: 客户 ...
zabbix系列之六——安装后配置二Items
https://www.zabbix.com/documentation/3.4/manual/config/items/itemtypes/snmp 1Items 1.1creating items ...
用Use Case获取需求的方法是否有缺陷，还有哪些地方需要改进
(提示:是否对所有应用领域都适用?使用的方便性?......) Use Case使用原则: 1.通过讲简单的故事来传递消息讲故事是最有效的人与人交流信息的途径.通过讲故事(Use Case),团队成 ...
webpack-易混淆部分的解释
原文链接: https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9 webpack的核心哲学 1. 任何皆模块正 ...
scrapy简单入门及选择器(xpath\css)
简介 scrapy被认为是比较简单的爬虫框架,资料比较齐全,网上也有很多教程.官网上介绍了它的四种安装方法,PyPI.Conda.APT.Source,我们只介绍最简单的安装方法. 安装 Window ...
JavaScript DOM 編程藝術(2版) 綜合實例Band js代碼
function addLoadEvent(func){ var oldonload=window.onload; if(typeof window.onload!='function') { win ...
C#对DataTable里数据排序的方法
protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Ad ...

iOS 折线图、柱状图的简单实现

iOS 折线图、柱状图的简单实现的更多相关文章

随机推荐

热门专题