我只使用 CORE GRAPHICS 处理图表。我已经成功地完成了折线图、条形图和单线图的绘制。

现在我的要求是

但是当我在上下文中绘图时，我只得到一个这样的图表

我已经将图表的百分比放在一个数组中并使用 for 循环，我一直在一个数组中绘制所有百分比，但我得到的最终结果只是一个仪表图是数组中的最后一个对象。

我使用这些 link 绘制了这些图表

像这样稍微改变了代码和绘制图表

我用来绘制仪表图的代码是

首先我从我的 Viewcontroller 调用 guagegraph(UIView 的子类)

percentageArray 包含每个量度的百分比

percentageArray = [[NSArray alloc] initWithObjects:@"80", @"76", @"92", @"49", nil];
for (int i = 0; i < percentageArray.count; i++)
    {
        [guageGraph setPercent:[percentageArray[i] intValue] withIndex:i];
    }

然后在 guagegraph 中使用下面的方法

- (void)setPercent:(int)percent withIndex:(int)i
{
CGFloat floatPercent = percent / 100.0;
floatPercent = MIN(1, MAX(0, floatPercent));
percentLayer.percent = floatPercent;
percentLayer.i = i;
[self setNeedsLayout];
[percentLayer setNeedsDisplay];
}

然后调用 percentLayer 类(CALayer 的子类)并绘制上下文

-(void)drawInContext:(CGContextRef)ctx
{
[self DrawRight:ctx];
[self DrawLeft:ctx];

}
-(void)DrawRight:(CGContextRef)ctx
{
CGPoint center = CGPointMake(self.frame.size.width / 2, 160);

CGFloat delta = -toRadians(270 * percent);


CGContextSetFillColorWithColor(ctx, [UIColor orangeColor].CGColor);

CGContextSetLineWidth(ctx, 1);

CGContextSetLineCap(ctx, kCGLineCapRound);

CGContextSetAllowsAntialiasing(ctx, YES);

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRelativeArc(path, NULL, center.x, center.y, 135 - 5 - (15 * i), (3 * M_PI / 4), -delta);
CGPathAddRelativeArc(path, NULL, center.x, center.y, 150 - 5 - (15 * i), (3 * M_PI / 4) - delta, delta);
CGPathAddLineToPoint(path, NULL, center.x, center.y);

CGContextAddPath(ctx, path);
CGContextFillPath(ctx);
}

-(void)DrawLeft:(CGContextRef)ctx
{
CGPoint center = CGPointMake(self.frame.size.width / 2, 160);
CGFloat delta = toRadians(270 * (1 - percent));


CGContextSetFillColorWithColor(ctx, [UIColor groupTableViewBackgroundColor].CGColor);

CGContextSetLineWidth(ctx, 1);

CGContextSetLineCap(ctx, kCGLineCapRound);

CGContextSetAllowsAntialiasing(ctx, YES);

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRelativeArc(path, NULL, center.x, center.y, 135 - 5 - (15 * i), (M_PI / 4), -delta);
CGPathAddRelativeArc(path, NULL, center.x, center.y, 150 - 5 - (15 * i), (M_PI / 4) - delta, delta);
CGPathAddLineToPoint(path, NULL, center.x, center.y);

CGContextAddPath(ctx, path);
CGContextFillPath(ctx);
}

drawRight 方法是绘制橙色的，draw left 方法是绘制grouptableviewbackground 颜色的。

当循环开始时，绘制第一个百分比图表，当第二个循环开始时，第一个绘制的图表被当前循环百分比覆盖并绘制第二个图表，这样只显示最后一个图表

感谢任何帮助。

最佳答案

我认为您的问题出在这里 ->

 percentageArray = [[NSArray alloc] initWithObjects:@"80", @"76", @"92", @"49", nil];
 for (int i = 0; i < percentageArray.count; i++)
{
    [guageGraph setPercent:[percentageArray[i] intValue] withIndex:i];
}

我觉得您应该改为将它们添加到数组中。并在绘制完所有对象后显示它们。

编辑

首先 让您的 precentLayer 类显示不同的色标。所以将这段代码添加到 -(void)drawRight

CGFloat hue = ( arc4random() % 256 / 256.0 );  //  0.0 to 1.0
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from white
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from black
UIColor *randomColor = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];

//update this line
CGContextSetFillColorWithColor(ctx, randomColor.CGColor);

如果不是这样的话，看看它们是否只是相互重叠......

============================================= =============================

THEN 因为只有一个 View ，尝试这样的事情。

percentageArray = [[NSArray alloc] initWithObjects:@"80", @"76", @"92", @"49", nil];

for (int i = 0; i < percentageArray.count; i++) {

    UIView *percentGauge =[self setPercent:[percentageArray[i] intValue] withIndex:i];

    //make background clear so we can see the guage behind it
    percentGauge.backgroundColor = [UIColor clearColor];
}

并使 -(void)setPercent: withIndex: 返回一个 UIView 所以....

- (UIView *)setPercent:(int)percent withIndex:(int)i {
    CGFloat floatPercent = percent / 100.0;
    floatPercent = MIN(1, MAX(0, floatPercent));
    percentLayer.percent = floatPercent;
    percentLayer.i = i;
    [self setNeedsLayout];
    [percentLayer setNeedsDisplay];


    return self;
}

如果这没有任何帮助，您可以将您正在使用的文件上传到保管箱，我可以试一试。

关于ios - 使用 Coregraphics 一次绘制多个 Guage 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26629360/