異なる色のiosでuibezierpathを使用して積み上げ棒グラフを作成する方法

Question

ベジェ曲線を1つだけ使用して積み重ね棒グラフを作成してください。私はあなたがその多くUIBezierPathsとCAShapeLayerを作成する必要があり、あなたが必要とする分野に基づいてコードの下に

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

を使用してバーを作成しています。あなたの積み重ね棒グラフは、3つのセクタを必要とするのでだから、あなたはここ3 UIBeziersPathsとCAShapeLayer

を必要とするあなたが何をする必要があるかです：

• CAShapeLayer UIBezierPathを使用して一つのセクタを描画し、1 。各バーストアのエンドポイントを配列に描画した後、 は2番目のUIBeziersPath、つまり2番目のセクタに必要です。
• 第1セクタのエンドポイント配列を使用して第2セクタUIBeziersPathを描画し、第3セクタに対して同じ処理を行います。

後であるあなたが試すことができますコード：

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