IOS Pie Chart

First look at the effect:

First, create a pie chart object

To create a pie chart object using the class is PieChartView.h, the code is as follows:

Self.piechartview = [[Piechartview alloc] init];

Self.pieChartView.backgroundColor = BgColor;

[Self.view AddSubview:self.pieChartView];

[Self.piechartview mas_makeconstraints:^ (Masconstraintmaker *make) {

Make.size.mas_equalTo (Cgsizemake (300, 300));

Make.center.mas_equalTo (Self.view);

}];

Second, set the pie chart appearance style

1. Basic style

[Self.piechartview setextraoffsetswithleft:30 top:0 right:30 bottom:0];//pie chart gap from Edge

self.pieChartView.usePercentValuesEnabled = yes;//Whether to convert the display data to a percentage format based on the data provided

self.pieChartView.dragDecelerationEnabled = yes;//If there is a inertia effect after dragging the pie chart

self.pieChartView.drawSliceTextEnabled = yes;//whether to display chunk text

2. Set the hollow style in the middle of the pie chart

Hollow has two circle composition, one is hole, one is transparentcircle, transparentcircle inside is hole, so the middle of the pie chart of the Hollow is a concentric circle. The code is as follows:

self.pieChartView.drawHoleEnabled = yes;//Whether the pie chart is hollow

Self.pieChartView.holeRadiusPercent = 0.5;//Hollow radius ratio

Self.pieChartView.holeColor = [Uicolor clearcolor];//hollow Color

Self.pieChartView.transparentCircleRadiusPercent = 0.52;//Translucent Hollow radius ratio

Self.pieChartView.transparentCircleColor = [Uicolor colorwithred:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3] ;//Translucent Hollow Color

3. Set the text in the center of the pie chart

When a pie chart is a hollow style, you can add text to the center of the pie chart, and there are two ways to add text. One way is to use the Centertext property to add, which cannot set the font color, size, etc. Another method is to use the Centerattributedtext property to add rich text, so that the font can be further beautified. The code is as follows:

if (self.pieChartView.isDrawHoleEnabled = = YES) {

self.pieChartView.drawCenterTextEnabled = yes;//If intermediate text is displayed

Normal text

Self.pieChartView.centerText = @ "pie chart";//Middle text

Rich Text

nsmutableattributedstring *centertext = [[Nsmutableattributedstring alloc] initwithstring:@ "pie chart"];

[Centertext setattributes:@{nsfontattributename: [Uifont boldsystemfontofsize:16],

Nsforegroundcolorattributename: [Uicolor Orangecolor]}

Range:nsmakerange (0, centertext.length)];

Self.pieChartView.centerAttributedText = Centertext;

}

4. Set Pie chart Description

Self.pieChartView.descriptionText = @ "pie chart example";

Self.pieChartView.descriptionFont = [Uifont systemfontofsize:10];

Self.pieChartView.descriptionTextColor = [Uicolor Graycolor];

5. Set the pie chart legend style

Self.pieChartView.legend.maxSizePercent = 1;//the size of the legend in the pie chart, which affects the width height of the legend

Self.pieChartView.legend.formToTextSpace = 5;//text interval

Self.pieChartView.legend.font = [Uifont systemfontofsize:10];//font size

Self.pieChartView.legend.textColor = [Uicolor graycolor];//font Color

Self.pieChartView.legend.position = chartlegendpositionbelowchartcenter;//The position of the legend in the pie chart

Self.pieChartView.legend.form = chartlegendformcircle;//diagram style: square, line, circle

Self.pieChartView.legend.formSize = 12;//Diagram size

Third, provide data for pie chart

To provide data for a pie chart, you first need to create two arrays yvals and xvals, the yvals array holds the data for each chunk of the pie chart, and Xvals holds the name or description of each chunk.

You then need to create the DataSet object with the PieChartDataSet.h class and put the yvals in when you create it.

You then need to create the data object with the PieChartData.h class, and put the Xvals and DataSet objects in when you create them.

Finally, the data object is assigned directly to the Data property of the pie chart. Create the data object code as follows:

-(Piechartdata *) setdata{

Double mult = 100;

int count = 5;//The pie chart consists of a total of several pieces

Data for each chunk

Nsmutablearray *yvals = [[Nsmutablearray alloc] init];

for (int i = 0; i < count; i++) {

Double randomval = arc4random_uniform (mult + 1);

Barchartdataentry *entry = [[Barchartdataentry alloc] Initwithvalue:randomval xindex:i];

[Yvals Addobject:entry];

}

Name or description of each chunk

Nsmutablearray *xvals = [[Nsmutablearray alloc] init];

for (int i = 0; i < count; i++) {

NSString *title = [NSString stringwithformat:@ "part%d", i+1];

[Xvals Addobject:title];

}

DataSet

Piechartdataset *dataset = [[Piechartdataset alloc] initwithyvals:yvals label:@ ""];

dataset.drawvaluesenabled = yes;//Whether to draw the display data

Nsmutablearray *colors = [[Nsmutablearray alloc] init];

[Colors AddObjectsFromArray:ChartColorTemplates.vordiplom];

[Colors addObjectsFromArray:ChartColorTemplates.joyful];

[Colors addObjectsFromArray:ChartColorTemplates.colorful];

[Colors AddObjectsFromArray:ChartColorTemplates.liberty];

[Colors AddObjectsFromArray:ChartColorTemplates.pastel];

[Colors Addobject:[uicolor colorwithred:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];

dataset.colors = colors;//block Color

Dataset.slicespace = spacing between adjacent chunks of 0;//

Dataset.selectionshift = 8;//The enlarged radius when the block is selected

dataset.xvalueposition = piechartvaluepositioninsideslice;//name Location

dataset.yvalueposition = piechartvaluepositionoutsideslice;//Data location

The line style used to indicate between the data and the chunk

Dataset.valuelinepart1offsetpercentage = offset of the first paragraph in the 0.85;//polyline relative to the chunk, the larger the number, the farther the polyline is from the chunk

Dataset.valuelinepart1length = First segment length ratio in 0.5;//polyline

Dataset.valuelinepart2length = maximum ratio of second segment length in 0.4;//polyline

Dataset.valuelinewidth = thickness of 1;//polyline

Dataset.valuelinecolor = [Uicolor browncolor];//polyline Color

Data

Piechartdata *data = [[Piechartdata alloc] initwithxvals:xvals Dataset:dataset];

Nsnumberformatter *formatter = [[Nsnumberformatter alloc] init];

Formatter.numberstyle = Nsnumberformatterpercentstyle;

Formatter.maximumfractiondigits = 0;//number of decimal digits

Formatter.multiplier = @1.f;

[Data setvalueformatter:formatter];//setting display format

[Data Setvaluetextcolor:[uicolor Browncolor];

[Data Setvaluefont:[uifont systemfontofsize:10];

return data;

}

The results of the operation are as follows:

If you don't need a pie chart with a hollow style, you can assign the drawholeenabled of the pie to No and remove the text from the middle, with the following code:

self.pieChartView.drawHoleEnabled = NO;

The effect is as follows:

If space is required between each chunk, it can be set through the Slicespace property of the DataSet object, with the following code:

Dataset.slicespace = 3;

The effect is as follows:

Because of the many attributes, other effects can be tried on their own.

Demo Address: Piechartdemo

IOS Pie Chart