iOS折線圖

object-c折線，效果如圖


折線圖
- (void)viewDidLoad {
    [super viewDidLoad];
    //x y 軸上的標(biāo)注數(shù)值
    NSArray *xArr = @[@"0",@"5",@"10",@"15",@"20",@"25",@"30",];
    NSArray *yArr = @[@"0",@"2",@"4",@"6",@"8",@"10",@"12",];
    //要畫的折線圖的各個(gè)點(diǎn)
    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];
    }
    //傳入數(shù)值，畫折線圖
    BrokenLineDemo *demo = [[BrokenLineDemo alloc]initWithFrame:CGRectMake(50, 100, 300, 300) andXValue:xArr YValueArr:yArr andPointArr:pointArr];
    [self.view addSubview:demo];
}

主要其實(shí)就是畫線。重寫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軸上的標(biāo)注值
@property(nonatomic,strong)NSArray *yValueArr;//y軸上的標(biāo)注值

@property(nonatomic,assign)float xSpace;//x軸每個(gè)標(biāo)注之間相隔的frame距離
@property(nonatomic,assign)float ySpace;//y軸每個(gè)標(biāo)注之間相隔的frame距離
@property(nonatomic,assign)float xValueSpace;//x軸每個(gè)標(biāo)注之間相隔的數(shù)值 0 5 10 15
@property(nonatomic,assign)float yValueSpace;//y軸每個(gè)標(biāo)注之間相隔的數(shù)值 0 2 4 6 8

@property(nonatomic,assign)CGPoint startPoint;//坐標(biāo)起始點(diǎn)

@property(nonatomic,strong)NSMutableArray *pointArr;//要畫的點(diǎn)的數(shù)組
@property(nonatomic,strong)NSMutableArray *lastPointArr;//將要畫的點(diǎn)轉(zhuǎn)化為此坐標(biāo)軸上的點(diǎn)（傳過來的點(diǎn)的坐標(biāo)軸原點(diǎn)在左上方，轉(zhuǎn)為此坐標(biāo)軸的原點(diǎn)在左下方）
@end

重寫init

-(instancetype)initWithFrame:(CGRect)frame andXValue:(NSArray *)xValueArr YValueArr:(NSArray *)yValueArr andPointArr:(NSMutableArray *)pointArr
{
    if (self=[super initWithFrame:frame])
    {
        self.xValueArr = xValueArr;//x軸的標(biāo)注
        self.yValueArr = yValueArr;//y軸的標(biāo)注
        self.pointArr = pointArr;//要畫的點(diǎn)的數(shù)值
        self.lastPointArr = [NSMutableArray array];//存放轉(zhuǎn)化坐標(biāo)軸之后的點(diǎn)
        
        
        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 軸上每格的標(biāo)注間隔數(shù)值，此x軸為5，y軸為2
        self.xValueSpace = (xMax-xMin)/(self.xValueArr.count-1);
        self.yValueSpace = (yMax-yMin)/(self.yValueArr.count-1);
        //畫圖的起點(diǎn)，原點(diǎn)
         self.startPoint = CGPointMake(k_Space*2, frame.size.height-k_Space*2);
        //轉(zhuǎn)化坐標(biāo) 例：傳入數(shù)值是（0，0），原點(diǎn)在左上方；轉(zhuǎn)化后因?yàn)樵c(diǎn)在左下方上面一點(diǎn)點(diǎn)，因此點(diǎn)要畫在(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;
}

畫線其實(shí)很簡單，調(diào)用CGContextRef的方法就好，難點(diǎn)在于坐標(biāo)的轉(zhuǎn)化。傳入的數(shù)值，都是以原點(diǎn)在左上方的坐標(biāo)軸為標(biāo)準(zhǔn)的數(shù)值。如圖，（0，0），（0，1），（0，2）等，你要是直接用此數(shù)值，那點(diǎn)就直接畫在最上邊的那條線上，顯然是不對的。如圖
傳入數(shù)值的坐標(biāo)原點(diǎn)

我們要以左下方的那個(gè)點(diǎn)為坐標(biāo)原點(diǎn)，進(jìn)行轉(zhuǎn)換坐標(biāo)。假如傳入的坐標(biāo)是（10，6），顯然x軸上標(biāo)注數(shù)值相隔為5，y軸標(biāo)注數(shù)值相隔為2；設(shè)x軸每小格frame的間距為xSpace（即：x軸上每單元格在屏幕上的長度），y軸上每小格的間距為ySpace（這兩個(gè)值都可以計(jì)算出來，請看源碼）；現(xiàn)原點(diǎn)（0，0）距離重寫的view左邊間距為為20，下邊距為20；則
傳入為（10，6）應(yīng)該畫在屏幕上的點(diǎn)為：
X為


x

Y為（frame是重寫的view的frame）


y

以下方為坐標(biāo)原點(diǎn)

坐標(biāo)轉(zhuǎn)化后就可以直接畫點(diǎn)了，再講所有的點(diǎn)連線，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;
        //畫點(diǎn)
        [self drawPointWithContext:context point:point color:[UIColor lightGrayColor]];
        
        //畫點(diǎn)上的值
        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}];
}

//畫點(diǎn)
-(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); //添加一個(gè)圓
    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);
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • PNChart 去年項(xiàng)目中用到了折線圖，當(dāng)時(shí)因?yàn)轫?xiàng)目趕的緊，于是下載了GitHub上排行前幾名的圖表框架，看一下哪...
    堂吉訶德灬閱讀 1,855評論 8贊 12
  • 總結(jié)一下最近項(xiàng)目中需要使用到的折線圖的展示，首先說下折線圖演示的一下幾種情況1 當(dāng)數(shù)據(jù)出現(xiàn)有正數(shù)和負(fù)數(shù)，那么折現(xiàn)就...
    嘿晴天閱讀 1,399評論 1贊 2
  • 一、畫出X，Y軸 二、分別給X坐標(biāo)和Y坐標(biāo)添加代表的屬性值 三、畫折線圖 結(jié)果圖
    管你愛不愛閱讀 883評論 0贊 1
  • 從開始使用初始化說起首先初始化個(gè)LineGraph視圖，賦值XY軸數(shù)組，XY軸的最大值，XY軸的顏色，每條折線所代...
    馬大俊不是啥好人閱讀 1,410評論 2贊 3
  • 最近一直在斷斷續(xù)續(xù)的搞一些簡單的動畫效果,感覺效果還不錯(cuò),其中也有很多道友對效果的實(shí)現(xiàn)提出了有意義的建議(十分感謝...
    健健鍋閱讀 26,141評論 21贊 132

友情鏈接更多精彩內(nèi)容