近期项目中需要使用柱状图,于是选择了Charts(你们懂得这Star还是很敞亮的)下面是实现的效果图,基本上能满足我们项目展示的需求;
chartsBar.png
不啰嗦上代码:
- (void)loadContent{
_chartView = [[BarChartView alloc]initWithFrame:CGRectMake(0, 0, APP_WIDTH,250)];
_chartView.delegate = self;
_chartView.drawBarShadowEnabled = NO; // 是否绘制阴影背景
_chartView.drawValueAboveBarEnabled = YES; // 数值显示是否在条柱上面
_chartView.maxVisibleCount = 50; // Y轴的数字最大值
_chartView.doubleTapToZoomEnabled = NO; // 双击不可缩放
_chartView.legend.enabled = NO; // 不显示下方的小方格
[_chartView setChartDescription:nil]; // 显示描述默认显示Description Label
ChartXAxis *xAxis = _chartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // X轴的显示位置
xAxis.labelFont = [UIFont systemFontOfSize:12.f]; // X轴显示文字Font
xAxis.labelTextColor = [UIColor getHEXRGB:@"999999"]; // X轴显示文字颜色
xAxis.drawGridLinesEnabled = NO; // 是否绘制网格
xAxis.granularity = 1.0; // only intervals of 1 day
xAxis.labelCount = 10; // X轴的数字个
xAxis.wordWrapEnabled = YES; // 文字换行
[xAxis setLabelRotationAngle:20]; // 设置文字倾斜角度
self.xAxisValueFormatter = [[XAxisValueFormatter alloc] init];// 自定义Formatter实现底部显示文字
xAxis.valueFormatter = self.xAxisValueFormatter;
NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init]; // 坐标数值样式
leftAxisFormatter.minimumFractionDigits = 0; // Y轴坐标最少为0位小数
leftAxisFormatter.maximumFractionDigits = 1; // Y轴坐标最多为1位小数
leftAxisFormatter.negativeSuffix = @"";
leftAxisFormatter.positiveSuffix = @"";
ChartYAxis *leftAxis = _chartView.leftAxis;
leftAxis.labelFont = [UIFont systemFontOfSize:10.f];
leftAxis.labelCount = 5;
leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter];
leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // 坐标数值的位置
leftAxis.spaceTop = 0.15; // 最大值到顶部的范围比
leftAxis.axisMinimum = 0.0; // this replaces startAtZero = YES
//分别有左右两个Y轴方向的数字展示
ChartYAxis *rightAxis = _chartView.rightAxis;
rightAxis.enabled = YES;
rightAxis.drawGridLinesEnabled = NO;
rightAxis.labelFont = [UIFont systemFontOfSize:10.f];
rightAxis.labelCount = 5;
rightAxis.spaceTop = 0.15;
rightAxis.axisMinimum = 0.0; // this replaces startAtZero = YES
[self addSubview:_chartView];
[self setDataCount:10 range:50];
}
上面是初始化一个BarChartView的基本代码,既然界面实现了我们就要设置数据了,这里我写了一点假数据便于观察效果;
- (void)setDataCount:(int)count range:(double)range
{
double start = 1.0;
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = start; i < start + count + 1; i++)
{
int mult = (range + 1);
int val = (arc4random_uniform(mult));
if (arc4random_uniform(100) < 25) {
[yVals addObject:[[BarChartDataEntry alloc] initWithX:i y:val icon: [UIImage imageNamed:@""]]];
} else {
[yVals addObject:[[BarChartDataEntry alloc] initWithX:i y:val]];
}
}
BarChartDataSet *set1 = nil;
if (_chartView.data.dataSetCount > 0){
set1 = (BarChartDataSet *)_chartView.data.dataSets[0];
[_chartView.data notifyDataChanged];
[_chartView notifyDataSetChanged];
}else{
set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@""];
[set1 setColors:[self getBarItemBGColor]]; // 设置柱状图的颜色数组,按顺序循环复用
[set1 setValueColors:[self getBarItemBGColor]]; // 设置柱状图的文字颜色数组,按顺序循环复用
set1.drawIconsEnabled = NO; // 是否绘制icon
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];
data.barWidth = 0.5f; // 柱状图和间隔的比例.
_xAxisValueFormatter.xAxisDatas = [self setBottomTexts]; // 底部文字数组(模拟数组).
_chartView.data = data; // 数据赋值
[_chartView setVisibleXRangeMaximum:6]; // 设置一页最多显示多少个柱状图,超过可以滑动
}
}
当然这里需要注意的是如果要实现底部文字显示是需要重写IChartAxisValueFormatter代理的;
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis{
if ((int)value % 7 != 0) {
return _xAxisDatas[((int)value % 7) - 1];
}else{
return _xAxisDatas[((int)value % 7)];
}
}
实现了这个方法之后就可以显示文字.当然写的比较简单,这里有柱状图写的比较完善的大佬:链接还有小弟的demo希望对大家有所帮助!
网友评论