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];
