iOS折线图

object-c折线，效果如图


折线图
- (void)viewDidLoad {
    [super viewDidLoad];
    //x y 轴上的标注数值
    NSArray *xArr = @[@"0",@"5",@"10",@"15",@"20",@"25",@"30",];
    NSArray *yArr = @[@"0",@"2",@"4",@"6",@"8",@"10",@"12",];
    //要画的折线图的各个点
    NSMutableArray *pointArr = [NSMutableArray array];
    for (int i=0; i<=20; i++)
    {
        CGPoint point = CGPointMake(i*1.5, random()%12);
        NSValue *value = [NSValue valueWithCGPoint:point];
        [pointArr addObject:value];
    }
    //传入数值，画折线图
    BrokenLineDemo *demo = [[BrokenLineDemo alloc]initWithFrame:CGRectMake(50, 100, 300, 300) andXValue:xArr YValueArr:yArr andPointArr:pointArr];
    [self.view addSubview:demo];
}

主要其实就是画线。重写drawRect，再用CGContextRef。

#define kChartLineColor         [UIColor grayColor]
#define kLightFrayColor         [UIColor colorWithWhite:0.8 alpha:1]
#define kChartTextColor         [UIColor lightGrayColor]

#define k_Space 10
#import "BrokenLineDemo.h"
@interface BrokenLineDemo()
@property(nonatomic,strong)NSArray *xValueArr;//x轴上的标注值
@property(nonatomic,strong)NSArray *yValueArr;//y轴上的标注值

@property(nonatomic,assign)float xSpace;//x轴每个标注之间相隔的frame距离
@property(nonatomic,assign)float ySpace;//y轴每个标注之间相隔的frame距离
@property(nonatomic,assign)float xValueSpace;//x轴每个标注之间相隔的数值 0 5 10 15
@property(nonatomic,assign)float yValueSpace;//y轴每个标注之间相隔的数值 0 2 4 6 8

@property(nonatomic,assign)CGPoint startPoint;//坐标起始点

@property(nonatomic,strong)NSMutableArray *pointArr;//要画的点的数组
@property(nonatomic,strong)NSMutableArray *lastPointArr;//将要画的点转化为此坐标轴上的点（传过来的点的坐标轴原点在左上方，转为此坐标轴的原点在左下方）
@end

重写init

-(instancetype)initWithFrame:(CGRect)frame andXValue:(NSArray *)xValueArr YValueArr:(NSArray *)yValueArr andPointArr:(NSMutableArray *)pointArr
{
    if (self=[super initWithFrame:frame])
    {
        self.xValueArr = xValueArr;//x轴的标注
        self.yValueArr = yValueArr;//y轴的标注
        self.pointArr = pointArr;//要画的点的数值
        self.lastPointArr = [NSMutableArray array];//存放转化坐标轴之后的点
        
        
        float xMin = [[xValueArr firstObject]floatValue];
        float xMax = [[xValueArr lastObject]floatValue];
        float yMin = [[yValueArr firstObject]floatValue];
        float yMax = [[yValueArr lastObject]floatValue];
        // x y 轴上每格的frame间距
        self.xSpace = (frame.size.width-k_Space*3)/(xValueArr.count-1);
        self.ySpace = (frame.size.height-k_Space*3)/(yValueArr.count-1);
        // x y 轴上每格的标注间隔数值，此x轴为5，y轴为2
        self.xValueSpace = (xMax-xMin)/(self.xValueArr.count-1);
        self.yValueSpace = (yMax-yMin)/(self.yValueArr.count-1);
        //画图的起点，原点
         self.startPoint = CGPointMake(k_Space*2, frame.size.height-k_Space*2);
        //转化坐标 例：传入数值是（0，0），原点在左上方；转化后因为原点在左下方上面一点点，因此点要画在(k_Space*2, frame.size.height-k_Space*2)处
        for (int i=0; i<self.pointArr.count; i++)
        {
            NSValue *value = self.pointArr[i];
            CGPoint point = value.CGPointValue;
            CGPoint lastPoint = CGPointMake((point.x/_xValueSpace)*(_xSpace)+_startPoint.x, _startPoint.y-(point.y/_yValueSpace)*(_ySpace));
            [_lastPointArr addObject:[NSValue valueWithCGPoint:lastPoint]];
        }
    }
    return self;
}

画线其实很简单，调用CGContextRef的方法就好，难点在于坐标的转化。传入的数值，都是以原点在左上方的坐标轴为标准的数值。如图，（0，0），（0，1），（0，2）等，你要是直接用此数值，那点就直接画在最上边的那条线上，显然是不对的。如图
传入数值的坐标原点

我们要以左下方的那个点为坐标原点，进行转换坐标。假如传入的坐标是（10，6），显然x轴上标注数值相隔为5，y轴标注数值相隔为2；设x轴每小格frame的间距为xSpace（即：x轴上每单元格在屏幕上的长度），y轴上每小格的间距为ySpace（这两个值都可以计算出来，请看源码）；现原点（0，0）距离重写的view左边间距为为20，下边距为20；则
传入为（10，6）应该画在屏幕上的点为：
X为


x

Y为（frame是重写的view的frame）


y

以下方为坐标原点

坐标转化后就可以直接画点了，再讲所有的点连线，over。
思路就是这样下面贴drawRect重写。（源码地址：https://pan.baidu.com/s/1qYwrpBA）
重写drawRect

- (void)drawRect:(CGRect)rect
{
    CGContextRef context =UIGraphicsGetCurrentContext();
    //x轴上的值
    for (int i=0; i<_xValueArr.count; i++)
    {
        //x轴上的值
        NSString *xTitle = _xValueArr[i];
        [[UIColor blackColor]set];
        NSDictionary *attr =@{NSFontAttributeName:[UIFont systemFontOfSize:10]};
        CGSize labelSize = [xTitle sizeWithAttributes:attr];
        float originX = k_Space*2+(_xSpace)*i;
        CGRect xTitleRect  = CGRectMake(originX-labelSize.width/2, rect.size.height-k_Space-5, labelSize.width, labelSize.height);
         [self drawStr:xTitle withRect:xTitleRect textFontSize:10 textColor:kChartTextColor];
        //x轴上的竖线
        [self drawLine:context
            startPoint:CGPointMake(originX, rect.size.height-k_Space*2)
              endPoint:CGPointMake(originX, rect.size.height-k_Space*2-5)
             lineColor:kChartLineColor
             lineWidth:1];
    }
    //X轴
    [self drawLine:context
        startPoint:CGPointMake(k_Space*2, rect.size.height-k_Space*2)
          endPoint:CGPointMake(self.frame.size.width, rect.size.height-k_Space*2)
         lineColor:kChartLineColor
         lineWidth:1];
    for (int i=0; i<_yValueArr.count; i++)
    {
        //y轴上的值
        NSString *yTitle = _yValueArr[i];
        [[UIColor blackColor]set];
        NSDictionary *attr =@{NSFontAttributeName:[UIFont systemFontOfSize:10]};
        CGSize labelSize = [yTitle sizeWithAttributes:attr];
        
        float yOrigin =  _startPoint.y-(_ySpace*i);
        CGRect yTitleRect  = CGRectMake(k_Space, yOrigin-labelSize.height/2, labelSize.width, labelSize.height);
         [self drawStr:yTitle withRect:yTitleRect textFontSize:10 textColor:kChartTextColor];
         //画y轴上的横线
        if (i>0)
        {
            [self drawLine:context
                startPoint:CGPointMake(_startPoint.x,yOrigin)
                  endPoint:CGPointMake(rect.size.width,yOrigin)
                 lineColor:kLightFrayColor
                 lineWidth:1];
        }
    }
    //y轴
    [self drawLine:context
        startPoint:_startPoint
          endPoint:CGPointMake(_startPoint.x,0)
         lineColor:kChartLineColor
         lineWidth:1];
    
    //画point
    for (int i=0; i<self.pointArr.count; i++)
    {
        NSValue *value = self.lastPointArr[i];
        CGPoint point = value.CGPointValue;
        //画点
        [self drawPointWithContext:context point:point color:[UIColor lightGrayColor]];
        
        //画点上的值
        NSValue *oldValue = self.pointArr[i];
        CGPoint oldPoint = oldValue.CGPointValue;
        NSString *valueStr = [NSString stringWithFormat:@"%.2f",oldPoint.y];
        CGSize labelSize = [valueStr sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:10]}];
        CGRect valueStrRect  = CGRectMake(point.x-labelSize.width/2, point.y-5-labelSize.height, labelSize.width, labelSize.height);
        [self drawStr:valueStr withRect:valueStrRect textFontSize:10 textColor:kChartTextColor];
        //画折线
        if (i<_lastPointArr.count-1)
        {
            NSValue * endValaue = _lastPointArr[i+1];
            CGPoint endPoint =[endValaue CGPointValue];
            //画折线
              [self drawLine:context startPoint:point endPoint:endPoint lineColor:[UIColor colorWithRed:26/255.0 green:135/255.0 blue:254/255.0 alpha:1] lineWidth:1];
        }
    }
}
//画文字
- (void)drawStr:(NSString *)titleStr  withRect:(CGRect)rect textFontSize:(float)fontSize textColor:(UIColor *)textColor
{
    UIFont *font =  [UIFont systemFontOfSize:fontSize];
      [titleStr drawInRect:rect withAttributes:@{NSFontAttributeName :font,NSForegroundColorAttributeName:textColor}];
}

//画点
-(void)drawPointWithContext:(CGContextRef)context point:(CGPoint )point color:(UIColor *)pointColor
{
    CGContextSetFillColorWithColor(context, pointColor.CGColor);//填充颜色
    CGContextAddArc(context, point.x, point.y, 2, 0, 2*M_PI, 0); //添加一个圆
    CGContextDrawPath(context, kCGPathFill);//绘制填充
}
//画线
- (void)drawLine:(CGContextRef)context startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint lineColor:(UIColor *)lineColor lineWidth:(CGFloat)width {
    
    CGContextSetShouldAntialias(context, YES ); //抗锯齿
    CGColorSpaceRef Linecolorspace1 = CGColorSpaceCreateDeviceRGB();
    CGContextSetStrokeColorSpace(context, Linecolorspace1);
    CGContextSetLineWidth(context, width);
    CGContextSetStrokeColorWithColor(context, lineColor.CGColor);
    CGContextMoveToPoint(context, startPoint.x, startPoint.y);
    CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
    CGContextStrokePath(context);
    CGColorSpaceRelease(Linecolorspace1);
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS折线图绘制与PNChart源码
    PNChart 去年项目中用到了折线图，当时因为项目赶的紧，于是下载了GitHub上排行前几名的图表框架，看一下哪...
    堂吉诃德灬阅读 1,789评论 8赞 12
  • ios 折线图
    总结一下最近项目中需要使用到的折线图的展示，首先说下折线图演示的一下几种情况1 当数据出现有正数和负数，那么折现就...
    嘿晴天阅读 1,340评论 1赞 2
  • iOS 折线图的简单现实
    一、画出X，Y轴 二、分别给X坐标和Y坐标添加代表的属性值 三、画折线图 结果图
    管你爱不爱阅读 836评论 0赞 1
  • iOS 折线图（3）
    从开始使用初始化说起首先初始化个LineGraph视图，赋值XY轴数组，XY轴的最大值，XY轴的颜色，每条折线所代...
    马大俊不是啥好人阅读 1,357评论 2赞 3
  • iOS折线图实现（一）
    最近一直在断断续续的搞一些简单的动画效果,感觉效果还不错,其中也有很多道友对效果的实现提出了有意义的建议(十分感谢...
    健健锅阅读 25,979评论 21赞 132