iOS使用Charts框架绘制柱形图

首先看一下最终要实现的效果：

最终效果

一、初始化barchartview

绘制柱形图需要用到barchartview这个类，下面是初始化代码：

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.基本样式

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的交互设置

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轴样式的代码如下：

chartxaxis *xaxis = self.barchartview.xaxis;
xaxis.axislinewidth = 1;//设置x轴线宽
xaxis.labelposition = xaxislabelpositionbottom;//x轴的显示位置，默认是显示在上面的
xaxis.drawgridlinesenabled = no;//不绘制网格线
xaxis.spacebetweenlabels = 4;//设置label间隔，若设置为1，则如果能全部显示，则每个柱形下面都会显示label
xaxis.labeltextcolor = [uicolor browncolor];//label文字颜色

4.设置barchartview的y轴样式

barchartview默认样式中会绘制左右两侧的y轴，首先需要先隐藏右侧的y轴，代码如下：

self.barchartview.rightaxis.enabled = no;//不绘制右边轴

接着开始设置左侧y轴的样式.

首先设置y轴轴线的样式，代码如下：

leftaxis.forcelabelsenabled = no;//不强制绘制制定数量的label
leftaxis.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, 但是可能不是均分的.代码如下：

chartyaxis *leftaxis = self.barchartview.leftaxis;//获取左边y轴
leftaxis.labelcount = 5;
leftaxis.forcelabelsenabled = no;

设置y轴上标签的样式，代码如下：

leftaxis.labelposition = yaxislabelpositionoutsidechart;//label位置
leftaxis.labeltextcolor = [uicolor browncolor];//文字颜色
leftaxis.labelfont = [uifont systemfontofsize:10.0f];//文字字体

设置y轴上标签显示数字的格式，代码如下：

leftaxis.valueformatter = [[nsnumberformatter alloc] init];//自定义格式
leftaxis.valueformatter.positivesuffix = @" $";//数字后缀单位

设置y轴上网格线的样式，代码如下：

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轴上添加限制线，代码如下：

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数据对象，代码如下：

//为柱形图设置数据
- (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提供数据并设置动画效果，代码如下：

self.data = [self setdata];
 //为柱形图提供数据
 self.barchartview.data = self.data;
//设置动画效果，可以设置x轴和y轴的动画效果
[self.barchartview animatewithyaxisduration:1.0f];

四、实现barchartview的代理方法

1.点击选中柱形图时的代理方法，代码如下：

- (void)chartvalueselected:(chartviewbase * _nonnull)chartview entry:(chartdataentry * _nonnull)entry datasetindex:(nsinteger)datasetindex highlight:(charthighlight * _nonnull)highlight{
 nslog(@"---chartvalueselected---value: %g", entry.value);
}

2.没有选中柱形图时的代理方法，代码如下：

- (void)chartvaluenothingselected:(chartviewbase * _nonnull)chartview{
 nslog(@"---chartvaluenothingselected---");
}

当选中一个柱形图后，在空白处双击，就可以取消选择，此时会回调此方法.

3.捏合放大或缩小柱形图时的代理方法，代码如下：

- (void)chartscaled:(chartviewbase * _nonnull)chartview scalex:(cgfloat)scalex scaley:(cgfloat)scaley{
 nslog(@"---chartscaled---scalex:%g, scaley:%g", scalex, scaley);
}

4.拖拽图表时的代理方法

- (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