Charts - BarChartView
初始化
- (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; }
代理<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{ }
设置单个柱状图数据源
- (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];
设置多个柱状图组数据源
//为柱形图设置数据 - (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]
多组柱状图设置注意事项
（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];
设置初始可见数量
需设置数据源后设置，设置可见数量后，可滑动显示其后面数据
[self.chartView setVisibleXRangeMaximum:7];
设置X轴 Label 旋转 角度
self.chartView.xAxis.labelRotationAngle = -30;
自定义 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;
关于 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];
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
