Рисовать диаграмму пузыря в iOS?

Question

надеюсь, что вы, ребята, преуспеваете.

Как я могу нарисовать график, похожий на изображение ниже?

Чтобы быть более конкретным, мой график будет иметь низкий, нормальный и высокий риск с оранжевыми, зелеными и красными цветами соответственно. Каждый содержит пузырь с информацией по оси x.

Я хочу сделать точно так же, как выше изображение любая помощь будет оценена, а также, пожалуйста, будьте конкретны, размещая некоторые сторонние библиотеки и все.

Как достичь вышеуказанного графика?

Примечание. В оси X (даты) и оси Y [(значения) в пузырьках] есть.

EDIT ось у фиксируется некоторый диапазон по оси Х от сервера взял в NSMutableArray

Заранее спасибо.

Answer 1

Первым шагом в графическом графике является создание макета оси X-Y. Вы можете нарисовать линию оси X и Y, используя UIBezierPath и 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]; 

Повторите приведенный выше код для рисования 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]; 
} 

Надеется, что это помогает вам