绘制坐标图,折线图

原创 2015年11月18日 18:34:04

项目中会使用坐标图来展示数据的变换,那么就会使用一些ios中的绘制线条的功能,例如:

//**两点之间画实线

-(void)drawLineFrom:(CGPoint)origion to:(CGPoint)endPoint context:(CGContextRef)context lineColor:(UIColor *)lineColor{


    

    //**画线 指定背景 两点 和颜色

    CGContextSetLineWidth(context, 2.0f);

    CGContextSetStrokeColorWithColor(context, lineColor.CGColor);

    CGContextMoveToPoint(context, origion.x,origion.y);

    CGContextAddLineToPoint(context,endPoint.x,endPoint.y);

    CGContextStrokePath(context);

    CGContextClosePath(context);

    


}

//**两点之间画虚线

-(void)drawDashedLineFrom:(CGPoint)origion to:(CGPoint)endPoint context:(CGContextRef)context lineColor:(UIColor *)lineColor{


    CGFloat lengths[] = {3,3};

    CGFloat lengthsEnd[]= {3,0};

    //**画线 指定背景 两点 和颜色

    CGContextSetLineDash(context, 0, lengths, 2);

    CGContextSetLineWidth(context, 0.5f);

    CGContextSetStrokeColorWithColor(context, lineColor.CGColor);

    CGContextMoveToPoint(context, origion.x,origion.y);

    CGContextAddLineToPoint(context,endPoint.x,endPoint.y);

    CGContextStrokePath(context);

    CGContextClosePath(context);

    

    //**关闭曲线

    CGContextSetLineDash(context, 0, lengthsEnd, 2);



}


//**绘制Y轴上的文字标记

-(void)drawY_AxisDesc:(NSArray *)array origion:(CGPoint)zero heigh:(CGFloat)heigh context:(CGContextRef)ref{

  if(!array||![array count])

      return;

    

    int max = [self maxNumerFrom:array];

    self.maxValue = max;

    

    //**Y轴上距离间隔

    float lineDistance = (heigh-X_Y_distance-Y_end_distance)/[array count];

    

    //**Y轴描绘的数字间隔

    float numberDistance = ((float)max)/[array count];

    

    NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:[self.axisColor colorWithAlphaComponent:1.0f],NSForegroundColorAttributeName, [UIFont systemFontOfSize:text_size_big_2],NSFontAttributeName,nil];

    

    

    NSLog(@"lineDistance::%f,numberDistance:%lf,max::%d",lineDistance,numberDistance,max);

    

    for(int i =0;i<=[array count];i++){

     

        NSString *flagS = [NSString stringWithFormat:@"%0.0f",i*numberDistance];

        

        //**如果numberDistance 跨度小于1,则应展示小数部分

        if(numberDistance<=1)

            flagS = [NSString stringWithFormat:@"%0.1f",i*numberDistance];

        

        if(i==[array count]){

           if(i*numberDistance <max)

           flagS = [NSString stringWithFormat:@"%d",max];

            

            

        }

        

        //**左移距离

        float toLeft;

        if(flagS.length>=4)

            toLeft = 48.0f;

        else

            toLeft = 40.0f;

        

        

        //**文字绘图位置Y坐标与虚线相比有偏差,所以减去12个像素点,上移。如果最大值为零则除原点外,其他0值不需要绘制。

        if(!(!self.maxValue&&i>0))

          [flagS drawAtPoint:CGPointMake(zero.x-toLeft, zero.y-lineDistance*i-12) withAttributes:dic];

        

        //**根据描绘文字的位置 画虚线

      if(i)

        [self drawDashedLineFrom:CGPointMake(zero.x, zero.y-lineDistance*i) to:CGPointMake(zero.x+self.totalSize.width-X_end_distance-X_Y_distance, zero.y-lineDistance*i) context:ref lineColor:self.axisColor];

       // NSLog(@"lineDistace::%d,zero.y::%f",lineDistance,zero.y);

    

        

    }

    

    

}

//**绘制X轴上的文字标记

-(void)drawX_AxisDesc:(NSArray *)array origion:(CGPoint)zero width:(CGFloat)width context:(CGContextRef)ref{

    if(!array||![array count])

        return;


    

    NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:[self.axisColor colorWithAlphaComponent:1.0f],NSForegroundColorAttributeName, [UIFont systemFontOfSize:text_size_big_2],NSFontAttributeName,nil];


    //**X轴上线段间隔

    float lineDistance = (width-X_Y_distance-X_end_distance)/[array count];

    

    for(int i =0;i<[array count];i++){

        

        NSString *flagS = [array objectAtIndex:i];

        [flagS drawAtPoint:CGPointMake(zero.x+i*lineDistance, zero.y+10) withAttributes:dic];

        

    }

    

    


}

//**绘制数据折线图

-(UIImage *)drawBrokenLineAccordingHori:(NSArray *)horiArr Verti:(NSArray *)vertiArr AxisColor:(UIColor *)axColor BrokenColor:(UIColor *)brokColor inBgSize:(CGSize)bgSize{



    //**X轴上文字间隔

    float X_lineDistance = (self.totalSize.width-X_Y_distance-X_end_distance)/[horiArr count];

    //**Y轴上文字间隔

   // NSInteger Y_lineDistance = (self.totalSize.height-X_Y_distance)/[vertiArr count];

    

    //**Y轴上单位数字占据的距离

    float unitDistance;

    //**检测最大值是否为零

    if(self.maxValue)

        unitDistance = (self.totalSize.height-X_Y_distance-Y_end_distance)/self.maxValue;

    else

        unitDistance = 0.0f;

    

    //NSLog(@"maxValue::%d",self.maxValue);

    

    NSMutableArray *x_Value_Arr = [NSMutableArray arrayWithCapacity:0];

    NSMutableArray *y_Value_Arr = [NSMutableArray arrayWithCapacity:0];


    

    for(int i =0;i<[horiArr count];i++){

       //**取出对应Y轴上数字

        float Y_Value = [[vertiArr objectAtIndex:i]floatValue];

      //**根据数字计算出Y轴上对应的位置(距离原点长度)

        float Y_Value_Real_Distance = Y_Value *unitDistance;

        //**右移动40像素,使点位于日期中心

        NSNumber *xNumber = [[NSNumber alloc]initWithFloat:self.origionPoint.x+X_lineDistance*i+40];

        NSNumber *yNumber = [[NSNumber alloc]initWithFloat:self.origionPoint.y-Y_Value_Real_Distance];

        

        [x_Value_Arr addObject:xNumber];

        [y_Value_Arr addObject:yNumber];

        

    }

   // NSLog(@"%@:::%@",x_Value_Arr,y_Value_Arr);

    //**画折线,并绘制对应月度业绩数据

      [self drawLineWith_X_Arr:x_Value_Arr y_Arr:y_Value_Arr context:self.overallContext lineColor:brokColor descRealValue:vertiArr];

    

    return UIGraphicsGetImageFromCurrentImageContext();


}

//**多点之间画折线

-(void)drawLineWith_X_Arr:(NSArray *)x_Arr y_Arr:(NSArray *)y_Arr context:(CGContextRef)context lineColor:(UIColor *)lineColor descRealValue:(NSArray*)descArr

{

    if([x_Arr count]!=[y_Arr count]||!x_Arr|!y_Arr||![x_Arr count]||![y_Arr count])

        return;

    

   

    

    //**画线 指定背景 两点 和颜色

    CGContextSetLineWidth(context, 2.0f);

    CGContextSetStrokeColorWithColor(context, lineColor.CGColor);

    CGContextMoveToPoint(context, [[x_Arr objectAtIndex:0]floatValue],[[y_Arr objectAtIndex:0]floatValue]);

    

    for(int i =1;i<[x_Arr count];i++){

      CGContextAddLineToPoint(context,[[x_Arr objectAtIndex:i]floatValue],[[y_Arr objectAtIndex:i]floatValue]);

        

        NSLog(@"x:%f---y:%f",[[x_Arr objectAtIndex:i]floatValue],[[y_Arr objectAtIndex:i]floatValue]);

        

       

        

    }

    

    // CGContextAddLineToPoint(context,100,12);

    CGContextStrokePath(context);

    CGContextClosePath(context);

    

    //**在节点处圆点

    [self drawCircleWith_X_Arr:x_Arr y_Arr:y_Arr context:context lineColor:lineColor];

    //**在节点附近绘制业绩数据

    [self drawAchievementValueWith_X_Arr:x_Arr y_Arr:y_Arr descRealValue:descArr context:context];

    

}

//**根据坐标画圆

-(void)drawCircleWith_X_Arr:(NSArray *)x_Arr y_Arr:(NSArray *)y_Arr context:(CGContextRef)context lineColor:(UIColor *)lineColor{

  

    if([x_Arr count]!=[y_Arr count]||!x_Arr|!y_Arr||![x_Arr count]||![y_Arr count])

        return;

    

    for(int i =0;i<[x_Arr count];i++){

    

        //**外部圆圈为指定颜色

        CGContextAddArc(context, [[x_Arr objectAtIndex:i]floatValue], [[y_Arr objectAtIndex:i]floatValue], 8.0f, 0, 6.3, 0);

        CGContextSetFillColorWithColor(context, lineColor.CGColor);

        CGContextFillPath(context);

        

        //**内部圆圈颜色为白色

        CGContextAddArc(context, [[x_Arr objectAtIndex:i]floatValue], [[y_Arr objectAtIndex:i]floatValue], 6.0f, 0, 6.3, 0);

        CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);

        CGContextFillPath(context);

    

    }

    

    

    

}



QT5简易坐标系和折线图的绘制

1. QT坐标系统。 在画坐标系之前,我们得先了解一下QT5的坐标系统。 QT5的坐标设定左上角为原点(0,0),向右为x轴正方向,向下为y轴正方向,这点与生活中常见的直角坐标系不同。 2...
  • a343902152
  • a343902152
  • 2015年07月23日 15:22
  • 10904

绘制折线图展示数据简单介绍-iOS客户端

在IOS开发的各种app中,有些项目难免会要求我们去使用图表的形式向用户展示一些数据,这就要求RD们需要使用代码根据数据去绘制图表视图,这里为大家介绍下在iOS端如何绘制折线图。先看下效果: 图1...
  • leihua713
  • leihua713
  • 2016年03月31日 13:14
  • 8558

自定义view(画一个LOL能力图表)

在介绍下列的自定义图表的时候,我们先说明一下绘图的三大要素,canvas 翻译叫画布,paint叫画笔,Path对象叫路径, 一、canvas属性:       ①:canvas画布本身是有一个坐...
  • dream_caoyun
  • dream_caoyun
  • 2018年01月10日 14:43
  • 28

【Html5每日练习】canvas绘制坐标变换图形

前两天我一直搞不懂坐标变换的内3个函数,按手册上的去写代码,发现实现的代码和手册上说的代码不一样,所以决定自己好好地研究一下,后来明白了,我总喜欢把函数写在路径后面,所以实现不了变换,今天在网上闲逛的...
  • boiaprogramfan0420
  • boiaprogramfan0420
  • 2012年04月14日 11:36
  • 1755

R语言绘制双坐标图直方图与折线的结合

par(mar = c(5, 5, 3, 4)+0.1) #似乎是设置图片位置 bar col="blue",col.axis="blue",col.lab="blue") mtext(c...
  • xspyzm
  • xspyzm
  • 2017年08月17日 14:49
  • 449

绘制坐标图型

=====================================Widget.h===================================== #ifndef WIDGET_H...
  • liulihuo_gyh
  • liulihuo_gyh
  • 2012年11月14日 15:21
  • 376

android-柱状图、折线图、x轴、y轴绘制以及实例代码

首先上图: 看图说话,不错吧!!哈哈给地址:项目的github地址给自己打广告:^_^ 欢迎关注我的github!该项目不是我的独创,我在原有作者的基础上,把代码进行了注释、添加了上面三幅图中的两...
  • u010156024
  • u010156024
  • 2015年10月24日 16:32
  • 4806

Matlab坐标系绘制

在matlab中,显示坐标系的方法比较简单,调用下面的函数即可,效果如图1。然而,对于画数学公式的图而言,这种坐标显示方式与我们熟悉的数学坐标系不一样。 axis on                ...
  • Q1302182594
  • Q1302182594
  • 2015年06月15日 22:25
  • 5832

C#Windows窗体界面设计_02_绘制三角函数_多点作图法

待续 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
  • superweichao
  • superweichao
  • 2013年10月14日 16:22
  • 1048

【自己的整理】【jQuery插件】 使用canvas创建折线图

使用canvas创建折线图 一个网友的很常规的需求,要根据数据在一个canvas画布元素上画一个折线图,最开始做了一个很土的版本,现在自己想想还是弄个插件吧于是就有了这篇文章。 创建jquer...
  • towrabbit
  • towrabbit
  • 2017年12月05日 22:08
  • 113
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:绘制坐标图,折线图
举报原因:
原因补充:

(最多只允许输入30个字)