展示效果:

效果图 效果图 效果图

请问:实现的步骤是什么?

第一步，绘制一个柱状图.主要是由无数个矩形框组合而成.具体实现步骤如下:.

l1>获取上下文

l2>设置柱状图的数据

l3>计算每根柱子的宽度

l4>循环data中的数据,绘制对应的柱形

l4.1>计算每根柱子的x值

l4.2>计算每根柱子的高度

l4.3>计算每根柱子的y值

l4.4>创建柱状型的柱子

l4.5>添加路径

l4.6>设置每根柱子的颜色

l4.7>渲染

//第一步代码实现

//绘制柱状图

- (void)drawRect:(CGRect)rect

{

// 1.获取图像上下文

CGContextRefctx =UIGraphicsGetCurrentContext();

// 2.设置柱状图的数据

NSArray*data =@[@300,@150.65,@55.3,@507.7,@95.8,@700,@650.65];

// 3.计算每根柱子的宽度

CGFloatbarW = rect.size.width/ (data.count*2-1);

// 4.循环data中的数据,绘制对应的柱形

for(inti =0; i < data.count; i++) {

// 4.1计算每根柱子的x值

CGFloatbarX = i * (barW *2);

// 4.2计算每根柱子的高度

CGFloatbarH = ([data[i]floatValue] /1000.0) * rect.size.height;

// 4.3计算每根柱子的y值

CGFloatbarY = rect.size.height- barH;

// 4.4创建柱状型的柱子

UIBezierPath*path = [UIBezierPathbezierPathWithRect:CGRectMake(barX, barY, barW,barH)];

// 4.5添加路径

CGContextAddPath(ctx, path.CGPath);

// 4.6设置每根柱子的颜色

[[UIColorcolorWithRed:arc4random_uniform(256) /255.0green:arc4random_uniform(256) /255.0blue:arc4random_uniform(256) /255.0alpha:0.8]set];

// 4.7渲染

CGContextDrawPath(ctx,kCGPathFill);

}

}

- (void)touchesBegan:(NSSet *)touches

withEvent:(UIEvent*)event

{

[selfsetNeedsDisplay];

}