前面幾篇文章是《charts框架的集成》《charts餅狀圖》《charts折線圖》,建議大家結合起來看,這樣更詳細。
傳送門:
下方是柱狀圖效果圖:?
核心代碼如下,大家可以按照自己的需求,修改下方配置:
// 初始化
?_barChartView = [[BarChartView alloc] init];
_barChartView.frame = CGRectMake(5, 64, kSCREEN_WIDTH, kSCREEN_HEIGHT-200 );
?[self.view addSubview:_barChartView];
-------------------------------柱狀圖的配置-----------------------------
// 設置XY軸動畫
[_barChartView? animateWithYAxisDuration:1.0f];
[_barChartView? animateWithXAxisDuration:1.0f];
// 是否繪制陰影背景
_barChartView.drawBarShadowEnabled = NO;?
// 數值顯示是否在條柱上面
_barChartView.drawValueAboveBarEnabled = YES;?
// 沒有數據的時候的顯示
_barChartView.noDataText = @"暫無此產品的價格趨勢";
_barChartView.noDataFont = [UIFont systemFontOfSize:15];
_barChartView.noDataTextColor = [UIColor grayColor];
// 數值顯示是否在條柱上面
_barChartView.drawValueAboveBarEnabled = YES;?
// 是否畫右邊坐標軸
_barChartView.rightAxis.enabled = NO;?
// 是否畫圖例(圖例的具體配置可參照我的餅狀圖)
?_barChartView.legend.enabled = NO;
// 是否可以拖拽設置
?_barChartView.dragEnabled = YES;
// 雙擊是否縮放
_barChartView.doubleTapToZoomEnabled = NO;?
// XY軸是否縮放
?_barChartView.scaleXEnabled = NO;//X軸縮放
?_barChartView.scaleYEnabled = NO;//Y軸縮放
// XY軸是否可以同時縮放
_barChartView.pinchZoomEnabled = NO;?
// 是否開啟描述label
?_barChartView.chartDescription.enabled = NO;?
----------------------配置折現圖上面的浮層--------------
// 設置浮層
_barChartView.drawMarkers = YES;
ChartMarkerView * makerView = [[ChartMarkerView alloc]init];
makerView.offset = CGPointMake(-self.subPriceView.frame.size.width,-self.subPriceView.frame.size.height/2);
makerView.chartView = _lineChartView;
_barChartView.marker = makerView;
[makerView addSubview:self.subPriceView];
-------------------------------配置X軸-----------------------
// 獲取X軸
?ChartXAxis *xAxis = _barChartView.xAxis;?
// X軸的顯示位置
xAxis.labelPosition = XAxisLabelPositionBottom;?
// 是否繪制網格
xAxis.drawGridLinesEnabled = NO;?
// X軸數值上面的字體 大小
?xAxis.labelFont = [UIFont fontWithName:@"PingFang-SC-Medium" size:10.0f];?
// X軸數值顏色
?xAxis.labelTextColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1];?
// X軸label寬度
?xAxis.labelWidth=5;
// X軸顯示的label數量
?xAxis.labelCount=5; ?
// 設置虛線樣式的網格線
?xAxis.gridLineDashLengths = @[@3.0f, @3.0f];
// 網格線顏色
xAxis.gridColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1];
// 開啟抗鋸齒
xAxis.gridAntialiasEnabled = YES;
// 從0開始繪畫
xAxis.drawZeroLineEnabled = YES; ?
// label位置(像里像外 枚舉類型)
xAxis.labelPosition = 0; ??
------------------------------Y軸配置---------------------------
基本配置如X軸?
下面為補充:
// 獲取Y軸
?ChartYAxis *leftAxis = _barChartView.leftAxis;?
// 坐標數值樣式
?NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init];
// Y軸坐標最多為1位小數
leftAxisFormatter.maximumFractionDigits=1;?
leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter];
// 最大值
leftAxis.axisMaximum=60;
// 最小值
leftAxis.axisMinimum=0;?
// 坐標數值的位置?
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;?
// 數值分割個數?
leftAxis.labelCount=8;?
// 最大值到頂部的范圍比?
leftAxis.spaceTop=0.15;?
------------------------------------設置條狀圖對象---------------------------
// bar的顏色
[set1setColor:[UIColor colorWithRed:219/255.f green:50/255.f blue:59/255.f alpha:1]];?
// 數值的顏色
?[set1setValueTextColor: [UIColor whiteColor]]; ?
// 是否在bar上顯示數值 ?
[set1 setDrawValuesEnabled:NO];?
// 是否點擊有高亮效果,為NO是不會顯示marker的效果
[set1setHighlightEnabled:NO];?
-----------------------------------設置數據------------------------------
BarChartData*data = [[BarChartData alloc]initWithDataSets:dataSets];
// 設置寬度? 柱形之間的間隙占整個柱形(柱形+間隙)的比例
?[datasetBarWidth:0.6];
?[datasetValueFont:[UIFontsystemFontOfSize:10]];
_barChartView.data = data;
?[_barChartView notifyDataSetChanged];
==================第二條柱子實現(只有一根柱子的可以不看)==========
01.集合內添加2個集合對象。
02.間距的設置,如果不寫這行代碼,2根柱子則會重合
?[data groupBarsFromX: startYeargroupSpace: groupSpacebarSpace: barSpace];
=======================舉例如下=======================
- (void)setDataCount:(int)count {
?? ?NSMutableArray *yVals = [[NSMutableArray alloc] init];
? ? for(inti =0; i < count; i++) {
? ? ? ? intval = (double) (arc4random_uniform(60))+2;
? ? ? ? [yValsaddObject:[[BarChartDataEntryalloc]initWithX:iy:val]];
? ? }
? ? NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
? ? for(inti =0; i < count; i++) {
? ? ? ? intval2 = (double) (arc4random_uniform(60));
? ? ? ? [yVals2addObject:[[BarChartDataEntryalloc]initWithX:iy:val2]];
? ? }
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@"Set1"];[set1setColor:[UIColor colorWithRed:219/255.f green:50/255.f blue:59/255.f alpha:1]];//bar的顏色
[set1setDrawValuesEnabled:NO];
[set1setHighlightEnabled:NO];
BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithValues:yVals2 label:@"DataSet2"];
?[set2setColor:[UIColor colorWithRed:255/255.f green:152/255.f blue:46/255.f alpha:1]];//bar的顏色
?[set2setDrawValuesEnabled:NO];//是否在bar上顯示數值
[set2setHighlightEnabled:NO];//是否點擊有高亮效果,為NO是不會顯示marker的效果
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSetsaddObject:set1];
[dataSetsaddObject:set2];
BarChartData*data = [[BarChartDataalloc]initWithDataSets:dataSets];
[datasetBarWidth:0.4];
[datasetValueFont:[UIFontsystemFontOfSize:10]];
[datagroupBarsFromX: -0.3 groupSpace: 0.15f barSpace: 0.02f];
_barChartView.data = data;
[_barChartView notifyDataSetChanged];
[_barChartView.data notifyDataChanged];
}
有問題的可以加群:191409807 ?歡迎話癆。喜歡交流的也可以加群,想要demo的同樣可以加群。