ca1223航班,天帝玄皇,石家庄黑社会吴迪
首先看一下最终要实现的效果：
最终效果
一、初始化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下载地址：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论