如何在不同颜色的ios中使用uibezierpath创建堆叠条形图
Posted
技术标签:
【中文标题】如何在不同颜色的ios中使用uibezierpath创建堆叠条形图【英文标题】:How to create stacked bar graph using uibezierpath in ios with different colors 【发布时间】:2016-07-20 09:21:46 【问题描述】:请帮我创建一个仅使用一个贝塞尔路径的堆叠条形图。我正在使用以下代码创建栏
//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)];
【问题讨论】:
您能否更具体地了解您在做什么以及您在寻找什么? 我已添加参考图片,请查看。 一个贝塞尔曲线不能有多种颜色。一种贝塞尔曲线会搭配一种颜色。 这个做得很完美github.com/sbossak/SBStackedBarChart 谢谢,我会检查的。 【参考方案1】:根据您需要的扇区,您必须创建那么多 UIBezierPaths 和 CAShapeLayer。因此,由于您的堆叠条形图需要 3 个扇区,因此您需要 3 个 UIBeziersPaths 和 CAShapeLayer
这是你需要做的:
使用一个 UIBezierPath 和一个 CAShapeLayer 绘制一个扇区。在将每个条形存储端点绘制在一个数组中之后,您将 需要第二个 UIBeziersPath,即第二个扇区。 使用第一个扇区的端点数组绘制第二个扇区 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 )))];
【讨论】:
谢谢,这正是我想要的。以上是关于如何在不同颜色的ios中使用uibezierpath创建堆叠条形图的主要内容,如果未能解决你的问题,请参考以下文章
在 RGB 代码中从 indesign 获取颜色代码并使用 iOS 应用程序看起来不同的颜色