Dessiner un graphique à bulles dans iOS?

Question

J'espère que vous allez bien.

Comment puis-je dessiner un graphique similaire à l'image ci-dessous?

Pour être plus précis, mon graphique aura risque faible, normal et élevé à l'orange, les couleurs vert et rouge, respectivement. Chaque bulle contient des informations dans l'axe des x.

Je veux faire exactement comme ci-dessus l'image n'importe quelle aide serait appréciée et aussi s'il vous plaît soyez spécifique en publiant quelques bibliothèques de tiers et tout.

Comment puis-je obtenir le graphique ci-dessus?

Remarque- Dans l'axe X (dates) et l'axe Y [(valeurs) dans les bulles] sont présents.

EDIT axe y est fixé avec une certaine plage par l'axe x est de serveur a pris en NSMutableArray

Merci à l'avance.

Answer 1

La première étape du dessin consiste à créer une disposition d'axe X-Y. Vous pouvez dessiner la ligne de l'axe X et Y en utilisant UIBezierPath et CAShapeLayer.

UIBezierPath *graphPath = [[UIBezierPath alloc]init]; 
    [graphPath setLineWidth:GRAPH_LAYOUT_LINE_WIDTH]; 
    [[UIColor blackColor] setStroke]; 
    [graphPath moveToPoint:CGPointMake(ORIGN_X, ORIGN_Y)]; 
    [graphPath addLineToPoint:CGPointMake((ORIGN_X + TOTAL_X_DIST),ORIGN_Y)]; 
    [graphPath stroke]; // drawing path 

    //Creating graph layout 
    CAShapeLayer *graphLayout = [CAShapeLayer layer]; 
    graphLayout.fillColor = [[UIColor clearColor] CGColor]; 
    graphLayout.strokeColor = [GRAPH_LAYOUT_COLOR CGColor]; 
    graphLayout.lineWidth = GRAPH_LAYOUT_LINE_THICKNESS; 
    graphLayout.path = [graphPath CGPath]; 
    [self.layer addSublayer:graphLayout]; 

Répétez le code ci-dessus pour le dessin axe Y

Ensuite, vous devez créer X et à l'échelle de l'axe Y

float minX = 0; 
    float maxX = 10; 
    float minY = 0; 
    float maxY = 100; 

    float x1Unit = 1; 
    float y1Unit = 1; 

    self.spacingX = TOTAL_X_DIST/((maxX - minX)/x1Unit); 
    self.spacingY = TOTAL_Y_DIST/((maxY - minY+1)/y1Unit); 

Maintenant, vous devez obtenir les valeurs (coordonnées cartésiennes) de X et Axe Y dans un tableau, ici je suis juste en train de coder en dur les points

//Enter the co-ordinates 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(0, 50)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(1, 20)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(2, 35)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(3, 55)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(4, 80)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(5, 60)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(6, 85)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(7, 50)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(8, 30)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(9, 10)]]; 
    [self.pointsArray addObject:[NSValue valueWithCGPoint:CGPointMake(10, 05)]]; 

Ensuite nous devons convertir le chariot esian coordonne les valeurs aux valeurs de x et y par rapport à la vue parente.

// Creating (x,y) points based on superview coordinate system 
    for (NSValue *point in self.pointsArray) 
    { 
     CGPoint coordinate; 
     coordinate.x = (STARTING_X*x1Unit + ([point CGPointValue].x * self.spacingX) + self.spacingX/1.5)/x1Unit; 
     coordinate.y = (STARTING_Y*y1Unit - ([point CGPointValue].y * self.spacingY))/y1Unit; 

     [self.coordinateArray addObject:[NSValue valueWithCGPoint:coordinate]]; 

    } 

Maintenant, il est temps d'ajouter de belles bulles

for (int a = 0; a < [self.coordinateArray count]; a++) 
{ 
    CGPoint point = [[self.coordinateArray objectAtIndex:a] CGPointValue]; 

//Creating bubble for points on the graph. 
UIView *bubble = [[UIView alloc] initWithFrame:BUBBLE_FRAME]; 
bubble.Layer.cornerRadius = BUBBLE_FRAME_WIDTH/2; 

//Giving the color for the bubble based on the Y-Axis value 
if (point.y <= 50) 
{ 
    bubble.backgroundColor = RED_COLOR; 
} 
else if (point.y > 50 && point.y <= 80) 
{ 
    bubble.backgroundColor = YELLOW_COLOR; 
} 
else 
{ 
    bubble.backgroundColor = GREEN_COLOR; 
} 

[self addSubview:bubble]; 
} 

Hope this vous aide