首先看一下最終要實(shí)現(xiàn)的效果：
最終效果
一托嚣、初始化barChartView
繪制柱形圖需要用到BarChartView這個(gè)類判沟，下面是初始化代碼：
self.barChartView = [[BarChartView alloc] init];
self.barChartView.delegate = self;//設(shè)置代理
[self.view addSubview:self.barChartView];
[self.barChartView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(self.view.bounds.size.width-20, 300));
make.center.mas_equalTo(self.view);
}];
二讲冠、設(shè)置barChartView的外觀樣式
1.基本樣式
self.barChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.barChartView.noDataText = @"暫無數(shù)據(jù)";//沒有數(shù)據(jù)時(shí)的文字提示
self.barChartView.drawValueAboveBarEnabled = YES;//數(shù)值顯示在柱形的上面還是下面
self.barChartView.drawHighlightArrowEnabled = NO;//點(diǎn)擊柱形圖是否顯示箭頭
self.barChartView.drawBarShadowEnabled = NO;//是否繪制柱形的陰影背景
2.barChartView的交互設(shè)置
self.barChartView.scaleYEnabled = NO;//取消Y軸縮放
self.barChartView.doubleTapToZoomEnabled = NO;//取消雙擊縮放
self.barChartView.dragEnabled = YES;//啟用拖拽圖表
self.barChartView.dragDecelerationEnabled = YES;//拖拽后是否有慣性效果
self.barChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后慣性效果的摩擦系數(shù)(0~1)亡嫌，數(shù)值越小运沦，慣性越不明顯
3.設(shè)置barChartView的X軸樣式
首先需要先獲取到barChartView的X軸，然后進(jìn)行設(shè)置.
通過barChartView的xAxis屬性獲取到X軸涮母，代碼如下：
hartXAxis *xAxis = self.barChartView.xAxis;
設(shè)置X軸樣式的代碼如下：
ChartXAxis *xAxis = self.barChartView.xAxis;
xAxis.axisLineWidth = 1;//設(shè)置X軸線寬
xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置，默認(rèn)是顯示在上面的
xAxis.drawGridLinesEnabled = NO;//不繪制網(wǎng)格線
xAxis.spaceBetweenLabels = 4;//設(shè)置label間隔躁愿，若設(shè)置為1叛本，則如果能全部顯示，則每個(gè)柱形下面都會顯示label
xAxis.labelTextColor = [UIColor brownColor];//label文字顏色
4.設(shè)置barChartView的Y軸樣式
barChartView默認(rèn)樣式中會繪制左右兩側(cè)的Y軸彤钟，首先需要先隱藏右側(cè)的Y軸来候，代碼如下：
self.barChartView.rightAxis.enabled = NO;//不繪制右邊軸
接著開始設(shè)置左側(cè)Y軸的樣式.
首先設(shè)置Y軸軸線的樣式，代碼如下：
leftAxis.forceLabelsEnabled = NO;//不強(qiáng)制繪制制定數(shù)量的label
leftAxis.showOnlyMinMaxEnabled = NO;//是否只顯示最大值和最小值
leftAxis.axisMinValue = 0;//設(shè)置Y軸的最小值
leftAxis.startAtZeroEnabled = YES;//從0開始繪制
leftAxis.axisMaxValue = 105;//設(shè)置Y軸的最大值
leftAxis.inverted = NO;//是否將Y軸進(jìn)行上下翻轉(zhuǎn)
leftAxis.axisLineWidth = 0.5;//Y軸線寬
leftAxis.axisLineColor = [UIColor blackColor];//Y軸顏色
通過labelCount屬性設(shè)置Y軸要均分的數(shù)量.
在這里要說明一下逸雹，設(shè)置的labelCount的值不一定就是Y軸要均分的數(shù)量营搅，這還要取決于forceLabelsEnabled屬性，如果forceLabelsEnabled等于YES, 則強(qiáng)制繪制指定數(shù)量的label, 但是可能不是均分的.代碼如下：
ChartYAxis *leftAxis = self.barChartView.leftAxis;//獲取左邊Y軸
leftAxis.labelCount = 5;
leftAxis.forceLabelsEnabled = NO;
設(shè)置Y軸上標(biāo)簽的樣式梆砸，代碼如下：
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
leftAxis.labelTextColor = [UIColor brownColor];//文字顏色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字體
設(shè)置Y軸上標(biāo)簽顯示數(shù)字的格式转质，代碼如下：
leftAxis.valueFormatter = [[NSNumberFormatter alloc] init];//自定義格式
leftAxis.valueFormatter.positiveSuffix = @" $";//數(shù)字后綴單位
設(shè)置Y軸上網(wǎng)格線的樣式，代碼如下：
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色
leftAxis.gridAntialiasEnabled = YES;//開啟抗鋸齒
在Y軸上添加限制線帖世，代碼如下：
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制線"];
limitLine.lineWidth = 2;
limitLine.lineColor = [UIColor greenColor];
limitLine.lineDashLengths = @[@5.0f, @5.0f];//虛線樣式
limitLine.labelPosition = ChartLimitLabelPositionRightTop;//位置
[leftAxis addLimitLine:limitLine];//添加到Y(jié)軸上
leftAxis.drawLimitLinesBehindDataEnabled = YES;//設(shè)置限制線繪制在柱形圖的后面
5.設(shè)置barChartView的其它樣式
通過legend獲取到圖例對象休蟹，然后把它隱藏掉，代碼如下：
self.barChartView.legend.enabled = NO;//不顯示圖例說明
隱藏描述文字日矫，代碼如下：
self.barChartView.descriptionText = @"";//不顯示赂弓，就設(shè)為空字符串即可
三、為barChartView的提供數(shù)據(jù)
為barChartView提供數(shù)據(jù)是通過其data屬性提供的哪轿，首先需要?jiǎng)?chuàng)建BarChartData數(shù)據(jù)對象盈魁，代碼如下：
//為柱形圖設(shè)置數(shù)據(jù)
- (BarChartData *)setData{
int xVals_count = 12;//X軸上要顯示多少條數(shù)據(jù)
double maxYVal = 100;//Y軸的最大值
//X軸上面需要顯示的數(shù)據(jù)
NSMutableArray *xVals = [[NSMutableArray alloc] init];
for (int i = 0; i < xVals_count; i++) {
[xVals addObject:[NSString stringWithFormat:@"%d月", i+1]];
}
//對應(yīng)Y軸上面需要顯示的數(shù)據(jù)
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];
}
//創(chuàng)建BarChartDataSet對象，其中包含有Y軸數(shù)據(jù)信息窃诉，以及可以設(shè)置柱形樣式
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:nil];
set1.barSpace = 0.2;//柱形之間的間隙占整個(gè)柱形(柱形+間隙)的比例
set1.drawValuesEnabled = YES;//是否在柱形圖上面顯示數(shù)值
set1.highlightEnabled = NO;//點(diǎn)擊選中柱形圖是否有高亮效果杨耙，（雙擊空白處取消選中）
[set1 setColors:ChartColorTemplates.material];//設(shè)置柱形圖顏色
//將BarChartDataSet對象放入數(shù)組中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
//創(chuàng)建BarChartData對象, 此對象就是barChartView需要最終數(shù)據(jù)對象
BarChartData *data = [[BarChartData alloc] initWithXVals:xVals dataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];//文字字體
[data setValueTextColor:[UIColor orangeColor]];//文字顏色
NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
//自定義數(shù)據(jù)顯示格式
[formatter setNumberStyle:NSNumberFormatterDecimalStyle];
[formatter setPositiveFormat:@"#0.0"];
[data setValueFormatter:formatter];
return data;
}
為barChartView提供數(shù)據(jù)并設(shè)置動(dòng)畫效果赤套，代碼如下：
self.data = [self setData];
//為柱形圖提供數(shù)據(jù)
self.barChartView.data = self.data;
//設(shè)置動(dòng)畫效果，可以設(shè)置X軸和Y軸的動(dòng)畫效果
[self.barChartView animateWithYAxisDuration:1.0f];
四按脚、實(shí)現(xiàn)barChartView的代理方法
1.點(diǎn)擊選中柱形圖時(shí)的代理方法于毙，代碼如下：
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry dataSetIndex:(NSInteger)dataSetIndex highlight:(ChartHighlight * _Nonnull)highlight{
NSLog(@"---chartValueSelected---value: %g", entry.value);
}
2.沒有選中柱形圖時(shí)的代理方法，代碼如下：
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView{
NSLog(@"---chartValueNothingSelected---");
}
當(dāng)選中一個(gè)柱形圖后辅搬，在空白處雙擊唯沮，就可以取消選擇，此時(shí)會回調(diào)此方法.
</br>
3.捏合放大或縮小柱形圖時(shí)的代理方法堪遂，代碼如下：
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
NSLog(@"---chartScaled---scaleX:%g, scaleY:%g", scaleX, scaleY);
}
4.拖拽圖表時(shí)的代理方法
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY{
NSLog(@"---chartTranslated---dX:%g, dY:%g", dX, dY);
}
運(yùn)行結(jié)果如下：
運(yùn)行結(jié)果
Demo地址：BarChartDemo.
官網(wǎng)討論區(qū):https://github.com/danielgindi/Charts/issues?q=is%3Aopen
