在 iOS 中绘制气泡图？

Question

希望你们一切顺利。

如何绘制类似于下图的图形？

更具体地说，我的图表将分别用橙色、绿色和红色显示低风险、正常风险和高风险。每个包含 x 轴信息的气泡。

我想制作与上图完全相同的任何帮助，我们将不胜感激，并且在发布一些第三方库和所有内容时请具体说明。

如何实现上图？

注意 - 在 X 轴（日期）和 Y 轴中 [（气泡中的值）] 在那里。

编辑 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)]];

接下来我们需要将笛卡尔坐标值转换为相对于父视图的 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]; 
}

希望对您有所帮助

在 iOS 中绘制气泡图？

Draw Bubble Graph in iOS?

bubble-chart

graph

objective-c

ios