2016-08-01 28 views
0

Sehr einfach ein Make Graph und eine Linie zeichnen UIBezierPath mitWie erstellt man ein einfaches Diagramm in Ziel c mit UIBezierPath?

Auf Faust erstellen Sie eine Unterklasse von UIView

#import <UIKit/UIKit.h> 

@interface GraphView : UIView 

@property(nonatomic,strong)NSMutableArray *verticalPointsMarray; 
@property(nonatomic,strong)NSMutableArray *horizontalPointsMarray; 
@property(nonatomic,strong)NSMutableArray *graphValueMArray; 
@property(nonatomic,strong)NSMutableArray *graphPointsMArray; 


@property(nonatomic,assign)NSInteger  numberOfVerticlaLine; 
@property(nonatomic,assign)NSInteger  numberOfHorizontalLine; 

@end 

schließlich eine Linie zeichnen Siehe diesen Code

// GraphView.m 
// MapLocation 
// 
// Created by Md. Khurshid on 22/07/16. 
// Copyright © 2016 Md. Khurshid. All rights reserved. 
// 

#import "GraphView.h" 

#define LEFT_POINT @"leftPoint" 
#define RIGHT_POINT @"rightPoint" 
#define TOP_POINT @"topPoint" 
#define BOTTOM_POINT @"bottomPoint" 
#define MIN_NUMBER_OF_HORIZONTALLINE 1 
#define GRAPHL_INE_COLOR colorWithRed:68/255.0 green:127/255.0 blue:200/255.0 alpha:1.0].CGColor 

@implementation GraphView 
{ 
    UIBezierPath *_aPath; 
} 

// Only override drawRect: if you perform custom drawing. 
// An empty implementation adversely affects performance during animation. 
- (void)drawRect:(CGRect)rect { 


    self.verticalPointsMarray = [NSMutableArray new]; 
    self.horizontalPointsMarray = [NSMutableArray new]; 
    self.graphValueMArray  = [NSMutableArray new]; 

    //Add the graph points array You change The graph point value and graph drawing line change 
    [_graphValueMArray addObject:@"0"];  
    [_graphValueMArray addObject:@"1"];  
    [_graphValueMArray addObject:@"0"]; 
    [_graphValueMArray addObject:@"2"];  
    [_graphValueMArray addObject:@"0"];  
    [_graphValueMArray addObject:@"3"];  
    [_graphValueMArray addObject:@"1"];  

    //Make a vertical point 
    float width = (self.frame.size.width-40)/6; 
    for (NSInteger i=0; i < 7; i++) { 

     float x_witdh = width * i; 
     x_witdh = x_witdh +20; 
     NSMutableDictionary *dictionary = [NSMutableDictionary new]; 
     [dictionary setObject:[NSValue valueWithCGPoint: 
           CGPointMake(x_witdh, self.frame.size.height)] 
         forKey:TOP_POINT]; 
     [dictionary setObject:[NSValue valueWithCGPoint: 
           CGPointMake(x_witdh,0)] 
         forKey:BOTTOM_POINT]; 
     [self.verticalPointsMarray addObject:dictionary]; 
    } 

    _numberOfHorizontalLine = [self maxValue:_graphValueMArray]; 
    if (_numberOfHorizontalLine == 0) _numberOfHorizontalLine = MIN_NUMBER_OF_HORIZONTALLINE; 
    float height = self.frame.size.height /_numberOfHorizontalLine; 

    //Make a horizontal point 
    for (NSInteger i=0; i <= _numberOfHorizontalLine; i++) { 

     float y_height = height * i; 
     if (i == 0) y_height = y_height + 1; 
     if (i == _numberOfHorizontalLine && i != 0) y_height = y_height - 1; 
     NSMutableDictionary *dictionary = [NSMutableDictionary new]; 
     [dictionary setObject:[NSValue valueWithCGPoint: 
           CGPointMake(self.frame.size.width- 20,y_height)] 
         forKey:LEFT_POINT]; 
     [dictionary setObject:[NSValue valueWithCGPoint: 
           CGPointMake(20,y_height)] 
         forKey:RIGHT_POINT]; 
     [self.horizontalPointsMarray addObject:dictionary]; 
    } 
    [self drawVerticaLine]; 
    [self drawHorizontalLine]; 
    [self drawGraphLine]; 
} 

- (void)drawVerticaLine { 

    _aPath = [UIBezierPath bezierPath]; 
    NSInteger dayArrayIndex = _verticalPointsMarray.count; 
    NSArray *dayArray = [self getShortedDay]; 

    for (NSInteger i=0; i < self.verticalPointsMarray.count ; i++) { 

     NSDictionary *dictionary = [_verticalPointsMarray objectAtIndex:i]; 
     NSValue *value; 
     value = [dictionary objectForKey:TOP_POINT]; 
     CGPoint leftPoint = [value CGPointValue]; 
     value = [dictionary objectForKey:BOTTOM_POINT]; 
     CGPoint rightPoint = [value CGPointValue]; 

     [_aPath moveToPoint:leftPoint]; 

     if (!dayArrayIndex) { 
      [self addTitleLable:CGRectMake(leftPoint.x-10, leftPoint.y, 35,25) withTitle:[NSString stringWithFormat:@"%@",[dayArray objectAtIndex:--dayArrayIndex]]]; 
     } else { 

      [self addTitleLable:CGRectMake(leftPoint.x-26, leftPoint.y, 50,25) withTitle:[NSString stringWithFormat:@"%@",[dayArray objectAtIndex:--dayArrayIndex]]]; 
     } 
     [_aPath addLineToPoint:rightPoint]; 
    } 
    _aPath.lineWidth = 1.0; 
    [[UIColor groupTableViewBackgroundColor] setStroke]; 
    [_aPath stroke]; 
} 

- (void)drawHorizontalLine { 

    _aPath = [UIBezierPath bezierPath]; 
    NSInteger title = _numberOfHorizontalLine; 
    for (NSInteger i=0; i <= _numberOfHorizontalLine; i++) { 

     NSDictionary *dictionary = [_horizontalPointsMarray objectAtIndex:i]; 
     NSValue *value; 
     value    = [dictionary objectForKey:LEFT_POINT]; 
     CGPoint topPoint = [value CGPointValue]; 
     value    = [dictionary objectForKey:RIGHT_POINT]; 
     CGPoint bottomPoint = [value CGPointValue]; 

     [_aPath moveToPoint:topPoint]; 
     [_aPath addLineToPoint:bottomPoint]; 
     [self addTitleLable:CGRectMake(0, bottomPoint.y-15, 20, 30) withTitle:[NSString stringWithFormat:@"%ld",title--]]; 
    } 
    _aPath.lineWidth = 1.0; 
    [[UIColor groupTableViewBackgroundColor] setStroke]; 
    [_aPath stroke]; 
} 

- (void)drawGraphLine { 

    _aPath = [UIBezierPath bezierPath]; 
    NSDictionary *dictionary; 
    NSValue *value; 
    NSMutableArray *mArray = [NSMutableArray new]; 
    self.graphPointsMArray = [NSMutableArray new]; 
    NSValue *firstPointValue; 

    for (NSInteger i = 0; i < _graphValueMArray.count; i++) { 

     NSInteger hIndex = _numberOfHorizontalLine; 
     for (NSInteger vIndex = 0; vIndex <= _numberOfHorizontalLine; vIndex++) { 

      if (vIndex == [[_graphValueMArray objectAtIndex:i]intValue]) { 

       dictionary  = [_verticalPointsMarray objectAtIndex:i]; 
       value   = [dictionary objectForKey:BOTTOM_POINT]; 
       CGPoint point = [value CGPointValue]; 
       dictionary  = [_horizontalPointsMarray objectAtIndex:hIndex]; 
       value   = [dictionary objectForKey:LEFT_POINT]; 
       CGPoint point1 = [value CGPointValue]; 
       [mArray addObject:[NSValue valueWithCGPoint:CGPointMake(point.x,point1.y)]]; 
       if (i== 0) firstPointValue = [NSValue valueWithCGPoint:CGPointMake(point.x,point1.y)]; 
       [_graphPointsMArray addObject:[NSValue valueWithCGPoint:CGPointMake(point.x,point1.y)]]; 
       break; 
      } 
      hIndex = hIndex - 1; 
     } 

     if (mArray.count == 2) { 

      value = [mArray objectAtIndex:0]; 
      CGPoint point1 = [value CGPointValue]; 
      value = [mArray objectAtIndex:1]; 
      CGPoint point2 = [value CGPointValue]; 
      [_aPath moveToPoint:point2]; 
      [_aPath addQuadCurveToPoint:point1 controlPoint:point2]; 
      [mArray removeObjectAtIndex:0]; 
      [self addPointViewWithFrame:CGRectMake(point1.x-4, point1.y-3, 8, 8)]; 

     } 
    } 

    [_graphPointsMArray addObject:firstPointValue]; 
    value = [mArray objectAtIndex:0]; 
    CGPoint point = [value CGPointValue]; 
    [self addPointViewWithFrame:CGRectMake(point.x-5, point.y-4, 10, 10)]; 
    _aPath.lineWidth = 2.0; 
    [[UIColor colorWithRed:68.0/255.0 green:127.0/255.0 blue:200.0/255.0 alpha:1.0] setStroke]; 
    [_aPath stroke]; 

    value = [_graphPointsMArray objectAtIndex:0]; 
    point = [value CGPointValue]; 
    [_aPath moveToPoint:point];  
    for (NSInteger index=0; index < _graphPointsMArray.count; index++) { 

     if (index == _graphPointsMArray.count-1) { 

      NSDictionary *dict = [_horizontalPointsMarray lastObject]; 
      value = [dict objectForKey:LEFT_POINT]; 
      point = [value CGPointValue]; 

     } else { 

      value = [_graphPointsMArray objectAtIndex:index]; 
      point = [value CGPointValue]; 

     } 
     [_aPath addLineToPoint:point]; 
    } 

    [_aPath closePath]; 
    CAShapeLayer *line = [CAShapeLayer layer]; 
    line.backgroundColor = [UIColor redColor].CGColor; 
    line.path = [_aPath CGPath]; 
    line.lineWidth = 0.0; 
    line.fillColor = [UIColor colorWithRed:68.0/255.0 green:127.0/255.0 
             blue:200.0/255.0 alpha:0.2].CGColor; 
    [[self layer] addSublayer:line]; 

} 
- (void)addTitleLable:(CGRect)frame withTitle:(NSString *)title { 

    UILabel *lable = [[UILabel alloc] initWithFrame:frame]; 
    lable.text = title; 
    lable.font = [UIFont systemFontOfSize:14]; 
    lable.textAlignment = NSTextAlignmentCenter; 
    [self addSubview:lable]; 
} 

- (void)addPointViewWithFrame:(CGRect)frame { 

    UIView *view = [UIView new]; 
    view.frame = frame; 
    view.layer.masksToBounds = YES; 
    view.layer.cornerRadius = frame.size.height/2; 
    view.backgroundColor  = [UIColor colorWithRed:68.0/255.0 green:127.0/255.0 
               blue:200.0/255.0 alpha:1.0]; 
    [self addSubview:view]; 
} 
- (NSArray *)getShortedDay { 

    NSDateFormatter *dateFormatter =[ [NSDateFormatter alloc] init]; 
    [dateFormatter setDateFormat:@"EEE"]; 

    NSDate *now = [NSDate date]; 

    NSMutableArray *results = [NSMutableArray arrayWithCapacity:8]; 

    for (int i = 0; i < 7; i++) 
    { 
     NSDate *date = [NSDate dateWithTimeInterval:-(i * (60 * 60 * 24)) sinceDate:now]; 
     if ([[dateFormatter stringFromDate:now] isEqual:[dateFormatter stringFromDate:date]]) { 

      [results addObject:@"Today"]; 
     } else { 

      [results addObject:[dateFormatter stringFromDate:date]]; 
     } 
    } 

    return results; 
} 

// get max value 
- (NSInteger)maxValue:(NSArray *)arrValue 
{ 
    float maxValue = 0.0; 
    for (NSInteger index=0 ;index <arrValue.count;index++) { 
     float compareValue = [[arrValue objectAtIndex:index] floatValue]; 
     if (compareValue > maxValue) { 
      maxValue = compareValue; 
     } 
    } 
    return maxValue; 
} 
@end 

Setzen Sie den Graph Wert und erstellen und führen Sie das Projekt

self.graphValueMArray  = [NSMutableArray new]; 
    [_graphValueMArray addObject:@"0"]; 
    [_graphValueMArray addObject:@"1"]; 
    [_graphValueMArray addObject:@"0"]; 
    [_graphValueMArray addObject:@"2"]; 
    [_graphValueMArray addObject:@"0"]; 
    [_graphValueMArray addObject:@"3"]; 
    [_graphValueMArray addObject:@"1"]; 

Dieser Graph ist wie folgt aussehen: -

Simple graph image

Und wieder den Wert ändern und das Projekt

self.graphValueMArray  = [NSMutableArray new]; 
    [_graphValueMArray addObject:@"0"]; 
    [_graphValueMArray addObject:@"10"]; 
    [_graphValueMArray addObject:@"5"]; 
    [_graphValueMArray addObject:@"7"]; 
    [_graphValueMArray addObject:@"6"]; 
    [_graphValueMArray addObject:@"9"]; 
    [_graphValueMArray addObject:@"2"]; 

Simple Graph Image

+1

diese kontaktieren ist eine Frage oder eine Antwort? Ich kann nicht verstehen, was du zu fragen versuchst. Werfen Sie einen Blick auf unseren [how to ask] (http://stackoverflow.com/help/how-to-ask) Leitfaden. – dubes

+0

@dubes Frage nicht klar, aber das Bild ist klar, das Problem zu sagen – Spynet

Antwort

0

Hallo Khurshid bitte folgen Sie der Korrektur auf Ihrer Methode ausführen,

GraphView.h

@interface GraphView : UIView 


@property(nonatomic,strong)NSMutableArray *verticalPointsMarray; 
@property(nonatomic,strong)NSMutableArray *horizontalPointsMarray; 
@property(nonatomic,strong)NSMutableArray *graphValueMArray; 
@property(nonatomic,strong)NSMutableArray *graphPointsMArray; 

@property(nonatomic,assign)NSInteger  numberOfVerticlaLine; 
@property(nonatomic,assign)NSInteger  numberOfHorizontalLine; 

- (void)drawRect:(CGRect)rect withPoint:(NSMutableArray *)pointsToDraw ; 

GraphView.m

- (void)drawRect:(CGRect)rect withPoint:(NSMutableArray *)pointsToDraw { 


    self.verticalPointsMarray = [NSMutableArray new]; 
    self.horizontalPointsMarray = [NSMutableArray new]; 
// self.graphValueMArray  = [NSMutableArray new]; 
    self.graphValueMArray  = pointsToDraw; 

    //Add the graph points array You change The graph point value and graph drawing line change 

    // [_graphValueMArray addObject:@"0"]; 
    // [_graphValueMArray addObject:@"1"]; 
    // [_graphValueMArray addObject:@"0"]; 
    // [_graphValueMArray addObject:@"2"]; 
    // [_graphValueMArray addObject:@"0"]; 
    // [_graphValueMArray addObject:@"3"]; 
    // [_graphValueMArray addObject:@"1"]; 

Und wird Methodenaufruf sein

self.graphView = [[GraphView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height-60) ]; 
    [self.graphView drawRect:self.graphView.frame withPoint:_graphValueMArray]; 
    [self.graphView setBackgroundColor:[UIColor greenColor]] ; 
    [self.graphView setGraphPointsMArray:self.graphValueMArray]; 
    [self.view addSubview:self.graphView]; 

Alles Gute für jede Info fühlen Sie sich frei