iOS-charts框架之柱状图详解

前面几篇文章是《charts框架的集成》《charts饼状图》《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的同样可以加群。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容