Cómo crear un gráfico de barras astackdas usando uibezierpath en ios con diferentes colors

Por favor, ayúdame a crear un gráfico de barras astackdas utilizando solo una ruta más cercana. Estoy creando una barra usando el siguiente código

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

Necesito algo como esto

Según los sectores que necesite, debe crear tantos UIBezierPaths y CAShapeLayer . Entonces, dado que su gráfico de barras astackdas necesita 3 sectores, necesita 3 UIBeziersPaths y CAShapeLayer

Aquí está lo que tú necesitas hacer:

  • Dibuja un sector usando un UIBezierPath y un CAShapeLayer . Después de dibujar cada punto final de la tienda de barras en una matriz que necesitará para el segundo UIBeziersPath, es decir, para el segundo sector.
  • Dibuja el segundo sector UIBeziersPath utilizando End point array del primer sector y haz lo mismo para el tercer sector.

El siguiente es el código que puedes probar:

  UIBezierPath *path1 = [[UIBezierPath alloc]init]; [[UIColor grayColor] setStroke]; UIBezierPath *path2 = [[UIBezierPath alloc]init]; [[UIColor networkingColor] 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 networkingColor]; 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 )))]; }