ios - 如何在 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 )))];
    }