iOS 折线图（3）

屏幕快照 2017-04-06 17.17.02.png

从开始使用初始化说起
首先初始化个LineGraph视图，赋值XY轴数组，XY轴的最大值，XY轴的颜色，每条折线所代表的意思放置位置（代码中为upleft）

LineGraph* lineGraphView = [[LineGraph alloc]initWithFrame:CGRectMake(20, 100, 300, 200)];
    lineGraphView.XArray = @[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10"];
    lineGraphView.YArray = @[@"0",@"0.3",@"0.4",@"0.6",@"0.8",@"1.0"];
    lineGraphView.MaxX = 10.0f;
    lineGraphView.MaxY = 1.0f;
    lineGraphView.XYlineColor = [UIColor redColor];
    lineGraphView.namePosition = LineNamePositionUpleft;
    lineGraphView.layer.borderWidth = 1;
    [self.view addSubview:lineGraphView];

这一段相较于之前没做多大改变，添加了折线信息的位置设置

typedef NS_ENUM(NSUInteger, LineNamePosition) {
    LineNamePositionUpleft,                                     //折线对应的名称在左上
    LineNamePositionUpRight,                                    //折线对应的名称在右上
    LineNamePositionCenter,                                     //折线对应的名称在中上
};

之后对折线进行封装，每一条直线都是一个BrokenLine的实例

BrokenLine* bkLin = [BrokenLine new];
    bkLin.lineColor = [UIColor greenColor];
    bkLin.lineName = @"测试1";
    bkLin.brokenArray = @[[NSValue valueWithCGPoint:CGPointMake(0, 0.7)],[NSValue valueWithCGPoint:CGPointMake(1.3, 0.3)],[NSValue valueWithCGPoint:CGPointMake(1.7, 0.5)],[NSValue valueWithCGPoint:CGPointMake(1.9, 0.8)],[NSValue valueWithCGPoint:CGPointMake(2.4, 0.3)],[NSValue valueWithCGPoint:CGPointMake(3.3, 0.44)],[NSValue valueWithCGPoint:CGPointMake(3.9, 0.3)]];
    [lineGraphView addBrokenLine:bkLin];

实例中对折线的颜色，名字及折线中点的数值进行赋值，并添加在lineGraphView上，add方法为以下：

-(void)addBrokenLine:(BrokenLine*)bkLin
{
    [self.totalBrokenArray addObject:bkLin];
    bkLin.brokenArray = [bkLin drawBrokenLine:self.frame andMaxX:_MaxX andMaxY:_MaxY];
}

BrokenLine类

@interface BrokenLine : NSObject
@property (nonatomic, assign) UIColor*  lineColor;          //折线颜色

@property (nonatomic, strong) NSArray* brokenArray;         //传入的point数组
@property (nonatomic, strong) NSString* lineName;           //该折线对应的名称
-(NSMutableArray*)drawBrokenLine:(CGRect)lineFrame andMaxX:(CGFloat)maxX andMaxY:(CGFloat)maxY;
@end

@implementation BrokenLine

-(NSMutableArray*)drawBrokenLine:(CGRect)lineFrame andMaxX:(CGFloat)maxX andMaxY:(CGFloat)maxY
{
    NSMutableArray* positionArr = [NSMutableArray new];
    for (int i = 0; i<self.brokenArray.count; i++) {
        NSValue* valueStart = self.brokenArray[i];
        CGPoint pointStart = [valueStart CGPointValue];
        CGPoint p = CGPointMake((pointStart.x/maxX)*(lineFrame.size.width-2*defaultX), (pointStart.y/maxY)*(lineFrame.size.height-2*defalutY));
        if (i == 0) {
            [positionArr addObject:[NSValue valueWithCGPoint:CGPointMake(p.x+defaultX,lineFrame.size.height-p.y-defalutY)]];
        }
        else
        {
            //把点加入到路径里面
            [positionArr addObject:[NSValue valueWithCGPoint:CGPointMake(p.x+defaultX,lineFrame.size.height-p.y-defalutY)]];
        }
    }
    return positionArr;
}
@end

drawBrokenLine这个方法中计算出传入的点相对于XY轴坐标系的真正位置，返回给自身的brokenArray，之后可以在LineGraph的totalBrokenArray数组中获取

画折线的时机放在了画完XY轴虚线之后
在

-(void)drawVirtualLine:(UILabel*)lab andStartPt:(CGPoint)pStart andEndPt:(CGPoint)pEnd

下添加

    for (int i = 0; i < self.totalBrokenArray.count; i++) {
        BrokenLine* bkLin = self.totalBrokenArray[i];
        [self drawBrokenLine:self.frame andMaxX:_MaxX andMaxY:_MaxY andBkLin:bkLin andptArr:[bkLin drawBrokenLine:self.frame andMaxX:_MaxX andMaxY:_MaxY]];
    }

-(void)drawBrokenLine:(CGRect)lineFrame andMaxX:(CGFloat)maxX andMaxY:(CGFloat)maxY
             andBkLin:(BrokenLine*)bkLin andptArr:(NSMutableArray*)ptArr
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    //创建贝塞尔曲线对象
    UIBezierPath *currenPath = [UIBezierPath bezierPath];
    currenPath.lineCapStyle = kCGLineCapRound;//拐弯处为弧线
    currenPath.lineJoinStyle = kCGLineCapRound;
    currenPath.lineWidth = 0.3f;
    UIColor *color = bkLin.lineColor;
    [color set];
    CGFloat lengths[] = {10,0};
    CGContextSetLineDash(context, 0, lengths,2);
    
    for (int i = 0; i<bkLin.brokenArray.count; i++) {
        NSValue* valueStart = bkLin.brokenArray[i];
        CGPoint pointStart = [valueStart CGPointValue];
        if (i == 0) {
            [currenPath moveToPoint:CGPointMake(pointStart.x,pointStart.y)];
        }
        else
        {
            //把点加入到路径里面
            [currenPath addLineToPoint:CGPointMake(pointStart.x,pointStart.y)];
        }
    }
    //画线
    [currenPath stroke];
}

对了，忘记说那个每条折线所代表的意思放置位置。
用xib画成这样

屏幕快照 2017-04-06 17.11.41.png 

LineNameView类的实现如下....并没多少实现其实

@interface LineNameView : UIView
@property (nonatomic, strong) IBOutlet UIView* colorView;
@property (nonatomic, strong) IBOutlet UILabel* nameLab;

+ (instancetype)viewFromNIB;
@end

@implementation LineNameView
// Convenience Method
+ (instancetype)viewFromNIB {
    NSArray *views = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:nil options:nil];
    return views[0];
}
- (void)awakeFromNib {
    [super awakeFromNib];
}
@end

完成上述之后可以对其进行初始化，根据NSEUM计算出放置的位置

-(void)drawLineName
{
    for (int i = 0; i < self.totalBrokenArray.count; i++) {
        BrokenLine* bkLin = self.totalBrokenArray[i];
        LineNameView* nameView = [LineNameView viewFromNIB];
        nameView.colorView.backgroundColor = bkLin.lineColor;
        nameView.nameLab.text = bkLin.lineName;
        [self addSubview:nameView];
        
        switch (self.namePosition) {
            case LineNamePositionUpleft:
                nameView.frame = CGRectMake(defaultX+NameWidth*i, 0, NameWidth, defalutY);
                break;
            case LineNamePositionUpRight:
                nameView.frame = CGRectMake(defaultX+NameWidth*i, 0, NameWidth, defalutY);
                break;
            case LineNamePositionCenter:
                nameView.frame = CGRectMake(defaultX+NameWidth*i, 0, NameWidth, defalutY);
                break;
            default:
                break;
        }
    }
}

over
https://github.com/AlexMJ666/LineChart