如何在不同颜色的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】:

根据您需要的扇区,您必须创建那么多 UIBezierPathsCAShapeLayer。因此,由于您的堆叠条形图需要 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创建堆叠条形图的主要内容,如果未能解决你的问题,请参考以下文章

用不同的颜色填充iOS Tabbar图标[重复]

在 RGB 代码中从 indesign 获取颜色代码并使用 iOS 应用程序看起来不同的颜色

如何在ios中更改特定单词的颜色

快速使用标签栏上的不同图标

在 iOS 中为不同的 UIViewController 设置不同的 UINavigatiobar 颜色?

ios 将 UIScrollView 滚动条颜色更改为不同颜色