chartxy 柱状图_iOS-charts框架之柱状图详解

前面几篇文章是《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];

}

有问题的可以加群：191409807  欢迎话痨。喜欢交流的也可以加群，想要demo的同样可以加群。