Source of demand

In the project, we need to analyze the proportion of temperature in a nursing process. After some discussion with the product manager, we decided to change the expression mode from curve chart to circular proportion chart. Compared to a graph, a circular proportion diagram is a much clearer way to show what you want to say (although it is also cheaper to implement). Without further ado, let’s see how to implement a circular proportion diagram.

The design

Implementation approach

As shown in the figure above, to achieve such a closed circle proportion diagram, it needs to be completed in several steps. First, determine the starting position of the circle, determine which circle needs to be drawn first, then convert the proportion into Angle according to the proportion of each circle, and then use the method of drawing circles to draw the corresponding circle. The specific code is as follows:

The implementation code

Draw the first part of the circle, ratio 1, total ratio 7

CAShapeLayer *layer = [CAShapeLayer new]; layer.lineWidth = 20; // Ring color layer.strokecolor = HEXCOLOR(0xC0FBFF).cgcolor; // Background fillColor layer.fillcolor = [UIColor clearColor].cgcolor; // Set radius to 100 CGFloat radius = 81/2-20/2; // clockWise BOOL clockWise = true; / / initializes a path / / full circle UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: CGPointMake ((70). (82)/2) RADIUS: RADIUS startAngle:(-0.5F * M_PI) endAngle:(-0.5F * M_PI) + 0.14 * M_PI * 2 disclockwise:]; layer.path = [path CGPath]; [self.layer addSublayer:layer];Copy the code

Draw the second part of the ring, and keep the center of the first ring consistent, the starting point is the end of the first ring, the ratio is 1.6, the total ratio is 7

CAShapeLayer *layer1 = [CAShapeLayer new]; layer1.lineWidth = 20; // Layer1. strokeColor = HEXCOLOR(0xFFE86A).cgcolor; // Background fillColor layer1.fillcolor = [UIColor clearColor].cgcolor; / / initialize a path path1 UIBezierPath * = [UIBezierPath bezierPathWithArcCenter: CGPointMake ((70). Radius: RADIUS startAngle:(-0.5F * M_PI) + 0.14 * M_PI * 2 endAngle:(-0.5F * M_PI) + 0.37 * M_PI * 2) clockwise:clockWise]; layer1.path = [path1 CGPath]; [self.layer addSublayer:layer1];Copy the code

Draw the third part of the circle, and the center of the first ring and the second ring, starting at the end of the second ring, ratio of 4, total ratio of 7

CAShapeLayer *layer2 = [CAShapeLayer new]; layer2.lineWidth = (20); // Layer2. strokeColor = HEXCOLOR(0xFFB94B).cgcolor; // Background fillColor layer2.fillColor = [UIColor clearColor].CGColor; / / initialize a path UIBezierPath * path2 = [UIBezierPath bezierPathWithArcCenter: CGPointMake ((70). (82)/2) RADIUS: RADIUS startAngle:((-0.5F * M_PI) + 0.37 * M_PI* 2) endAngle:M_PI*1.5... layer2.path = [path2 CGPath]; [self.layer addSublayer:layer2];Copy the code

At the end

At this point, the circular proportion diagram implementation is complete. In general, the implementation is relatively simple, if there is a piece of confusion. You can leave a message in the comments section, I will reply in time.