使用Charts框架可以實現柱形圖、曲線圖、圓型圖等。
圖表
圖表
畫折線使用 LineChartView類，用法與barChartView類型。其他類圖標可參考ChartsDemo里面的案例實現，下載地址：https://github.com/danielgindi/Charts
一、初始化
柱形圖使用Charts框架中的BarChartView類:
_chartView = [[BarChartView alloc]init];
//設置代理
_chartView.delegate = self;//代理
[self.view addSubview:_chartView];
二、設置圖表格式
1.基本樣式
_chartView.descriptionText = @"";//右下角描述
_chartView.drawBarShadowEnabled = NO;//是否繪制陰影背景
_chartView.drawValueAboveBarEnabled = YES;//數值顯示是否在條柱上面
_chartView.noDataText = NSLocalizedString(@"加載中...", nil);//沒有數據時的顯示
_chartView.rightAxis.enabled = NO;//不畫右邊坐標軸
_chartView.legend.enabled = NO;//不顯示圖例說明
_chartView.dragEnabled = NO;//不啟用拖拽圖表
2.交互設置
_chartView.doubleTapToZoomEnabled = NO;//雙擊是否縮放
_chartView.scaleXEnabled = NO;//X軸縮放
_chartView.scaleYEnabled = NO;//Y軸縮放
_chartView.pinchZoomEnabled = NO;//XY軸是否同時縮放
3.X軸樣式設置
ChartXAxis *xAxis = _chartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置
xAxis.drawGridLinesEnabled = NO;//不繪制網格
xAxis.labelFont = [UIFont systemFontOfSize:10.0f];//x數值字體大小
xAxis.labelTextColor = [UIColor blackColor];//數值字體顏色
DateFormatter *valueFormatter = [[DateFormatter alloc] init];//坐標數值樣式
xAxis.valueFormatter = valueFormatter;
xAxis.labelCount = 7;
4.Y軸樣式設置
NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init];//坐標數值樣式
leftAxisFormatter.maximumFractionDigits = 1;//Y軸坐標最多為1位小數
ChartYAxis *leftAxis = _chartView.leftAxis;
leftAxis.drawZeroLineEnabled = YES;//從0開始繪畫
leftAxis.axisMaximum = 60;//最大值
leftAxis.axisMinimum = 0;//最小值
leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter];
leftAxis.labelFont = [UIFont systemFontOfSize:10.f];//字體大小
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//坐標數值的位置
leftAxis.labelCount = 8;//數值分割個數
leftAxis.labelTextColor = [UIColor blackColor];//坐標數值字體顏色
leftAxis.spaceTop = 0.15;//最大值到頂部的范圍比
leftAxis.drawGridLinesEnabled = YES;//是否繪制網格
leftAxis.axisLineWidth = 1;//Y軸線寬
leftAxis.axisLineColor = [UIColor blackColor];//Y軸顏色
ChartYAxis *right = _chartView.rightAxis;
right.drawLabelsEnabled = NO;//是否顯示Y軸坐標
right.drawGridLinesEnabled = NO;//不繪制網格
5.marker設置
點擊條柱時的數據展示，ChartsDemo中包含BalloonMarker類
BalloonMarker *marker = [[BalloonMarker alloc]
initWithColor: [UIColor colorWithWhite:180/255. alpha:1.0]
font: [UIFont systemFontOfSize:12.0]
textColor: UIColor.whiteColor
insets: UIEdgeInsetsMake(4.0, 4.0, 10.0, 4.0)];
marker.chartView = _chartView;
marker.minimumSize = CGSizeMake(40.f, 20.f);
_chartView.marker = marker;
設置動畫
[_chartViewanimateWithYAxisDuration:1.0f];
ChartLimitLine類即可添加限制線，使用可參考ChartsDemo
三、data設置
- (void)setDataCount:(int)count {
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < count; i++) {
int val = (double) (arc4random_uniform(60))+2;
[yVals addObject:[[BarChartDataEntry alloc] initWithX:i y:val]];
}
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@"DataSet"];
[set1 setColor:[UIColor grayColor]];//bar的顏色
[set1 setValueTextColor: [UIColor lightGrayColor]];
// [set1 setDrawValuesEnabled:NO];//是否在bar上顯示數值
// [set1 setHighlightEnabled:NO];//是否點擊有高亮效果，為NO是不會顯示marker的效果
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont systemFontOfSize:10]];
self.chartView.data = data;
[self.chartView notifyDataSetChanged];
}
四、實現barChartView的代理方法
1.點擊選中時的代理
- (void)chartValueSelected:(ChartViewBase * __nonnull)chartView entry:(ChartDataEntry * __nonnull)entry highlight:(ChartHighlight * __nonnull)highlight{
NSLog(@"chartValueSelected");
}
2.沒有選中時的代理
- (void)chartValueNothingSelected:(ChartViewBase * __nonnull)chartView{
NSLog(@"chartValueNothingSelected");
}
3.捏合放大或縮小
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {
NSLog(@"---chartScaled---scaleX:%g, scaleY:%g", scaleX, scaleY);
}
4.拖拽圖表時的代理方法
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {
NSLog(@"---chartTranslated---dX:%g, dY:%g", dX, dY);
}
效果：
效果圖
