Jak utworzyć skumulowany wykres słupkowy za pomocą uibezierpath w ios w różnych kolorach

Question

Pomóż mi utworzyć skumulowany wykres słupkowy za pomocą tylko jednej ścieżki Beziera. Tworzę pasek za pomocą poniżej kod

//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

Na podstawie sektorów trzeba, że ​​należy utworzyć wiele UIBezierPaths i CAShapeLayer. Więc skoro Twój skumulowany wykres słupkowy potrzebuje 3 sektory, trzeba 3 UIBeziersPaths i CAShapeLayer

Oto co trzeba zrobić:

• Draw jeden sektor używając jednego UIBezierPath i jeden CAShapeLayer. Po narysowaniu każdego punktu końcowego magazynu prętów w tablicy, która będzie potrzebna dla drugiej ścieżki UIBeziers, tj. Dla drugiego sektora.
• Narysuj drugi sektor UIBeziersPath za pomocą tablicy Punkt końcowy z pierwszego sektora i zrób to samo dla trzeciego sektora.

Poniżej znajduje się kod, który można spróbować:

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