Erstellen eines gestapelten Balkendiagramms mit uibierpfad in ios mit verschiedenen Farben

Question

Bitte helfen Sie mir, ein gestapeltes Balkendiagramm mit nur einem Bezierpfad zu erstellen. Ich bar bin die Schaffung von unten Code

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

Basierend auf Sektoren Sie benötigen, müssen Sie erstellen, dass viele UIBezierPaths und CAShapeLayer. So, da Ihr gestapelten Balkendiagramm 3 Sektoren benötigt, müssen Sie 3 UIBeziersPaths und CAShapeLayer

Hier ist, was Sie tun müssen:

• einem Sektor Draw mit einem UIBezierPath und ein CAShapeLayer. Nach dem Zeichnen jedes Balkens speichern Endpunkte in einem Array, das Sie für den zweiten UIBeziersPath, d. H. Für den zweiten Sektor benötigen.
• Zeichnen Sie den zweiten Sektor UIBeziersPath mit Endpunktarray vom ersten Sektor und machen Sie das gleiche für den 3. Sektor.

Es folgt der Code, den Sie ausprobieren können:

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