前面几篇文章是《charts框架的集成》《charts饼状图》《charts折线图》,建议大家结合起来看,这样更详细。
传送门:
下方是柱状图效果图:
核心代码如下,大家可以按照自己的需求,修改下方配置:
// 初始化
_barChartView = [[BarChartView alloc] init];
_barChartView.frame = CGRectMake(5, 64, kSCREEN_WIDTH, kSCREEN_HEIGHT-200 );
[self.view addSubview:_barChartView];
-------------------------------柱状图的配置-----------------------------
// 设置XY轴动画
[_barChartView animateWithYAxisDuration:1.0f];
[_barChartView animateWithXAxisDuration:1.0f];
// 是否绘制阴影背景
_barChartView.drawBarShadowEnabled = NO;
// 数值显示是否在条柱上面
_barChartView.drawValueAboveBarEnabled = YES;
// 没有数据的时候的显示
_barChartView.noDataText = @"暂无此产品的价格趋势";
_barChartView.noDataFont = [UIFont systemFontOfSize:15];
_barChartView.noDataTextColor = [UIColor grayColor];
// 数值显示是否在条柱上面
_barChartView.drawValueAboveBarEnabled = YES;
// 是否画右边坐标轴
_barChartView.rightAxis.enabled = NO;
// 是否画图例(图例的具体配置可参照我的饼状图)
_barChartView.legend.enabled = NO;
// 是否可以拖拽设置
_barChartView.dragEnabled = YES;
// 双击是否缩放
_barChartView.doubleTapToZoomEnabled = NO;
// XY轴是否缩放
_barChartView.scaleXEnabled = NO;//X轴缩放
_barChartView.scaleYEnabled = NO;//Y轴缩放
// XY轴是否可以同时缩放
_barChartView.pinchZoomEnabled = NO;
// 是否开启描述label
_barChartView.chartDescription.enabled = NO;
----------------------配置折现图上面的浮层--------------
// 设置浮层
_barChartView.drawMarkers = YES;
ChartMarkerView * makerView = [[ChartMarkerView alloc]init];
makerView.offset = CGPointMake(-self.subPriceView.frame.size.width,-self.subPriceView.frame.size.height/2);
makerView.chartView = _lineChartView;
_barChartView.marker = makerView;
[makerView addSubview:self.subPriceView];
-------------------------------配置X轴-----------------------
// 获取X轴
ChartXAxis *xAxis = _barChartView.xAxis;
// X轴的显示位置
xAxis.labelPosition = XAxisLabelPositionBottom;
// 是否绘制网格
xAxis.drawGridLinesEnabled = NO;
// X轴数值上面的字体 大小
xAxis.labelFont = [UIFont fontWithName:@"PingFang-SC-Medium" size:10.0f];
// X轴数值颜色
xAxis.labelTextColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1];
// X轴label宽度
xAxis.labelWidth=5;
// X轴显示的label数量
xAxis.labelCount=5;
// 设置虚线样式的网格线
xAxis.gridLineDashLengths = @[@3.0f, @3.0f];
// 网格线颜色
xAxis.gridColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1];
// 开启抗锯齿
xAxis.gridAntialiasEnabled = YES;
// 从0开始绘画
xAxis.drawZeroLineEnabled = YES;
// label位置(像里像外 枚举类型)
xAxis.labelPosition = 0;
------------------------------Y轴配置---------------------------
基本配置如X轴
下面为补充:
// 获取Y轴
ChartYAxis *leftAxis = _barChartView.leftAxis;
// 坐标数值样式
NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init];
// Y轴坐标最多为1位小数
leftAxisFormatter.maximumFractionDigits=1;
leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter];
// 最大值
leftAxis.axisMaximum=60;
// 最小值
leftAxis.axisMinimum=0;
// 坐标数值的位置
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;
// 数值分割个数
leftAxis.labelCount=8;
// 最大值到顶部的范围比
leftAxis.spaceTop=0.15;
------------------------------------设置条状图对象---------------------------
// bar的颜色
[set1setColor:[UIColor colorWithRed:219/255.f green:50/255.f blue:59/255.f alpha:1]];
// 数值的颜色
[set1setValueTextColor: [UIColor whiteColor]];
// 是否在bar上显示数值
[set1 setDrawValuesEnabled:NO];
// 是否点击有高亮效果,为NO是不会显示marker的效果
[set1setHighlightEnabled:NO];
-----------------------------------设置数据------------------------------
BarChartData*data = [[BarChartData alloc]initWithDataSets:dataSets];
// 设置宽度 柱形之间的间隙占整个柱形(柱形+间隙)的比例
[datasetBarWidth:0.6];
[datasetValueFont:[UIFontsystemFontOfSize:10]];
_barChartView.data = data;
[_barChartView notifyDataSetChanged];
==================第二条柱子实现(只有一根柱子的可以不看)==========
01.集合内添加2个集合对象。
02.间距的设置,如果不写这行代码,2根柱子则会重合
[data groupBarsFromX: startYeargroupSpace: groupSpacebarSpace: barSpace];
=======================举例如下=======================
- (void)setDataCount:(int)count {
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for(inti =0; i < count; i++) {
intval = (double) (arc4random_uniform(60))+2;
[yValsaddObject:[[BarChartDataEntryalloc]initWithX:iy:val]];
}
NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
for(inti =0; i < count; i++) {
intval2 = (double) (arc4random_uniform(60));
[yVals2addObject:[[BarChartDataEntryalloc]initWithX:iy:val2]];
}
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@"Set1"];[set1setColor:[UIColor colorWithRed:219/255.f green:50/255.f blue:59/255.f alpha:1]];//bar的颜色
[set1setDrawValuesEnabled:NO];
[set1setHighlightEnabled:NO];
BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithValues:yVals2 label:@"DataSet2"];
[set2setColor:[UIColor colorWithRed:255/255.f green:152/255.f blue:46/255.f alpha:1]];//bar的颜色
[set2setDrawValuesEnabled:NO];//是否在bar上显示数值
[set2setHighlightEnabled:NO];//是否点击有高亮效果,为NO是不会显示marker的效果
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSetsaddObject:set1];
[dataSetsaddObject:set2];
BarChartData*data = [[BarChartDataalloc]initWithDataSets:dataSets];
[datasetBarWidth:0.4];
[datasetValueFont:[UIFontsystemFontOfSize:10]];
[datagroupBarsFromX: -0.3 groupSpace: 0.15f barSpace: 0.02f];
_barChartView.data = data;
[_barChartView notifyDataSetChanged];
[_barChartView.data notifyDataChanged];
}