iOS 使用UIBezierPath實現不等距曲線圖

iOS，關於畫線有很多很好的第三方，比如Charts、ECharts等等，但是我沒有找到畫不等距的，就自己簡單的實現了一下。首先看，效果

就是描點畫線加動畫，沒有太難的。
我自定義了一個LineChartView，和幾個模型，具體demo下面會給鏈接

給lineChartview暴露出了幾個屬性和方法,都有註釋

在controller裏面進行初始化配置

setChartView方法

self.chartView.y_TextFont = [UIFont systemFontOfSize:14];
    self.chartView.minValue = 0;
    self.chartView.maxValue = 100;
    NSArray *x_names = @[@"清醒",@"一般",@"黃金"];
    NSArray *xValue = @[@0,@50,@100];
    NSArray *x_colors = @[[UIColor redColor],[UIColor orangeColor],[UIColor yellowColor]];
    NSMutableArray *xAxis = [NSMutableArray new];
    for (int i = 0; i < x_names.count; i++) {
        XJYAxisModel * model = [XJYAxisModel new];
        model.clolor = x_colors[i];
        model.value = xValue[i];
        model.title = x_names[i];
        [xAxis addObject:model];
    }
    [self.chartView drawLineChartViewWithX_Value_Names:xAxis xCount:xCount];

我在controller裏面定義了個方法setXAxis，用於設置x軸線上的模型具體實現

- (NSArray *)setXAxis{
//    最大值和最小值 -> 每個軸線上的值 ， 比如最大值90，最小值是0，10條軸線(9個間隙)，則每條軸線的間距是10(0、10、20、30、40、50、60、70、80、90)
    float min = 0;
    float max = 90;
    float space = (max - min)/(xCount - 1);
    NSMutableArray *xAxisArr = [NSMutableArray new];
    for (int i = 0 ; i < xCount; i++) {
        XJXAxisModel *model  = [XJXAxisModel new];
        model.value = [NSNumber numberWithFloat: i * space];
        model.title = [NSString stringWithFormat:@"12:0%d",i];
        model.clolor = [UIColor whiteColor];
        model.textFont = [UIFont systemFontOfSize:10];
        [xAxisArr addObject:model];
    }
    
    return xAxisArr;
}

頁面上弄了一個按鈕，用於觸發賦值，

- (void)refreshData{
    static int a = 0;
    if (a == 0) {
        NSMutableArray *datas = [NSMutableArray new];
            NSArray *valueXs = @[@0,@5,@11,@19,@25,@31,@39,@43,@51,@59,@70,@85,@90];
            NSArray *valueYs = @[@0,@10,@55,@99,@88,@99,@77,@87,@10,@53,@80,@10,@0];
            for (int i = 0; i < valueXs.count; i++) {
                XJDataModel *model = [XJDataModel new];
                model.xValue = valueXs[i];
                model.yValue = valueYs[i];
                [datas addObject:model];
            }
        [self.chartView drawLineChartViewWithDataModels:datas withXAxisData:[self setXAxis]];
        a = 1;
    }else{
        NSMutableArray *datas = [NSMutableArray new];
            NSArray *valueXs = @[@0,@5,@11,@19,@25,@31,@39,@43,@51,@59,@70,@85,@90];
            NSArray *valueYs = @[@0,@90,@55,@9,@88,@19,@77,@87,@10,@93,@80,@10,@0];
            for (int i = 0; i < valueXs.count; i++) {
                XJDataModel *model = [XJDataModel new];
                model.xValue = valueXs[i];
                model.yValue = valueYs[i];
                [datas addObject:model];
            }
        [self.chartView drawLineChartViewWithDataModels:datas withXAxisData:[self setXAxis]];
        a = 0;
    }
}

在畫線的具體實現裏面，先賦值x軸文案，然後描點畫線並設置動畫效果

- (void)drawLineChartViewWithDataModels:(NSArray<XJDataModel *> *)datas withXAxisData:(NSArray< XJXAxisModel * >*)xAxis{
    [self reset];
//    1. 設置x軸文案
    [self setXAxisData:xAxis];
    if (datas.count == 0) {
        return;
    }
//    [shapeLayer removeFromSuperlayer];
    //2.獲取目標值點座標
    NSMutableArray *allPoints = [NSMutableArray array];
    for (int i = 0; i < datas.count; i++) {
        XJDataModel *model = [datas objectAtIndex:i];
        float Y = y_start - scaleY * model.yValue.floatValue;
        float X = x_start + scaleX * model.xValue.floatValue;
        NSLog(@"X,Y = (%.2f,%.2f)",X,Y);
        CGPoint point = CGPointMake(X, Y);
        [allPoints addObject:[NSValue valueWithCGPoint:point]];
    }
    
//    畫線
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:[allPoints[0] CGPointValue]];
    CGPoint PrePonit;
    for (int i =0; i<allPoints.count; i++) {
        if (i==0) {
            PrePonit = [allPoints[0] CGPointValue];
        }else{
            CGPoint NowPoint = [allPoints[i] CGPointValue];
            [path addCurveToPoint:NowPoint controlPoint1:CGPointMake((PrePonit.x+NowPoint.x)/2, PrePonit.y) controlPoint2:CGPointMake((PrePonit.x+NowPoint.x)/2, NowPoint.y)]; //三次曲線
            PrePonit = NowPoint;
        }
    }
    shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.lineWidth = 2.0;
    shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.borderWidth = 3.0;
    [self.subviews[0].layer addSublayer:shapeLayer];
//    加動畫
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 1.0;
    animation.fromValue = @0.0f;
    animation.toValue = @1.0f;
    [shapeLayer addAnimation:animation forKey:@"strokeEnd"];
    for (int i = 0; i < datas.count; i++) {
        CGPoint point =[allPoints[i] CGPointValue];
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(point.x-2.5, point.y-2.5, 5, 5) cornerRadius:5];
        CAShapeLayer *layer = [CAShapeLayer layer];
        layer.strokeColor = [UIColor whiteColor].CGColor;
        layer.fillColor = [UIColor whiteColor].CGColor;
        layer.path = path.CGPath;
        [self.subviews[0].layer addSublayer:layer];
        [pointShapeLayers addObject:layer];
    }
}

簡單介紹到這裏，demo