仿余額寶收益率圖表繪制

雖然最新版的支付寶中余額寶模塊不再顯示收益率圖表,但是還是仿寫了一個,供學習交流。

現在有好多第三方繪圖的插件,諸如PNChart,有的稍微調試一下就可以用了。這里我想講一下繪制使用UIBezierPath繪制的思路。

  • 使用方法
    FJLineView* LineView=[[FJLineView alloc] initWithFrame:CGRectMake(0, 0,ARScreenW - 40, self.chartView.frame.size.height)];
    LineView.xValues=@[@20,@50,@80,@110,@210,@250,@270];                               //設置X值
    LineView.yValues=@[@2.445,@2.444,@2.440,@2.441,@2.439,@2.437,@2.437];              //設置Y值
    LineView.xKeDuValus=@[@"6-22",@"6-23",@"6-24",@"6-25",@"6-26",@"6-27",@"6-28"];    //設置X坐標軸
    LineView.yKeDuValus=@[@2.42,@2.43,@2.44,@2.45,@2.46,@2.47];                        //設置Y坐標軸
    LineView.yValueColor=ARColor(221, 221, 221);
    LineView.xValueColor=ARColor(221, 221, 221);
    [self.chartView addSubview:LineView];
    self.lineView = LineView;
  • 繪制思路
    1 繪制間距
    CGFloat x_space=(rect.size.width -20) / (self.xKeDuValus.count-1);
    CGFloat y_space=(rect.size.height - kBottomHeight -  kTopMargin - 20) / self.yKeDuValus.count;
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();

2 繪制背景間隔顏色

    for (int i = 0; i < self.xKeDuValus.count; i++) {
        [ARColor(255, 253, 251) setStroke];//設置背景顏色
        
        if (i%2 != 0) {//交叉背景
            
            UIBezierPath* bgPathH = [UIBezierPath bezierPath];
            CGContextSetLineWidth(ctx, x_space);//設置寬度
            CGPoint startA=CGPointMake(kStartX + x_space * i +0.5 * x_space, rect.size.height - kBottomHeight);
            CGPoint endA=CGPointMake(kStartX + x_space * i+0.5 * x_space ,kTopMargin);
            [bgPathH moveToPoint:startA];
            [bgPathH addLineToPoint:endA];
            CGContextAddPath(ctx, bgPathH.CGPath);
            CGContextStrokePath(ctx);
            
        }
    }

3 畫 x 軸

    UIBezierPath* path = [UIBezierPath bezierPath];
    CGPoint startA=CGPointMake(kStartX, rect.size.height - kBottomHeight);
    CGPoint endA=CGPointMake(rect.size.width - 5, rect.size.height - kBottomHeight);
    [path moveToPoint:startA];
    [path addLineToPoint:endA];
    CGContextAddPath(ctx, path.CGPath);
    [ARColor(245, 245, 245) set];
    CGContextSetLineWidth(ctx, 1);
    // 渲染
    CGContextStrokePath(ctx);

4 畫 y 軸

    UIBezierPath* yPath=[UIBezierPath bezierPath];
    CGPoint yStart=CGPointMake(kStartX, rect.size.height - kBottomHeight);
    CGPoint yEnd=CGPointMake(kStartX,  kTopMargin);
    [yPath moveToPoint:yStart];
    [yPath addLineToPoint:yEnd];
    CGContextAddPath(ctx, yPath.CGPath);
    CGContextStrokePath(ctx);
    UIImage *yImg=[UIImage imageNamed:@"up"];
    [yImg drawInRect:CGRectMake(kStartX - 4, kTopMargin, 8, 10)];

5 畫 y 軸坐標橫線

    for (int i = 0; i < self.yKeDuValus.count; i++) {
        [ARColor(245, 245, 245) setStroke];
        UIBezierPath* yPathH = [UIBezierPath bezierPath];
        CGContextSetLineWidth(ctx, 1);

        CGPoint startA=CGPointMake(kStartX +40, rect.size.height - kBottomHeight - y_space * (i+1));
        CGPoint endA=CGPointMake(rect.size.width - 5 , rect.size.height - kBottomHeight - y_space * (i+1));
        [yPathH moveToPoint:startA];
        [yPathH addLineToPoint:endA];
        CGContextAddPath(ctx, yPathH.CGPath);
        CGContextStrokePath(cox);
 
        // 畫數字
        NSString* yStr=[NSString stringWithFormat:@"%@",self.yKeDuValus[i]];
        CGSize size=[yStr sizeWithAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:9]}];
            [yStr drawInRect:CGRectMake(kStartX + 4, rect.size.height - 40 - y_space * (i + 1) , kBottomHeight, size.height+1) withAttributes:@{NSForegroundColorAttributeName : self.yValueColor}];
     
    }
    UIBezierPath* path1=[UIBezierPath bezierPath];
    endA=CGPointMake([self.xValues[0] intValue], [self.yValues[0] floatValue]);
    startA=CGPointMake(kStartX, rect.size.height - kBottomHeight -  y_space * ([self.yValues[0] floatValue] -([self.yKeDuValus[0] floatValue]-0.01))*100);
    [path1 moveToPoint:startA];

6 繪制底部的分割度線

    for (int i = 0; i < self.xKeDuValus.count; i++) {
        [ARColor(245, 245, 245) setStroke];
        CGContextSetLineWidth(ctx, 1);
        CGContextBeginPath(ctx);
        CGContextMoveToPoint(ctx,kStartX + x_space * i , rect.size.height - kBottomHeight);
        CGContextAddLineToPoint(ctx,kStartX + x_space * i,kTopMargin);
        CGContextDrawPath(ctx, kCGPathStroke);
        
        NSString *x_titleStr= [NSString stringWithFormat:@"%@",self.xKeDuValus[i] ];
        CGSize titleSize=[x_titleStr sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12.0]}];
        if (i == 0) {
            [x_titleStr drawInRect:CGRectMake(17+kStartX + x_space * i - titleSize.width*0.5, rect.size.height - 25, titleSize.width, titleSize.height) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:9.0],NSForegroundColorAttributeName:self.xValueColor}];
        }else{
            [x_titleStr drawInRect:CGRectMake(2+kStartX + x_space * i - titleSize.width*0.5, rect.size.height - 25, titleSize.width, titleSize.height) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:9.0],NSForegroundColorAttributeName:self.xValueColor}];
        }     
    }

7 計算移到 y 軸的位置

    for (int i = 0; i < self.xValues.count; i++) {
        CGFloat X =kStartX + x_space * (i) ;//[xValue[i] intValue]; //, [yValue[1] intValue])
        CGFloat Y =rect.size.height - kBottomHeight -  y_space * ([self.yValues[i] floatValue] -([self.yKeDuValus[0] floatValue]-0.01))*100;//設置value值的位置
        [path1 addLineToPoint:CGPointMake(X, Y)];
        
        if (i == self.xValues.count-1) {
            
            //收益率標簽背景
            UIImage *labelImg=[UIImage imageNamed:@"七日收益率背景圖"];
            [labelImg drawInRect:CGRectMake(X-41, Y-23-6, 41, 23)];
            
            NSString* lastLabelStr=[NSString stringWithFormat:@"%.3f",[self.yValues[i] floatValue]];
            [lastLabelStr drawInRect:CGRectMake(X-41 + 4, Y-23-6 + 2, 41, 23) withAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:12],NSForegroundColorAttributeName : ARColor(255, 255, 255)}];
        }
    }
   
    CGContextAddPath(ctx, path1.CGPath);
    CGContextSetLineWidth(ctx, 2);//設置折線線寬
    CGContextSetRGBStrokeColor(ctx, 255.0/255.0, 88.0/255.0, 1.0/255.0, 1.0);
    CGContextStrokePath(ctx);```
8 收益率圈圈
```objc
    for (int i = 0; i < self.xValues.count; i++) {
        CGFloat X =kStartX + x_space * (i) ;//[xValue[i] intValue]; //, [yValue[1] intValue])
        CGFloat Y =rect.size.height - kBottomHeight -  y_space * ([self.yValues[i] floatValue] -([self.yKeDuValus[0] floatValue]-0.01))*100;//設置value值的位置
    
        if (i == self.xValues.count-1) {

            UIImage *circleImg=[UIImage imageNamed:@"七日收益率小圓點"];
            [circleImg drawInRect:CGRectMake(X-4, Y-4, 8, 8)];
        
        }
    }

9 填充色

    UIBezierPath* path2=[UIBezierPath bezierPath];
    endA=CGPointMake(x_space * 0, [self.yValues[0] intValue]);
//    [path2 moveToPoint:startA];//填充色  ---注釋此行會去除填充色
    for (int i = 0; i < self.xValues.count; i++) {
        CGFloat X =kStartX + x_space * (i+1) ;
        CGFloat Y = rect.size.height - kBottomHeight -  y_space * [self.yValues[i] intValue] * 0.1;
        [path2 addLineToPoint:CGPointMake(X, Y)];
        if (i == self.xValues.count - 1) {
            [path2 addLineToPoint:CGPointMake(kStartX + x_space *  (i + 1), rect.size.height  -  kBottomHeight)];
        }
    }

    CGContextAddPath(ctx, path2.CGPath);
    CGContextSetRGBFillColor(ctx,215.0/255.0, 236.0/255.0, 177.0/255.0, 1.0);
    CGContextFillPath(cox);

10 繪制矩形框

    NSString* text=[NSString stringWithFormat:@"%.1f",[self.yValues.lastObject floatValue]];    CGSize textSize=[text sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11.0]}];

    CGRect texRrect=CGRectMake(kStartX + x_space * self.xValues.count, rect.size.height - kBottomHeight -  y_space * [self.yValues.lastObject intValue] * 0.1 - 20, textSize.width, textSize.height);
    CGRect juRect=CGRectMake(kStartX + x_space * self.xValues.count- 5, rect.size.height - kBottomHeight -  y_space * [self.yValues.lastObject intValue] * 0.1 - 20, textSize.width+10, textSize.height);
    UIBezierPath* path3=[UIBezierPath bezierPathWithRoundedRect:juRect cornerRadius:5];

    CGContextAddPath(ctx, path3.CGPath);
    CGContextSetRGBFillColor(ctx, 131.0/255.0, 190.0/255.0, 34.0/255.0, 1.0);
    CGContextFillPath(ctx);
  
    [text drawInRect:texRrect withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11.0],NSForegroundColorAttributeName:[UIColor whiteColor]}];

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容