[iOS] simple and easy to use line chart control

A simple line chart control, recently project engineering needs to use a discount chart, see some examples of online, but can not meet the special requirements of UED, so you can only write one yourself.

Let’s look at the renderings first:

[iOS] simple and easy to use line chart control
line graph

The basic implementation of the following functions:

  • Supports custom Y axis coordinates
  • Support custom X axis display index
  • Add reference line and click reticle
  • Support custom pop-up description view

Demo GitHub YASimpleGraph, star _ love please

Instructions

YASimpleGraph has now supported CocoaPods and can be added to any project in a very short time.

install

The easiest way to install YASimpleGraph is to use CocoaPods and add the following in PodFile:

Pod,'YASimpleGraph','~> 0.0.1'

Or directly drag YASimpleGraphView.h and YASimpleGraphView.m two source files directly into your project project.

Integrate

  • First import the header file
#import "YASimpleGraphView.h""
  • Follow the agreement
@interface ViewController () < YASimpleGraphDelegate>
  • Initialization
/ / initialization of the data source allValues = @[@ "20", "0", "@ @ @ 110", "70", "80", "@ @ 40"]; allDates = @[@ @ "06/01", "06/02", "06/03", @ @ @ "06/04", "06/05". @ "06/06"]; / / initialize the line graph and set the corresponding attribute YASimpleGraphView *graphView alloc]init] = [[YASimpleGraphView; graphView.frame = CGRectMake (15, 200, 375-30, 200); graphView.backgroundColor [UIColor = whiteColor]; graphView.allValues = allValues; graphView.allDates = allDates; graphView.defaultShowIndex = allDates.count-1; graphView.delegate = self; graphView.lineColor = [UIColor = grayColor]; graphView.lineWidth 1.0/[UIScreen mainScreen].scale; graphView.lineAlpha = 1; graphView.enableTouchLine = YES; [self.view addSubview:graphView];
  • Start drawing
[graphView startDraw];
  • Implement corresponding protocols
/ / custom X axis shows the index label (NSArray *) - incrementPositionsForXAxisOnLineGraph: (YASimpleGraphView * graph) {return @[@0, @1, @2, @3, @4, @5];} //Y axis points - (NSInteger) numberOfYAxisLabelsOnLineGraph: (YASimpleGraphView * graph) {return 5;} / / custom popUpView (UIView *) popUpViewForLineGraph: (* YASimpleGraphView UILabel *label = [[UILabel graph) {alloc]initWithFrame:CGRectMake (0, 0, 0, 0)]; label.backgroundColor = [UIColor colorWithRed:146/255.0 green:191/255.0 blue:239/255.0 alpha:1]; label.numberOfLines = 0; label.font = [UIFont systemFontOfSize:10]; label.textAlignment = NSTextAlignmentCenter; return label;} / / modify the corresponding point pop-up view (void) lineGraph: (YASimpleGraphView * graph) ModifyPopupView: (UIView *) popupView forIndex: (NSUInteger) index UILabel (UILabel*) {*label = popupView; NSString = *date [NSString stringWithFormat:@ allDates[index]] NSString, "% @"; *str [NSString = stringWithFormat:@ "% @ /n% @ yuan", date, allValues[index]]; CGRect rect = [str boundingRectWithSize:CGSizeMake (MAXFLOAT, 40) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:10]} context:nil]; [label setFrame:CGRectMake (0, 0, rect.size.width, rect.size.height); label.textColor [UIColor = whiteColor]; label.text = str;}

To complete the above steps, the line chart control has been integrated into our project, and, of course, YASimpleGraph also provides a series of external attribute variables that allow us to highly customize the line chart control as follows:

The line color @property / / / (nonatomic, strong) UIColor *lineColor The line width; / / / @property (nonatomic, assign) CGFloat lineWidth The line alpha; / / / @property (assign, nonatomic) float lineAlpha The Dot color; / / / @property (nonatomic, strong) UIColor *dotColor The Dot borderColor; / / / @property (nonatomic, strong) UIColor *dotBorderColor The Dot width; / / / @property (nonatomic, assign) CGFloat dotWidth The Dot borderWidth; / / / @property (nonatomic, assign) CGFloat dotBorderWidth The dashLine color; / / / @property (nonatomic, strong) UIColor *dashLineColor The dashLine width; / / / @property (nonatomic, assign) CGFloat dashLineWidth The bottomLine color; / / / @property (nonatomic, strong) UIColor *bottomLineColor; / / / The Bo TtomLine, width, @property (nonatomic, assign), CGFloat, bottomLineHeight,...

And so on, a series of specific reference YASimpleGraphView.h

Implementation process

The implementation process is broadly divided into the following steps:

  1. Draw coordinate axis & points and reference lines
  2. Draw data points, broken lines
  3. Handle gestures Click

Briefly list some areas to be noted in the above 3 steps:

A. horizontal axis according to the number of points directly into it, the longitudinal axis is a bit difficult, here with reference to the colleagues of the ordinates rounding algorithm and minimum value optimization, mainly as follows:

- (NSInteger) calcIntegerDeltaValue: (double) maxValue minValue: (double) minValue{NSInteger (integerDetla = ceil (maxValue - minValue) / (numberOfYAxis-1)); / / get the integer rounding further such as: 101 -> 1001 -> 110, 1100 if (integerDetla = = 0) {/ / = 0 level linear returns 100 a value of 100}else{return [self space return; ajustIntegerValue:integerDetla];}} - (NSInteger) ajustIntegerValue: (NSInteger) origalValue{if (origalValue < 100) {return origalValue}else{; NSInteger base NSInteger = origalValue; round = 1; while (origalValue > 100) {origalValue = origalValue / round = 10; 10 return B;} ASE - base% round + round}}

The B. line is directly connected with the coordinate point, when painting curve, the curve is more smooth curve, take two times two times Bessel between two points, namely the first point, then the starting point for the two time Bessel, specific implementation are as follows:

+ (UIBezierPath *) quadCurvedPathWithPoints: (NSArray * points) {UIBezierPath *path = [UIBezierPath bezierPath]; NSValue *value = points[0]; CGPoint = P1 [value CGPointValue]; [path moveToPoint:p1]; if (points.count = = 2) {value = points[1]; CGPoint = P2 [value CGPointValue]; [path addLineToPoint:p2]; return path;} for (NSUInteger I = 1; I < points.count; i++) {value = points[i]; CGPoint = P2 [value CGPointValue]; CGPoint midPoint = midPointForPoints (P1, P2); [path addQuadCurveToPoint:midPoint controlPoint:controlPointForPoints (midPoint, P1)]; [path addQuadCurveToPoint:p2 controlPoint:controlPointForPoints (midPoin T, P2); P1 = P2;} return path;} static CGPoint midPointForPoints (CGPoint P1, CGPoint P2) {return (CGPointMake (p1.x + p2.x) / 2 (p1.y + p2.y) / 2}); static CGPoint controlPointForPoints (CGPoint P1, CGPoint P2) {CGPoint controlPoint = midPointForPoints (P1 P2; diffY, CGFloat) = Fabs (p2.y - controlPoint.y); if (p1.y < p2.y controlPoint.y = diffY else); if (p1.y > p2.y controlPoint.y = diffY return); controlPoint;}