iOS-charts框架之柱状图详解

前面几篇文章是《charts框架的集成》《charts饼状图》《charts折线图》,建议大家结合起来看,这样更详细。

传送门:

《charts框架之折线图详解》

《charts框架集成详解》

《charts框架饼状图详解》

下方是柱状图效果图: 

iOS-charts框架之柱状图详解_第1张图片

核心代码如下,大家可以按照自己的需求,修改下方配置:

// 初始化

 _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的同样可以加群。

你可能感兴趣的:(iOS-charts框架之柱状图详解)