首先看一下最终要实现的效果：
最终效果
一、初始化barchartview
绘制柱形图需要用到barchartview这个类，下面是初始化代码：
|
1
2
3
4
5
6
7
|
self.barchartview = [[barchartview alloc] init];self.barchartview.delegate = self;//设置代理[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);}]; |
二、设置barchartview的外观样式
1.基本样式
|
1
2
3
4
5
|
self.barchartview.backgroundcolor = [uicolor colorwithred:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];self.barchartview.nodatatext = @"暂无数据";//没有数据时的文字提示self.barchartview.drawvalueabovebarenabled = yes;//数值显示在柱形的上面还是下面self.barchartview.drawhighlightarrowenabled = no;//点击柱形图是否显示箭头self.barchartview.drawbarshadowenabled = no;//是否绘制柱形的阴影背景 |
2.barchartview的交互设置
|
1
2
3
4
5
|
self.barchartview.scaleyenabled = no;//取消y轴缩放self.barchartview.doubletaptozoomenabled = no;//取消双击缩放self.barchartview.dragenabled = yes;//启用拖拽图表self.barchartview.dragdecelerationenabled = yes;//拖拽后是否有惯性效果self.barchartview.dragdecelerationfrictioncoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显 |
3.设置barchartview的x轴样式
首先需要先获取到barchartview的x轴，然后进行设置.
通过barchartview的xaxis属性获取到x轴，代码如下：
hartxaxis *xaxis = self.barchartview.xaxis;
设置x轴样式的代码如下：
|
1
2
3
4
5
6
|
chartxaxis *xaxis = self.barchartview.xaxis;xaxis.axislinewidth = 1;//设置x轴线宽xaxis.labelposition = xaxislabelpositionbottom;//x轴的显示位置，默认是显示在上面的xaxis.drawgridlinesenabled = no;//不绘制网格线xaxis.spacebetweenlabels = 4;//设置label间隔，若设置为1，则如果能全部显示，则每个柱形下面都会显示labelxaxis.labeltextcolor = [uicolor browncolor];//label文字颜色 |
4.设置barchartview的y轴样式
barchartview默认样式中会绘制左右两侧的y轴，首先需要先隐藏右侧的y轴，代码如下：
self.barchartview.rightaxis.enabled = no;//不绘制右边轴
接着开始设置左侧y轴的样式.
首先设置y轴轴线的样式，代码如下：
|
1
2
3
4
5
6
7
8
|
leftaxis.forcelabelsenabled = no;//不强制绘制制定数量的labelleftaxis.showonlyminmaxenabled = no;//是否只显示最大值和最小值leftaxis.axisminvalue = 0;//设置y轴的最小值leftaxis.startatzeroenabled = yes;//从0开始绘制leftaxis.axismaxvalue = 105;//设置y轴的最大值leftaxis.inverted = no;//是否将y轴进行上下翻转leftaxis.axislinewidth = 0.5;//y轴线宽leftaxis.axislinecolor = [uicolor blackcolor];//y轴颜色 |
通过labelcount属性设置y轴要均分的数量.
在这里要说明一下，设置的labelcount的值不一定就是y轴要均分的数量，这还要取决于forcelabelsenabled属性，如果forcelabelsenabled等于yes, 则强制绘制指定数量的label, 但是可能不是均分的.代码如下：
|
1
2
3
|
chartyaxis *leftaxis = self.barchartview.leftaxis;//获取左边y轴leftaxis.labelcount = 5;leftaxis.forcelabelsenabled = no; |
设置y轴上标签的样式，代码如下：
|
1
2
3
|
leftaxis.labelposition = yaxislabelpositionoutsidechart;//label位置 leftaxis.labeltextcolor = [uicolor browncolor];//文字颜色leftaxis.labelfont = [uifont systemfontofsize:10.0f];//文字字体 |
设置y轴上标签显示数字的格式，代码如下：
|
1
2
|
leftaxis.valueformatter = [[nsnumberformatter alloc] init];//自定义格式leftaxis.valueformatter.positivesuffix = @" $";//数字后缀单位 |
设置y轴上网格线的样式，代码如下：
|
1
2
3
|
leftaxis.gridlinedashlengths = @[@3.0f, @3.0f];//设置虚线样式的网格线leftaxis.gridcolor = [uicolor colorwithred:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//网格线颜色leftaxis.gridantialiasenabled = yes;//开启抗锯齿 |
在y轴上添加限制线，代码如下：
|
1
2
3
4
5
6
7
|
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轴上leftaxis.drawlimitlinesbehinddataenabled = yes;//设置限制线绘制在柱形图的后面 |
5.设置barchartview的其它样式
通过legend获取到图例对象，然后把它隐藏掉，代码如下：
self.barchartview.legend.enabled = no;//不显示图例说明
隐藏描述文字，代码如下：
self.barchartview.descriptiontext = @"";//不显示，就设为空字符串即可
三、为barchartview的提供数据
为barchartview提供数据是通过其data属性提供的，首先需要创建barchartdata数据对象，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
//为柱形图设置数据- (barchartdata *)setdata{ int xvals_count = 12;//x轴上要显示多少条数据 double maxyval = 100;//y轴的最大值 //x轴上面需要显示的数据 nsmutablearray *xvals = [[nsmutablearray alloc] init]; for (int i = 0; i < xvals_count; i++) { [xvals addobject:[nsstring stringwithformat:@"%d月", i+1]]; } //对应y轴上面需要显示的数据 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]; } //创建barchartdataset对象，其中包含有y轴数据信息，以及可以设置柱形样式 barchartdataset *set1 = [[barchartdataset alloc] initwithyvals:yvals label:nil]; set1.barspace = 0.2;//柱形之间的间隙占整个柱形(柱形+间隙)的比例 set1.drawvaluesenabled = yes;//是否在柱形图上面显示数值 set1.highlightenabled = no;//点击选中柱形图是否有高亮效果，（双击空白处取消选中） [set1 setcolors:chartcolortemplates.material];//设置柱形图颜色 //将barchartdataset对象放入数组中 nsmutablearray *datasets = [[nsmutablearray alloc] init]; [datasets addobject:set1]; //创建barchartdata对象, 此对象就是barchartview需要最终数据对象 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]; //自定义数据显示格式 [formatter setnumberstyle:nsnumberformatterdecimalstyle]; [formatter setpositiveformat:@"#0.0"]; [data setvalueformatter:formatter]; return data;} |
为barchartview提供数据并设置动画效果，代码如下：
|
1
2
3
4
5
|
self.data = [self setdata]; //为柱形图提供数据 self.barchartview.data = self.data;//设置动画效果，可以设置x轴和y轴的动画效果[self.barchartview animatewithyaxisduration:1.0f]; |
四、实现barchartview的代理方法
1.点击选中柱形图时的代理方法，代码如下：
|
1
2
3
|
- (void)chartvalueselected:(chartviewbase * _nonnull)chartview entry:(chartdataentry * _nonnull)entry datasetindex:(nsinteger)datasetindex highlight:(charthighlight * _nonnull)highlight{ nslog(@"---chartvalueselected---value: %g", entry.value);} |
2.没有选中柱形图时的代理方法，代码如下：
|
1
2
3
|
- (void)chartvaluenothingselected:(chartviewbase * _nonnull)chartview{ nslog(@"---chartvaluenothingselected---");} |
当选中一个柱形图后，在空白处双击，就可以取消选择，此时会回调此方法.
3.捏合放大或缩小柱形图时的代理方法，代码如下：
|
1
2
3
|
- (void)chartscaled:(chartviewbase * _nonnull)chartview scalex:(cgfloat)scalex scaley:(cgfloat)scaley{ nslog(@"---chartscaled---scalex:%g, scaley:%g", scalex, scaley);} |
4.拖拽图表时的代理方法
|
1
2
3
|
- (void)charttranslated:(chartviewbase * _nonnull)chartview dx:(cgfloat)dx dy:(cgfloat)dy{ nslog(@"---charttranslated---dx:%g, dy:%g", dx, dy);} |
运行结果如下：
运行结果
demo下载地址：barchartdemo-barchartdemo.rar
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持服务器之家！
原文链接：http://www.jianshu.com/p/5f777671e9e4
