欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS使用Charts框架绘制柱形图

程序员文章站 2024-02-19 19:41:58
首先看一下最终要实现的效果: 最终效果 一、初始化barchartview 绘制柱形图需要用到barchartview这个类,下面是初始化代码: sel...

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

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);
}

运行结果如下:

iOS使用Charts框架绘制柱形图

运行结果

demo下载地址:http://xiazai.jb51.net/201612/yuanma/barchartdemo-barchartdemo_jb51.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!