IOS Line chart Implementation, dashed, gradient filled, line animation

Effect Diagram Demo address

demo mainly implemented a few functions 1. Line chart + Stroke Animation + can scroll around 2. Dotted line Marking 3. Gradient Mask Fill 4. Small dot Show + click to enlarge animation If the above effect has met your current needs please look down Split Interface Call Example

-(Nxlinechartview *) chartview{
    if (!_chartview) {
        _chartview = [[Nxlinechartview alloc]init];
        _chartview.backgroundcolor = [Uicolor whitecolor];
        _chartview.center = Cgpointmake ([UIScreen mainscreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height /2);
        _chartview.bounds = CGRectMake (0, 0, [UIScreen mainscreen].bounds.size.width-100, MB);
        _chartview.linechartxlabelarray = @[@ "The Charm clan", @ "Huawei", @ "ZTE", @ "millet", @ "Apple", @ "one plus", @ "le see", @ "Music", @ "TV", @ "Sports"];
        _chartview.linechartylabelarray = @[];
        _chartview.linechartdataarray   = @[@100,@40,@60,@45,@100,@55,@33,@120,@40,@100];
    }
    return _chartview;
}

#import <UIKit/UIKit.h>

@interface nxlinechartview:uiview
@property (nonatomic, strong) Nsarray * Linechartylabelarray;
@property (nonatomic, Strong) Nsarray * Linechartxlabelarray; X-axis data
@property (nonatomic, Strong) Nsarray * LINECHARTDATAARRAY;//Data source
@end

1. Draw a polyline, where the drawing is combined with Uibezierpath and Cashapelayer to create a scrollview that scrolls left and right first

Scrollable view
-(Uiscrollview *) mainscroll{
    if (!_mainscroll) {
        _mainscroll = [[Uiscrollview alloc] Initwithframe:cgrectmake (0, 0, Self.frame.size.width, self.frame.size.height)];
        _mainscroll.showsverticalscrollindicator = NO;
        _mainscroll.showshorizontalscrollindicator = NO;
        [Self addsubview:_mainscroll];
    }
    return _mainscroll;
}

drawing from the data obtained by Linechartdataarray

Set Line chart-(void) Setlinechartdataarray: (Nsarray *) linechartdataarray{_linechartdataarray = Linechartdataarray;
   if (!_linechartdataarray) return;

    [Self drawgragient];

    Uibezierpath * Bezierpath = [self getpath];

    Cashapelayer * layers = [Cashapelayer layer];
    Layers.path = Bezierpath.cgpath;
    Layers.linewidth = 2.0; Layers.strokecolor = [Uicolor Redcolor].
    Cgcolor; Layers.fillcolor = [Uicolor Clearcolor].
    Cgcolor;
    [Self doanimationwithlayer:layers];
   [Self.mainScroll.layer Addsublayer:layers];
    Self.gredientView.layer.mask = layers; [Self Addtoppointbutton]; Small dot [self drawgredientlayer];
    Gradient}-(Uibezierpath *) getpath{self.toppointarray = [[Nsmutablearray alloc]init];
    Uibezierpath * Bezierpath = [Uibezierpath Bezierpath]; for (int idx =0 idx<_linechartdataarray.count; idx++) {if (idx = 0) {Cgpoint startpoint = Cgpoi Ntmake ([_pointxarray[0] floatvalue], Self.frame.size.height-[_linecharTdataarray[0] floatvalue]-bottommarginscale);
            [Bezierpath Movetopoint:startpoint];

        [Self.toppointarray Addobject:[nsvalue Valuewithcgpoint:startpoint]]; }else{Cgpoint point = Cgpointmake ([_pointxarray[idx] floatvalue], Self.frame.size.height-[_linechartdataarray
            [IDX] floatvalue]-bottommarginscale);
            [Bezierpath Addlinetopoint:point];
        [Self.toppointarray Addobject:[nsvalue Valuewithcgpoint:point]];

} return Bezierpath;
 }

The line animation uses the core animation strokeend this effect realizes, the code is as follows

-(void) Doanimationwithlayer: (Cashapelayer *) layer{
    cabasicanimation * baseanimation = [cabasicanimation animationwithkeypath:@ "Strokeend"];
    Baseanimation.duration = 2;
    Baseanimation.fromvalue = @0.0;
    Baseanimation.tovalue = @1.0;
    Baseanimation.repeatcount = 1;
    [Layer addanimation:baseanimation forkey:@ "strokeanimation"];


}

2. Dotted line Marking

-(void) DrawRect: (cgrect) rect {cgcontextref CTX = Uigraphicsgetcurrentcontext ();
    CGFloat yaxisoffset = 10.f;
    Cgpoint Point; CGFloat ystepheight = rect.size.height/self.

    Linechartdataarray.count; Cgcontextsetstrokecolorwithcolor (CTX, [Uicolor Lightgraycolor].
    Cgcolor); Cgcontextsetfillcolorwithcolor (CTX, [Uicolor Redcolor].

    Cgcolor); for (Nsuinteger i = 0; i < _linechartdataarray.count. i++) {point = Cgpointmake (+ yaxisoffset, rect.size.h
        Eight-i * ystepheight + 10/2));
        Cgcontextmovetopoint (CTX, Point.x, POINT.Y);
        Add dotted style grid cgfloat dash[] = {6, 5};
        Dot diameter is points cgcontextsetlinewidth (CTX, 0.5); Cgcontextsetfillcolorwithcolor (CTX, [Uicolor Redcolor].

        Cgcolor);
        Cgcontextsetlinecap (CTX, Kcglinecapround);
        Cgcontextsetlinedash (CTX, 0.0, dash, 2); This is to change the width of the dotted line cgrect frame = CGRectMake (rect.origin.x, RECT.ORIGIN.Y, Self.totalwidth, reCt.size.height);
        Cgcontextaddlinetopoint (CTX, Cgrectgetwidth (frame)-5 + 5, POINT.Y);
    Cgcontextstrokepath (CTX);

 }

}

3. Gradient Mask Fill

/* @parameter Background color fill/* (void) drawgredientlayer{cagradientlayer *gradientlayer = [Cagradientlayer layer];
    Gradientlayer.frame = CGRectMake (0, 0, self.totalwidth, Self.frame.size.height-bottommarginscale); Gradientlayer.colors = @[(__bridge id) [Uicolor colorwithred:250/255.0 green:170/255.0 blue:10/255.0 alpha:0.8]. Cgcolor, (__bridge id) [Uicolor colorwithwhite:1 alpha:0.4].

    Cgcolor];
    GRADIENTLAYER.LOCATIONS=@[@0.0,@1.0];
    Gradientlayer.startpoint = Cgpointmake (0.0,0.0);


    Gradientlayer.endpoint = Cgpointmake (1,0);
    Uibezierpath *gradientpath = [Uibezierpath Bezierpath];
    [Gradientpath Movetopoint:cgpointmake ([_pointxarray[0] floatvalue], Self.frame.size.height-bottommarginscale)]; for (int i=0; i<_linechartdataarray.count; i++) {[Gradientpath addlinetopoint:cgpointmake ([_pointXArray[i] Flo
    Atvalue], Self.frame.size.height-[_linechartdataarray[i] floatvalue]-bottommarginscale)]; } [Gradientpath Addlinetopoint:cgpointmake ([_pointxaRRAY[_POINTXARRAY.COUNT-1] Floatvalue], Self.frame.size.height-bottommarginscale)];
    Cashapelayer *ARC = [Cashapelayer layer];
    Arc.path = Gradientpath.cgpath;
    Gradientlayer.mask = arc;

[Self.mainScroll.layer Addsublayer:gradientlayer];

 }

4. Small dot Show + click to enlarge animation Small Dots

Add small dots-(void) addtoppointbutton{if (Self.topPointArray.count ==0) return; 
        for (int idx =0, idx<self.toppointarray.count; idx++) {cgpoint point = [Self.toppointarray[idx] cgpointvalue];
        UIButton * button = [UIButton buttonwithtype:uibuttontypecustom];
        Button.center = point;
        Button.bounds = CGRectMake (0, 0, 10, 10);
        Button.layer.cornerRadius = 5;
        Button.clipstobounds = YES;
        Button.backgroundcolor = [Uicolor Cyancolor];
        Button.tag = Gap+idx; [Button settitle:[self.
        LINECHARTDATAARRAY[IDX] stringvalue] forstate:uicontrolstatenormal];
        [Button Settitlecolor:[uicolor Blackcolor] forstate:uicontrolstatenormal];
        Button.titleLabel.font = [Uifont systemfontofsize:5];
        Button.titleedgeinsets = uiedgeinsetsmake (0, 0, 0, 0);
        [Button addtarget:self action: @selector (Didselectbuttonclick:) forcontrolevents:uicontroleventtouchupinside];
    [Self.mainscroll Addsubview:button];
}


}
 

small dot Click to enlarge Animation using Core Animation scale

-(void) Didselectbuttonclick: (UIButton *) sender{for (id emptyobj in self.mainScroll.subviews) {if ([emptyobj
          Iskindofclass:[uibutton class]] {UIButton * btn = (UIButton *) emptyobj;
          Btn.bounds = CGRectMake (0, 0, 5, 5);
            [btn Settitlecolor:[uicolor Clearcolor] forstate:uicontrolstatenormal];
        [Btn.layer removeallanimations];
    } [self doscaleanimationwithview:sender]; NSLog (@ "%@", [self.
    LINECHARTDATAARRAY[SENDER.TAG-GAP] stringvalue]); [Sender settitle:[self.
    LINECHARTDATAARRAY[SENDER.TAG-GAP] stringvalue] forstate:uicontrolstatenormal];
    [Sender Settitlecolor:[uicolor Redcolor] forstate:uicontrolstatenormal];

Sender.titleLabel.font = [Uifont systemfontofsize:5]; }-(void) Doscaleanimationwithview: (UIView *) view{cakeyframeanimation * animation = [Cakeyframeanimation animationwi
    thkeypath:@ "Transform.scale"];
    Animation.duration = 0.3;
    Animation.values = @[@2,@1.5,@0.8,@1,@2]; ANimation.repeatcount = 2;
    Animation.fillmode = Kcafillmodeforwards;
    Animation.removedoncompletion = NO;
[View.layer addanimation:animation forkey:@ "Scaleanimations"];
 }

Bottom x axis data fill

Bottom x View-(void) Setlinechartxlabelarray: (Nsarray *) linechartxlabelarray{_linechartxlabelarray = Linechartxlabelarra
    Y

    if (!_linechartxlabelarray) return;
   _pointxarray = [[Nsmutablearray alloc]init]; CGFloat Labelwidthscale = (self.frame.size.width-leftxmarginscale-rightxmarginscale)/_
    Linechartxlabelarray.count;
    self.totalwidth = 0; for (int idx = 0; idx < _linechartxlabelarray.count idx + +) {CGFloat Labelwidthscale = [Self getlabelwidthwit
        HTEXT:_LINECHARTXLABELARRAY[IDX]];
        CGFloat x = Self.totalwidth+marginscale;
        CGFloat y = self.frame.size.height-linechartxlabelheight;
        Uilabel * label = [[Uilabel alloc]init];
        Label.frame = CGRectMake (x, Y, Labelwidthscale, linechartxlabelheight);
        Label.text = _linechartxlabelarray[idx];
        Label.textalignment = Nstextalignmentcenter;
        Label.textcolor = [Uicolor Redcolor];
        Label.font = [Uifont systemfontofsize:fontsize]; [_pointxarray AddObject: [NSString stringwithformat:@ "%.f", label.center.x]];
        [Self.mainscroll Addsubview:label];
        Self.totalwidth = Label.frame.origin.x+label.frame.size.width;
    [Self.mainscroll Setcontentsize:cgsizemake (Cgrectgetmaxx (Label.frame), 0)];
 }

}

look at the reduction by using the example is easier

-(Nxlinechartview *) chartview{
    if (!_chartview) {
        _chartview = [[Nxlinechartview alloc]init];
        _chartview.backgroundcolor = [Uicolor whitecolor];
        _chartview.center = Cgpointmake ([UIScreen mainscreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height /2);
        _chartview.bounds = CGRectMake (0, 0, [UIScreen mainscreen].bounds.size.width-100, MB);
        _chartview.linechartxlabelarray = @[@ "The Charm clan", @ "Huawei", @ "ZTE", @ "millet", @ "Apple", @ "one plus", @ "le see", @ "Music", @ "TV", @ "Sports"];
        _chartview.linechartylabelarray = @[];
        _chartview.linechartdataarray   = @[@100,@40,@60,@45,@100,@55,@33,@120,@40,@100];
    }
    return _chartview;
}

Demo Address