IOS uses the Charts framework to draw a column chart

First look at the effect to be achieved:

IOS uses the Charts framework to draw a column chart
final effect

First, the initialization of barChartView

To draw a column chart, you need to use the BarChartView class, the following is the initialization code:

Self.barChartView alloc] init] = [[BarChartView; self.barChartView.delegate = self; / / [self.view addSubview:self.barChartView] [self.barChartView mas_makeConstraints:^ proxy (MASConstraintMaker; *make) {make.size.mas_equalTo (CGSizeMake (self.view.bounds.size.width-20, 300)); make.center.mas_equalTo (self.view);}];

Two, set the appearance of barChartView style

1 basic styles
Self.barChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1]; self.barChartView.noDataText = @ "no data"; / / no data when text self.barChartView.drawValueAboveBarEnabled = YES; / / the number of values displayed in the column above or below self.barChartView.drawHighlightArrowEnabled = NO; / / click column chart display arrow self.barChartView.drawBarShadowEnabled = NO; / / draw cylindrical shadow background
Interactive settings for 2.barChartView
Self.barChartView.scaleYEnabled = NO; / / self.barChartView.doubleTapToZoomEnabled = NO cancel Y axis zoom zoom self.barChartView.dragEnabled double click cancel; / / = YES; / / self.barChartView.dragDecelerationEnabled = YES enabled drag chart; / / drag whether the inertial effect of self.barChartView.dragDecelerationFrictionCoef = 0.9; / / inertial effect of drag coefficient of friction (0~1), the smaller the value, the inertia is not obvious.
3 set barChartView X axis style

First of all, you need to get to the X barChartView axis, and then set the
barChartView through the xAxis attribute to the X axis, the code is as follows:

HartXAxis *xAxis = self.barChartView.xAxis;

The code to set the X axis style is as follows:

ChartXAxis *xAxis = self.barChartView.xAxis; xAxis.axisLineWidth = 1; / / set the X axis width xAxis.labelPosition = XAxisLabelPositionBottom; display position of the //X axis, the default is shown in the above xAxis.drawGridLinesEnabled = NO; / / not drawing grid lines xAxis.spaceBetweenLabels = 4; / / set the label interval, if set to 1, if all that is below each column it will display the label xAxis.labelTextColor = [UIColor brownColor]; //label text color
4 set barChartView Y axis style

BarChartView default style will be drawn on the left and right sides of the Y axis, first of all need to hide the right side of the Y axis, the code is as follows:

Self.barChartView.rightAxis.enabled = NO; / / does not draw on the right axis

Then set the style of the left Y axis.
first set the Y Axis axis style, the code is as follows:

LeftAxis.forceLabelsEnabled = NO; / / set number of label does not enforce rendering leftAxis.showOnlyMinMaxEnabled = NO; / / if only shows the maximum value and the minimum value of leftAxis.axisMinValue = 0; / / leftAxis.startAtZeroEnabled = YES minimum set of Y axis; / / from 0 to start drawing leftAxis.axisMaxValue = 105; / / the maximum value leftAxis.inverted = NO set the Y axis; / / will Y on the next flip axis leftAxis.axisLineWidth = 0.5; //Y = [UIColor blackColor] leftAxis.axisLineColor wide axis; //Y axis

By setting the labelCount attribute to the Y axis. The average number of
in here to explain, set the value of labelCount is not necessarily the number will divide the Y axis, it also depends on the forceLabelsEnabled property, if forceLabelsEnabled is equal to YES, then forced to draw a number of label, but could not score. The code is as follows:

ChartYAxis *leftAxis = self.barChartView.leftAxis; / / get on the left side of the Y axis leftAxis.labelCount = 5; leftAxis.forceLabelsEnabled = NO;

Set the style of the label on the Y axis:

LeftAxis.labelPosition = YAxisLabelPositionOutsideChart; //label = [UIColor position leftAxis.labelTextColor brownColor]; leftAxis.labelFont = [UIFont systemFontOfSize:10.0f] / / text color / text font;

Set the label on the Y axis to display the number of formats, the code is as follows:

LeftAxis.valueFormatter = [[NSNumberFormatter alloc] init]; / / leftAxis.valueFormatter.positiveSuffix = "[email protected] custom format"; / / digital suffix unit

Set the Y axis Internet line style, the code is as follows:

LeftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; / / set the dotted line style grid line leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; / / leftAxis.gridAntialiasEnabled grid line color = YES; / / anti aliasing

Add a limit line on the Y axis:

ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@ "limit line"]; limitLine.lineWidth = 2; limitLine.lineColor = [UIColor greenColor]; limitLine.lineDashLengths = @[@5.0f, @5.0f] = ChartLimitLabelPositionRightTop; / / limitLine.labelPosition / / line style; [leftAxis addLimitLine:limitLine]; / / add to the Y axis of leftAxis.drawLimitLinesBehindDataEnabled = YES; / / set the limit line drawn back in the column chart
5 set the other styles of barChartView

Through legend to get to the legend object, and then hide it, the code is as follows:

Self.barChartView.legend.enabled = NO; / / does not show the legend

Hidden description text, the code is as follows:

Self.barChartView.descriptionText = "@"; / / not display is set to the empty string.

Three, provide data for barChartView

To provide data for the barChartView is provided through its data property, the first need to create a BarChartData data object, the code is as follows:

/ / figure set data for column (BarChartData *) setData{int xVals_count = 12; //X axis to display the number of data double maxYVal = 100; *xVals = [[NSMutableArray display data NSMutableArray alloc] init] to //Y axis //X axis above the maximum value (I = 0; for int; I < xVals_count; i++) addObject:[NSString stringWithFormat:@%d {[xVals i+1]];} / / month ", which corresponds to the Y axis above data to the display NSMutableArray *yVals = [[NSMutableArray alloc] init]; for (int i = 0; I < xVals_count; i+ + double) {mult = maxYVal + 1; double = Val (double) (arc4random_uniform (mult)); BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithValue:val xIndex:i]; [yVals addObject:entry]; } / / create a BarChartDataSet object, which contains the Y axis data information, and you can set the column style BarChartDataSet *set1 [[BarChartDataSet alloc] initWithYVals:yVals = label:nil]; set1.barSpace = 0.2; / / the gap between the cylindrical column (column for the gap between the proportion of set1.drawValuesEnabled +) = YES; / / is in a column chart showing the numerical set1.highlightEnabled = NO; / / click on the selected column chart is highlighted, (click the blank uncheck [set1 setColors:ChartColorTemplates.material]); / / BarChartDataSet object into the array NSMutableArray *dataSets = [[NSMutableArray alloc] init] / / [dataSets color histogram; addObject:set1]; / / create a BarChartData object, the object is the final number of barChartView According to the *data alloc] initWithXVals:xVals object BarChartData = [[BarChartData dataSets:dataSets]; [data setValueFont:[UIFont fontWithName:@ HelveticaNeue-Light size:10.f]] [data setValueTextColor:[UIColor orangeColor]]; / / fonts; / / NSNumberFormatter *formatter [[NSNumberFormatter alloc] text color = init]; / / custom data display format [formatter setNumberStyle:NSNumberFormatterDecimalStyle]; [formatter setPositiveFormat:@ "#0.0"]; [data setValueFormatter:formatter]; return data;}

Provide data for barChartView and set the animation effect, the code is as follows:

Self.data [self = setData]; self.barChartView.data = self.data / data column; / / set the animation, you can set the X and Y axis animation [self.barChartView animateWithYAxisDuration:1.0f];

Four, the realization of barChartView proxy method

1 click on the selection of the column diagram of the proxy method, the code is as follows:

- (void) chartValueSelected: (ChartViewBase * _Nonnull) chartView entry: (ChartDataEntry * _Nonnull) entry dataSetIndex: (NSInteger) dataSetIndex highlight: (ChartHighlight * _Nonnull) highlight{NSLog (@ ---chartValueSelected---value:%g ", entry.value);}

2 does not have the option to select the column diagram of the proxy method, the code is as follows:

- (void) chartValueNothingSelected: (ChartViewBase * _Nonnull) chartView{NSLog (@ ---chartValueNothingSelected---);}

When you select a column in a column, double click on the blank, you can cancel the selection, this method will be called back.

3 kneading to enlarge or reduce the column diagram of the proxy method, the code is as follows:

- (void) chartScaled: (ChartViewBase * _Nonnull) chartView scaleX: (CGFloat) scaleY: (CGFloat) scaleY{NSLog (@ ---chartScaled---scaleX:%g, scaleY:%g), scaleX, scaleY);}

4 drag and drop graph proxy method

- (void) chartTranslated: (ChartViewBase * _Nonnull) chartView dX: (CGFloat) dY: (CGFloat) dY{NSLog (@ ---chartTranslated---dX:%g, dY:%g), dX, dY);}

The results are as follows:

IOS uses the Charts framework to draw a column chart
operating results

Demo address: BarChartDemo.

Official website: https://github.com/danielgindi/Charts/issues? Q=is%3Aopen