使用Coregraphics一次绘制多个Gauge图表

Question

我正在使用 CORE GRAPHICS 处理图表。我已成功完成绘制折线图，​​条形图和单一图表。

现在我的要求是

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

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

我使用这些link

绘制了这些图表

稍微更改了代码和绘图图表

我用来绘制表格的代码是

首先我从我的Viewcontroller中调用guagegraph（UIView的子类）

percentageArray包含每个guage的百分比

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彩色方法。

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

感谢任何帮助。

Answer 1

我相信你的问题就在这里 - ＆gt;

 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);

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

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

然后，因为只有一个视图，请尝试这样的事情。

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;
}

如果这对你没有任何帮助，你可以将你正在使用的文件上传到Dropbox，我可以试一试。