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

Solutions Collecting From Web of "Cómo crear un gráfico de barras astackdas usando uibezierpath en ios con diferentes colors"

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