在iOS中繪製泡泡圖？

Question

希望你們做得很好。

如何繪製類似於下圖的圖形？

更具體地講，我的圖表將分別有橙色，綠色和紅色低，正常和高風險。每個包含x軸信息的氣泡。

我想完全像上面的圖像任何幫助將不勝感激，也請具體發佈一些第三方庫和所有。

我怎樣才能達到上面的圖表？

注 - 在X軸（日期）和Y軸[在氣泡中的值]）在那裏。

EDIT y軸是固定的一些範圍內，x軸是從服務器把在NSMutableArray

預先感謝。

Answer 1

繪製圖形的第一步是創建X-Y軸佈局。您可以使用UIBezierPath和CAShapeLayer來繪製X軸和Y軸線。

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

重複繪製Y軸

其次，你需要創建X和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); 

現在你需要得到X的值（笛卡爾座標）和在一個陣列中的Y軸，在這裏我只是硬編碼點

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

接下來我們需要轉換車esian座標值與x和y相對於父視圖的值。

// 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]]; 

    } 

現在是時候添加美麗的氣泡

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

希望這有助於你