如何使用不同颜色的ios中的uibezierpath创建堆积条形图

Question

请帮我创建一个仅使用一条贝塞尔曲线路径的堆积条形图。我正在使用下面的代码创建吧

//creating graph path
UIBezierPath *graph = [[UIBezierPath alloc]init];
[graph setLineWidth:_barWidth - _barWidth*0.1];

//Creating graph layout
self.graphLayout = [CAShapeLayer layer];
self.graphLayout.fillColor = [[UIColor clearColor] CGColor];
self.graphLayout.strokeColor = [[UIColor grayColor] CGColor];
self.graphLayout.lineWidth = _barWidth - _barWidth*0.1;;
self.graphLayout.path = [graph CGPath];
_graphLayout.lineCap = @"round";
_graphLayout.lineJoin = @"round";

[self.layer addSublayer:self.graphLayout];


for (DataSource *dataSource in self.graphCoordinateArray)
{
    [graph moveToPoint:CGPointMake((dataSource.postion*_barWidth) + _barWidth/2, STARTING_Y)];
    [graph addLineToPoint: CGPointMake((dataSource.postion*_barWidth) + _barWidth/2, dataSource.y)];
}

Answer 1

根据您需要的行业，您必须创建多个 UIBezierPaths 和 CAShapeLayer 。因此，由于堆叠条形图需要3个扇区，因此需要3个UIBeziersPaths和CAShapeLayer

以下是您需要做的事情：

• 使用一个 UIBezierPath 和一个 CAShapeLayer 绘制一个扇区。在绘制每个条形图存储端点后，您将使用该数组 需要第二个UIBeziersPath，即第二个扇区。
• 使用第一个扇区的终点阵列绘制第二个扇区UIBeziersPath，并为第三个扇区执行相同的操作。

以下是您可以尝试的代码：

     UIBezierPath *path1 = [[UIBezierPath alloc]init];
     [[UIColor grayColor] setStroke];

     UIBezierPath *path2 = [[UIBezierPath alloc]init];
     [[UIColor redColor] setStroke];

      UIBezierPath *path3 = [[UIBezierPath alloc]init];
     [[UIColor blueColor] setStroke];     

     //CAShapeLayer for graph allocation
     CAShapeLayer *path1GraphLayer = [CAShapeLayer layer];
     path1GraphLayer.frame = CGRectMake(self.frame.size.width*0, 0, self.frame.size.width, self.frame.size.height*0.9);
     path1GraphLayer.fillColor = [[UIColor clearColor] CGColor];
     UIColor *color = [UIColor greenColor];
     path1GraphLayer.strokeColor = color.CGColor;
     path1GraphLayer.lineWidth = 9;

     //CAShapeLayer for graph allocation
     CAShapeLayer *path2GraphLayer = [CAShapeLayer layer];
     path2GraphLayer.frame = CGRectMake(self.frame.size.width*0, 0, self.frame.size.width, self.frame.size.height*0.9);
     path2GraphLayer.fillColor = [[UIColor clearColor] CGColor];
     UIColor *color = [UIColor redColor];
     path2GraphLayer.strokeColor = color.CGColor;
     path2GraphLayer.lineWidth = 9;

     //CAShapeLayer for graph allocation
     CAShapeLayer *path3GraphLayer = [CAShapeLayer layer];
     path3GraphLayer.frame = CGRectMake(self.frame.size.width*0, 0, self.frame.size.width, self.frame.size.height*0.9);
     path3GraphLayer.fillColor = [[UIColor clearColor] CGColor];
     UIColor *color = [UIColor blueColor];
     path3GraphLayer.strokeColor = color.CGColor;
     path3GraphLayer.lineWidth = 9;



    //Data count means the number of stack bars you need
    for(int i=0 ;i<data.count;i++)
    {
    //path1Value, path2Value, path3Value are values of each sector, get these from a data source which you need to create

     float maxTotalValue = path1Value+path2Value+path3Value;
     float path1Percentage = (float)path1Value/ (float)maxTotalValue;
     float path2Percentage = (float)path2Value/ (float)maxTotalValue;
     float path3Percentage = (float)path3Value/ (float)maxTotalValue;

     //_spacing is the space between each bars you want to maintain

     [path1 moveToPoint:CGPointMake((self.frame.size.width*0.1)+_spacing, (self.frame.size.height*0.9))];

     [path1 addLineToPoint:CGPointMake(self.frame.size.width*0.1+_spacing,(self.frame.size.height*0.9)-((self.frame.size.height*0.9)*(1 - path1Percentage)))];

     [path2 moveToPoint:CGPointMake(self.frame.size.width*0.1+_spacing,(self.frame.size.height*0.9)-((self.frame.size.height*0.9)*(1 -path1Percentage)))];

     [path2 addLineToPoint:CGPointMake(self.frame.size.width*0.1+_spacing,(self.frame.size.height*0.9)-((self.frame.size.height*0.9)*(1 -path2StatePercentage - path1StatePercentage )))];

     [path3 moveToPoint:CGPointMake(self.frame.size.width*0.1+_spacing,(self.frame.size.height*0.9)-((self.frame.size.height*0.9)*(1 -path2StatePercentage - path1StatePercentage )))];

     [path3 addLineToPoint:CGPointMake(self.frame.size.width*0.1+_spacing,(self.frame.size.height*0.9)-((self.frame.size.height*0.9)*(1 -path2StatePercentage - path1StatePercentage-path3StatePercentage )))];
    }