iOS会像Mint应用程序那样绘制简单的条形图_Ios_Objective C_Charts

iOS会像Mint应用程序那样绘制简单的条形图

ios objective-c charts

iOS会像Mint应用程序那样绘制简单的条形图,ios,objective-c,charts,Ios,Objective C,Charts,我想创建一个自定义单元格，就像Mint应用程序中的一样，它做的事情几乎相同。我如何使用赚得的和花掉的数据来绘制这两条线谢谢我走了这么远： -(void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:

我想创建一个自定义单元格，就像Mint应用程序中的一样，它做的事情几乎相同。我如何使用赚得的和花掉的数据来绘制这两条线

谢谢

我走了这么远：

-(void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:0/255.0f alpha:1.0f];
    UIColor * earningEndColor = [UIColor colorWithRed:15/255.0f green:188/255.0f blue:0/255.0f alpha:1.0f];

    CGRect earningRect = CGRectMake(5, 32, 60, 13);

    UIBezierPath *pathE = [UIBezierPath bezierPathWithRoundedRect:earningRect
                                                     cornerRadius:3.0];
    [pathE addClip];

    drawGlossAndGradient(context, earningRect, earningStartColor.CGColor, earningEndColor.CGColor);


    UIColor * spentStartColor = [UIColor colorWithRed:255/255.0f green:88/255.0f blue:67/255.0f alpha:1.0f];
    UIColor * spentEndColor = [UIColor colorWithRed:255/255.0f green:52/255.0f blue:49/255.0f alpha:1.0f];

    CGRect spentRect = CGRectMake(5, 52, 25, 13);    

    UIBezierPath *pathS = [UIBezierPath bezierPathWithRoundedRect:spentRect
                                                    cornerRadius:5.0];
    [pathS addClip];

    drawGlossAndGradient(context, spentRect, spentStartColor.CGColor, spentEndColor.CGColor);
}

但是，在addClip之后，图形将停止，因此仅显示一个条形图。如果我将addClip包裹在CGContextSaveGState和CGContextRestoreGState周围，则只有第二个条角是圆角

我还尝试将视图子类化并在视图上绘制，然后将其作为子视图添加到我的tableviewcell中，并使用cornerRadius，但该图形实际上位于视图的后面，因此它显示为圆角视图（及其背景），后面有矩形条。我认为这应该比现在容易。

这只不过是一个带有渐变和圆角的

ui视图。对你来说已经足够了
圆角：
#import <QuartzCore/QuartzCore.h>
...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = YES;

#导入
...
view.layer.cornerRadius=5；
view.layer.masksToBounds=是；

摘自
 这只不过是一个带有渐变和圆角的ui视图。对你来说已经足够了
圆角：
#import <QuartzCore/QuartzCore.h>
...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = YES;

#导入
...
view.layer.cornerRadius=5；
view.layer.masksToBounds=是；

摘自
 如果您想保存一些编码，请查看用于绘制和设置图形动画的Mac/iOS框架。
如果您想保存一些编码，请查看用于绘制和设置图形动画的Mac/iOS框架。
您的错误是由于[pathE addClip]
关于addClip
方法，苹果文档说：
重要提示：如果需要删除剪裁区域以执行
在后续绘图操作中，必须保存当前图形
调用此函数之前的状态（使用CGContextSaveGState函数）
方法。当不再需要剪裁区域时，可以
使用
CGContextRestoreGState函数
因此，您应该在addClip
之前保存图形状态，并在addClip
之后恢复图形状态
这可以帮助您：
-(void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:0/255.0f alpha:1.0f];
    UIColor * earningEndColor = [UIColor colorWithRed:15/255.0f green:188/255.0f blue:0/255.0f alpha:1.0f];

    CGRect earningRect = CGRectMake(5, 32, 60, 13);

    UIBezierPath *pathE = [UIBezierPath bezierPathWithRoundedRect:earningRect
                                                     cornerRadius:3.0];
    CGContextSaveGState(context);
    [pathE addClip];

    drawGlossAndGradient(context, earningRect, earningStartColor.CGColor, earningEndColor.CGColor);
    CGContextRestoreGState(context);

    UIColor * spentStartColor = [UIColor colorWithRed:255/255.0f green:88/255.0f blue:67/255.0f alpha:1.0f];
    UIColor * spentEndColor = [UIColor colorWithRed:255/255.0f green:52/255.0f blue:49/255.0f alpha:1.0f];

    CGRect spentRect = CGRectMake(5, 52, 25, 13);

    UIBezierPath *pathS = [UIBezierPath bezierPathWithRoundedRect:spentRect
                                                     cornerRadius:5.0];
    [pathS addClip];

    drawGlossAndGradient(context, spentRect, spentStartColor.CGColor, spentEndColor.CGColor);
}

附言：我想你可以把你的drawGlossAndGradient
贴到stackoverflow上，这样其他人可以很容易地帮上忙，也可能对其他搜索答案的人有所帮助
我伪造了drawGlossAndGradient
方法
void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor,
                          CGColorRef endColor) {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = {0.0, 1.0};

    NSArray *colors = [NSArray arrayWithObjects:(__bridge id) startColor, (__bridge id) endColor, nil];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
                                                        (__bridge CFArrayRef) colors, locations);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);

}

效果如下：
您的错误是由于[pathE addClip]
关于addClip
方法，苹果文档说：
重要提示：如果需要删除剪裁区域以执行
在后续绘图操作中，必须保存当前图形
调用此函数之前的状态（使用CGContextSaveGState函数）
方法。当不再需要剪裁区域时，可以
使用
CGContextRestoreGState函数
因此，您应该在addClip
之前保存图形状态，并在addClip
之后恢复图形状态
这可以帮助您：
-(void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:0/255.0f alpha:1.0f];
    UIColor * earningEndColor = [UIColor colorWithRed:15/255.0f green:188/255.0f blue:0/255.0f alpha:1.0f];

    CGRect earningRect = CGRectMake(5, 32, 60, 13);

    UIBezierPath *pathE = [UIBezierPath bezierPathWithRoundedRect:earningRect
                                                     cornerRadius:3.0];
    CGContextSaveGState(context);
    [pathE addClip];

    drawGlossAndGradient(context, earningRect, earningStartColor.CGColor, earningEndColor.CGColor);
    CGContextRestoreGState(context);

    UIColor * spentStartColor = [UIColor colorWithRed:255/255.0f green:88/255.0f blue:67/255.0f alpha:1.0f];
    UIColor * spentEndColor = [UIColor colorWithRed:255/255.0f green:52/255.0f blue:49/255.0f alpha:1.0f];

    CGRect spentRect = CGRectMake(5, 52, 25, 13);

    UIBezierPath *pathS = [UIBezierPath bezierPathWithRoundedRect:spentRect
                                                     cornerRadius:5.0];
    [pathS addClip];

    drawGlossAndGradient(context, spentRect, spentStartColor.CGColor, spentEndColor.CGColor);
}

附言：我想你可以把你的drawGlossAndGradient
贴到stackoverflow上，这样其他人可以很容易地帮上忙，也可能对其他搜索答案的人有所帮助
我伪造了drawGlossAndGradient
方法
void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor,
                          CGColorRef endColor) {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = {0.0, 1.0};

    NSArray *colors = [NSArray arrayWithObjects:(__bridge id) startColor, (__bridge id) endColor, nil];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
                                                        (__bridge CFArrayRef) colors, locations);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);

}

效果如下：
谢谢，我能画出两条横线。不过我不知道怎么画角曲线。谢谢，我能画出两条线。但不知道如何做角曲线。