iOS-Charts(BarChartView)

1|0Charts - BarChartView

1|1初始化

- (BarChartView *)chartView{ if (!_chartView) { _chartView = [[BarChartView alloc]init]; _chartView.delegate = self; ///外观样式 //BarChartView _chartView.backgroundColor = [UIColor whiteColor]; //没有数据时的文字提示 _chartView.noDataText = @"没有数据"; //数值显示在柱形的上面还是下面 _chartView.drawValueAboveBarEnabled = YES; //是否绘制柱形的阴影背景 _chartView.drawBarShadowEnabled = NO; //交互设置 //取消Y轴缩放 _chartView.scaleYEnabled = NO; //取消双击缩放 _chartView.doubleTapToZoomEnabled = NO; //启用拖拽图表 _chartView.dragEnabled = YES; //拖拽后是否有惯性效果 _chartView.dragDecelerationEnabled = YES; //拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显 _chartView.dragDecelerationFrictionCoef = 0.5; ///X 轴 ChartXAxis *xAxis = _chartView.xAxis; xAxis.axisLineWidth = 0.5;//设置X轴线宽 //X轴的显示位置 xAxis.labelPosition = XAxisLabelPositionBottom; //不绘制网格线 xAxis.drawGridLinesEnabled = NO; //设置label间隔,若设置为1,每个柱形下面都会显示label xAxis.spaceMin = 1; xAxis.labelTextColor = [UIColor lightGrayColor];//label文字颜色 xAxis.axisLineColor = [UIColor redColor];//轴颜色 ///间隔 xAxis.granularity = 1.0; ///Y轴 //不绘制右边轴 _chartView.rightAxis.enabled = NO; ChartYAxis *leftAxis = _chartView.leftAxis; //不强制绘制制定数量的label leftAxis.forceLabelsEnabled = NO; //设置Y轴的最小值 leftAxis.axisMinimum = 0; //从0开始绘制 leftAxis.drawZeroLineEnabled = YES; //设置Y轴的最大值(配合数据源设置,也可不设置) leftAxis.axisMaximum = 50; //是否将Y轴进行上下翻转 leftAxis.inverted = NO; //Y轴线宽 leftAxis.axisLineWidth = 0.5; leftAxis.axisLineColor = [UIColor lightGrayColor];//Y轴颜色 leftAxis.zeroLineColor = [UIColor lightGrayColor]; //label位置 leftAxis.labelPosition = YAxisLabelPositionOutsideChart; //文字颜色 leftAxis.labelTextColor = [UIColor lightGrayColor]; //文字字体 leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; //设置虚线样式的网格线 leftAxis.gridLineDashLengths = @[@3.0f, @3.0f]; //网格线颜色 leftAxis.gridColor = [UIColor lightGrayColor]; leftAxis.gridAntialiasEnabled = YES;//开启抗锯齿 //设置Y轴显示 NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init]; leftAxisFormatter.positiveSuffix = @""; leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter]; ///图例说明 _chartView.legend.enabled = YES; _chartView.legend.verticalAlignment = ChartLegendVerticalAlignmentTop; _chartView.legend.horizontalAlignment = ChartLegendHorizontalAlignmentRight; _chartView.legend.form = ChartLegendFormCircle; _chartView.legend.yOffset = 20; } return _chartView; }

1|0代理<ChartViewDelegate>

#pragma mark 图表中数值被选中 -(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight{ } #pragma mark 图表中的空白区域被选中 -(void)chartValueNothingSelected:(ChartViewBase *)chartView{ } #pragma mark 图表被缩放 -(void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{ } #pragma mark 图表被移动 -(void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY{ }

1|2设置单个柱状图数据源

- (BarChartData *)barSingleData{ //X轴底部数据 NSMutableArray<NSString *> *xVals = [[NSMutableArray alloc] init]; //对应Y轴(柱状图数据) NSMutableArray *yVals = [[NSMutableArray alloc] init]; double dataSetMax = 0; for (int i = 0; i < _count; i++) { double value = arc4random()%60 + 6; dataSetMax = MAX(value, dataSetMax); BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:i y:value]; [yVals addObject:entry]; [xVals addObject:[NSString stringWithFormat:@"k-%d",i]]; } self.xValues = xVals; ///X 轴 ChartXAxis *xAxis = self.chartView.xAxis; xAxis.labelCount = _count; ChartIndexAxisValueFormatter *valueFormatter = [[ChartIndexAxisValueFormatter alloc]initWithValues:xVals]; xAxis.valueFormatter = valueFormatter; ChartYAxis *leftAxis = self.chartView.leftAxis; leftAxis.axisMaximum = dataSetMax; BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithEntries:yVals label:@"柱状图-图例说明"]; //是否在柱形图上面显示数值 set1.drawValuesEnabled = YES; //点击选中柱形图是否有高亮效果 set1.highlightEnabled = NO; //柱状图颜色 [set1 setColor:[UIColor paleVioletRed]]; NSNumberFormatter *set1Formatter = [[NSNumberFormatter alloc] init]; set1Formatter.numberStyle = NSNumberFormatterDecimalStyle; set1Formatter.positiveSuffix = @""; set1.valueFormatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:set1Formatter]; set1.axisDependency = AxisDependencyRight; BarChartData *data = [[BarChartData alloc] initWithDataSets:@[set1]]; //文字字体 data.barWidth = 0.6; [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]]; //文字颜色 [data setValueTextColor:[UIColor paleVioletRed]]; return data; }

 加载数据源

self.chartView.data = [self barSingleData]; [self.chartView animateWithYAxisDuration:0.25f];

1|3设置多个柱状图组数据源

//为柱形图设置数据 - (BarChartData *)barGroupData{ //X轴底部数据 NSMutableArray<NSString *> *xVals = [[NSMutableArray alloc] init]; //对应Y轴(柱状图数据) NSMutableArray *yVals1 = [[NSMutableArray alloc] init]; //对应Y轴(柱状图数据) NSMutableArray *yVals2 = [[NSMutableArray alloc] init]; //对应Y轴(柱状图数据) NSMutableArray *yVals3 = [[NSMutableArray alloc] init]; //对应Y轴(柱状图数据) NSMutableArray *yVals4 = [[NSMutableArray alloc] init]; double dataSetMax = 0; // float groupSpace = 0.2; // float barSpace = 0.05; // float barWidth = 0.15; float groupSpace = 0.3; float barSpace = 0.05; float barWidth = 0.3; for (int i = 0; i < _count; i++) { double value1 = arc4random()%60 + 6; double value2 = arc4random()%65 + 6; double value3 = arc4random()%65 + 2; double value4 = arc4random()%30 + 2; dataSetMax = MAX(value1, dataSetMax); dataSetMax = MAX(value2, dataSetMax); dataSetMax = MAX(value3, dataSetMax); dataSetMax = MAX(value4, dataSetMax); BarChartDataEntry *entry1 = [[BarChartDataEntry alloc] initWithX:i y:value1]; [yVals1 addObject:entry1]; BarChartDataEntry *entry2 = [[BarChartDataEntry alloc] initWithX:i y:value2]; [yVals2 addObject:entry2]; BarChartDataEntry *entry3 = [[BarChartDataEntry alloc] initWithX:i y:value3]; [yVals3 addObject:entry3]; BarChartDataEntry *entry4 = [[BarChartDataEntry alloc] initWithX:i y:value4]; [yVals4 addObject:entry4]; [xVals addObject:[NSString stringWithFormat:@"k-%d",i]]; } self.xValues = xVals; BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithEntries:yVals1 label:@"图例说明1"]; //是否在柱形图上面显示数值 set1.drawValuesEnabled = YES; //点击选中柱形图是否有高亮效果 set1.highlightEnabled = NO; //柱状图颜色 [set1 setColor:[UIColor paleVioletRed]]; set1.valueTextColor = [UIColor paleVioletRed]; BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithEntries:yVals2 label:@"图例说明2"]; //是否在柱形图上面显示数值 set2.drawValuesEnabled = YES; //点击选中柱形图是否有高亮效果 set2.highlightEnabled = NO; //柱状图颜色 [set2 setColor:[UIColor rosyBrown]]; set2.valueTextColor = [UIColor rosyBrown]; BarChartDataSet *set3 = [[BarChartDataSet alloc] initWithEntries:yVals3 label:@"图例说明3"]; //是否在柱形图上面显示数值 set3.drawValuesEnabled = YES; //点击选中柱形图是否有高亮效果 set3.highlightEnabled = NO; //柱状图颜色 [set3 setColor:[UIColor darkCyan]]; set3.valueTextColor = [UIColor darkCyan]; BarChartDataSet *set4 = [[BarChartDataSet alloc] initWithEntries:yVals4 label:@"图例说明4"]; //是否在柱形图上面显示数值 set4.drawValuesEnabled = YES; //点击选中柱形图是否有高亮效果 set4.highlightEnabled = NO; //柱状图颜色 [set4 setColor:[UIColor darkSlateGray]]; set4.valueTextColor = [UIColor darkSlateGray]; BarChartData *data = [[BarChartData alloc] initWithDataSets:@[set1,set3]]; //文字字体 data.barWidth = barWidth; [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]]; //文字颜色 // [data setValueTextColor:[UIColor forestGreen]]; ///X 轴 ChartXAxis *xAxis = self.chartView.xAxis; xAxis.labelCount = _count; ChartIndexAxisValueFormatter *valueFormatter = [[ChartIndexAxisValueFormatter alloc]initWithValues:xVals]; xAxis.valueFormatter = valueFormatter; ChartYAxis *leftAxis = self.chartView.leftAxis; leftAxis.axisMaximum = dataSetMax; self.chartView.xAxis.axisMaximum = -0.5 + [data groupWidthWithGroupSpace:groupSpace barSpace: barSpace] * xVals.count; [self.chartView.xAxis setLabelCount:xVals.count]; [data groupBarsFromX: -0.5 groupSpace: groupSpace barSpace: barSpace]; return data; }

 加载数据源

self.chartView.data = [self barGroupData]; [self.chartView animateWithYAxisDuration:0.25f]

 

1|4 多组柱状图设置注意事项

(barWidth + barSpace)* 组内个数 + groupSpace = 1.00->每个""的间隔 granularity
self.chartView.xAxis.axisMaximum = -0.5 + [data groupWidthWithGroupSpace:groupSpace barSpace: barSpace] * xVals.count; [data groupBarsFromX: -0.5 groupSpace: groupSpace barSpace: barSpace];

1|5设置初始可见数量

需设置数据源后设置,设置可见数量后,可滑动显示其后面数据

[self.chartView setVisibleXRangeMaximum:7];

 

 

1|6设置X轴 Label 旋转 角度

self.chartView.xAxis.labelRotationAngle = -30;

1|7自定义 valueFormatter

以柱形图上面显示数值为例,自定义 valueFormatter ,首先创建 自定义 valueFormatter 文件,实现相关代理(同理X轴与Y轴也可自定义)

@interface KBarValueFormatter : NSObject<IChartValueFormatter> @property (weak, nonatomic) id<IChartValueFormatter> delegate; @property (strong, nonatomic) NSNumberFormatter * formatter; - (instancetype)initWithNumber:(NSNumberFormatter *)formatter; @end
@implementation KBarValueFormatter - (instancetype)initWithNumber:(NSNumberFormatter *)formatter{ if (self = [super init]) { self.delegate = self; self.formatter = formatter; } return self; } - (NSString *)stringForValue:(double)value entry:(ChartDataEntry *)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler *)viewPortHandler{ return [[self.formatter stringForObjectValue:@(value)] stringByAppendingFormat:@"-%d",arc4random()%9]; } @end

 初始化自定义valueFormatter

- (KBarValueFormatter *)barValueFormatter{ if (!_barValueFormatter) { NSNumberFormatter *set1Formatter = [[NSNumberFormatter alloc] init]; set1Formatter.numberStyle = NSNumberFormatterDecimalStyle; set1Formatter.positiveSuffix = @""; _barValueFormatter = [[KBarValueFormatter alloc]initWithNumber:set1Formatter]; } return _barValueFormatter; }

设置 BarChartDataSet 的 valueFormatter

set1.valueFormatter = self.barValueFormatter.delegate;

 

1|8关于 makerView

自定义一个基于UIView 的 makerView,同时需要将柱状图的点击高亮打开

set1.highlightEnabled = YES; [set1 setHighlightColor:[UIColor paleVioletRed]];

初始化 makerView

- (KBarMarkerView *)barMarkerView{ if (!_barMarkerView) { _barMarkerView = [[KBarMarkerView alloc]init]; _barMarkerView.frame = (CGRect){0,0,120,60}; } return _barMarkerView; }

配置 makerView

ChartMarkerView *makerView = [[ChartMarkerView alloc]init]; makerView.offset = CGPointMake(- self.barMarkerView.frame.size.width/2,-self.barMarkerView.frame.size.height); makerView.chartView = self.chartView; self.chartView.marker = makerView; [makerView addSubview:self.barMarkerView];

 


__EOF__

本文作者K
本文链接https://www.cnblogs.com/wangkejia/p/15494841.html
关于博主:评论和私信尽量在第一时间回复哦~
版权声明:如果您要转载,请注明出处哦~
声援博主:如果觉得文章对您有帮助,点击文章右下角【推荐】一下吧~
posted @   macroK  阅读(1710)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示