how to draw a line graph in ios? Any control which will help me show graph data in ios

问题

I want to create a customized graph.

Which will show on Y axis number of mathces e.g. 4

Y axis legends will be the starting date and ending date.

And on X axis a line graph will plot the points on the status of the each match E.g.

Win, Draw, Loss.

How to do this in Objective C!??

回答1:

To create line graph just we need one UIBezier path and one CAShapeLayer, pass the co ordinate points based on the data you have to the UiBezierpath that will create the line graph then add that path to layer.

Here is the code to create line graph,

//Bezier path for ploting graph
_graphPath = [[UIBezierPath alloc]init];
[_graphPath setLineWidth:10];

//CAShapeLayer for graph allocation
_graphLayout = [CAShapeLayer layer];
_graphLayout.frame = CGRectMake(self.frame.size.width*0, 0, self.frame.size.width*0.8, (self.frame.size.height*0.9));
_graphLayout.fillColor = [[UIColor colorWithRed:0 green:0 blue:255 alpha:0.1] CGColor];
_graphLayout.strokeColor = [UIColor blueColor].CGColor;
_graphLayout.lineWidth = 2;
_graphLayout.path = [_graphPath CGPath];
_graphLayout.lineCap = @"round";
_graphLayout.lineJoin = @"round";
[self.layer addSublayer:_graphLayout];

The code to add line to point and move to point

[_graphPath moveToPoint:CGPointMake(coord.x, coord.y)];
[_graphPath addLineToPoint:CGPointMake(coord.x, coord.y)];
_graphLayout.path = [_graphPath CGPath];

回答2:

I've made a method for returning a view with data points plotted:

-(UIView *)createGraphWithFrameSize:(CGSize)frameSize
                     lineColor:(UIColor *)lineColor
                      xAxisMin:(float)xAxisMin
                      xAxisMax:(float)xAxisMax
                      yAxisMin:(float)yAxisMin
                      yAxisMax:(float)yAxisMax
                    dataPoints:(NSArray <NSValue *> *)dataPoints {

    UIView *graph = [UIView new];

    graph.backgroundColor = [UIColor clearColor];

    graph.frame = CGRectMake(0, 0, frameSize.width, frameSize.height);

    //

    CAShapeLayer *line = [CAShapeLayer layer];
    UIBezierPath *linePath = [UIBezierPath bezierPath];

    int i = 0;

    while (i < dataPoints.count) {

        CGPoint point = [dataPoints[i] CGPointValue];

        float xRatio = 1.0-((xAxisMax-point.x)/(xAxisMax-xAxisMin));
        float yRatio = 1.0-((yAxisMax-point.y)/(yAxisMax-yAxisMin));

        float x = xRatio*frameSize.width;
        float y = (1.0-yRatio)*frameSize.height;

        if (i == 0) {
            [linePath moveToPoint:CGPointMake(x, y)];
        } else {
            [linePath addLineToPoint:CGPointMake(x, y)];
        }

        i++;

    }

    line.lineWidth = 2.0;
    line.path = linePath.CGPath;
    line.fillColor = [[UIColor clearColor] CGColor];
    line.strokeColor = [lineColor CGColor];
    [graph.layer addSublayer:line];

    //

    graph.clipsToBounds = YES;

    return graph;

}

Example usage:

#define xy(__x,__y) [NSValue valueWithCGPoint:CGPointMake(__x,__y)]

    UIView *plotView = [self createGraphWithFrameSize:CGSizeMake(300, 300)
                                            lineColor:[UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.8]
                                             xAxisMin:-5
                                             xAxisMax:5
                                             yAxisMin:-5
                                             yAxisMax:5
                                           dataPoints:@[xy(-5,-4),
                                                        xy(0,3),
                                                        xy(5,-4)]];

    plotView.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.5];
    [self.view addSubview:plotView];

来源：https://stackoverflow.com/questions/31963336/how-to-draw-a-line-graph-in-ios-any-control-which-will-help-me-show-graph-data