2016-07-20 6 views
5

कृपया केवल एक बेजियर पथ का उपयोग करके एक स्टैक्ड बार ग्राफ़ बनाने में मेरी सहायता करें। मैं कोडविभिन्न रंगों के साथ ios में uibezierpath का उपयोग करके स्टैक्ड बार ग्राफ़ बनाने के लिए कैसे करें

नीचे
//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)]; 
} 

I need some thing like this

+2

आप क्या कर रहे हो में अधिक विशिष्ट हो सकता है और आप के लिए क्या देख रहे हैं? – Basanth

+0

मैंने संदर्भ छवि जोड़ा है कृपया इसे जांचें। –

+0

आप एकाधिक रंगों के साथ एक बेजियर नहीं हो सकता है। एक बेजियर एक रंग के साथ जाएगा। –

उत्तर

3

क्षेत्रों की जरूरत के आधार पर का उपयोग करके बार बनाने रहा हूँ, आप यह है कि कई UIBezierPaths और CAShapeLayer बनाना होगा। तो के बाद से अपने स्टैक्ड बार ग्राफ 3 क्षेत्रों की जरूरत है, तो आप 3 UIBeziersPaths की जरूरत है और CAShapeLayer

यहाँ आप क्या करने की जरूरत है:

  • एक UIBezierPath और एक CAShapeLayer का उपयोग कर एक क्षेत्र ड्रा। प्रत्येक बार स्टोर को एक सरणी में अंतिम बिंदु बनाने के बाद दूसरे UIBeziersPath i.e के लिए दूसरे क्षेत्र के लिए आवश्यकता होगी।
  • पहले सेक्टर से एंड पॉइंट सरणी का उपयोग करके दूसरे सेक्टर UIBeziersPath ड्रा करें और तीसरे क्षेत्र के लिए ऐसा ही करें।

पीछा कर रहा है कोड है कि आप की कोशिश कर सकते हैं:

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

धन्यवाद यह वही है जो मैं ढूंढ रहा था। –

संबंधित मुद्दे