热门标签 | HotTags
当前位置:  开发笔记 > IOS > 正文

iOS画出精美的图表方法示例

这篇文章主要给大家介绍了关于iOS如何画出精美的图表的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

iOS端画图表的库很多,今天给大家介绍一款很有名的库 - Charts

借助Charts,我们可以画出很精美的折线图、柱状图、饼状图、K线、雷达、混合图表等等

github地址 (本地下载)


1.集成Charts

这里只是做一个简略说明,具体的可以参考官方的集成方法 Charts

如果使用的Swift开发,可以直接import Charts

如果使用OC开发,则需要混编,建立ProjectName-Bridging-Header.h桥接文件,这里详细介绍混编开发

  1. 利用CocoaPods,在Podfile文件中写入 : pod 'Charts',然后pod install
  2. 在桥接文件中@import Charts;
  3. 在需要使用Charts的文件中,#import "ProjectName-Bridging-Header.h",就可以使用Charts中的代码了

2.折线图

//初始化折线图
- (LineChartView *)lineChartView{
 if(!_lineChartView){
  _lineChartView = [[LineChartView alloc] initWithFrame:CGRectZero];
  [_lineChartView setExtraOffsetsWithLeft:15 top:0 right:15 bottom:10];//距离边缘的间隙
  _lineChartView.delegate = self;//设置代理
  _lineChartView.backgroundColor = [UIColor whiteColor];
  _lineChartView.noDataText = @"暂无此产品的价格趋势";
  _lineChartView.noDataFOnt= [UIFont systemFontOfSize:15];
  _lineChartView.noDataTextColor = HEXCOLOR(0x444444);
  _lineChartView.chartDescription.enabled = YES;
  _lineChartView.scaleYEnabled = NO;//取消Y轴缩放
  _lineChartView.scaleXEnabled = NO;//取消X轴缩放
  _lineChartView.doubleTapToZoomEnabled = NO;//取消双击缩放
  _lineChartView.dragEnabled = YES;//启用拖拽
  _lineChartView.dragDeceleratiOnEnabled= YES;//拖拽后是否有惯性效果
  _lineChartView.dragDeceleratiOnFrictionCoef= 0.9;//拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不明显
  //描述及图例样式
  [_lineChartView setDescriptionText:@""];
  _lineChartView.legend.enabled = NO;
  
  //设置左侧Y轴
  _lineChartView.rightAxis.enabled = YES;//绘制右边轴
  ChartYAxis *leftAxis = _lineChartView.leftAxis;//获取左边Y轴
  leftAxis.labelCount = 5;//Y轴label数量,数值不一定,如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均
  leftAxis.forceLabelsEnabled = NO;//不强制绘制指定数量的labe
  leftAxis.axisLineWidth = 0.6;  //设置Y轴线宽
  leftAxis.axisLineColor = [UIColor blackColor]; //设置Y轴颜色
  // leftAxis.axisMinValue = 0;//设置Y轴的最小值
  //leftAxis.axisMaxValue = 105;//设置Y轴的最大值
  leftAxis.inverted = NO;//是否将Y轴进行上下翻转
  leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色
  leftAxis.labelPosition = YAxisLabelPositionInsideChart;//label位置
  leftAxis.labelTextColor = [UIColor blackColor];//文字颜色
  leftAxis.labelFOnt= [UIFont systemFontOfSize:10.0f];//文字字体
  //leftAxis.valueFormatter = [[SymbolsValueFormatter alloc]init];//设置y轴的数据格式
  leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//设置虚线样式的网格线
  leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//网格线颜色
  leftAxis.gridAntialiasEnabled = YES;//开启抗锯齿
  
  //设置Z轴
  ChartYAxis *rightAxis = _lineChartView.rightAxis;//获取右边Z轴
  rightAxis.axisLineWidth = 0.6;
  rightAxis.axisLineColor = [UIColor blackColor];//Z轴颜色
  rightAxis.drawGridLinesEnabled = NO;
  rightAxis.drawLabelsEnabled = NO;
  
  //设置X轴
  ChartXAxis *xAxis = _lineChartView.xAxis;
  xAxis.valueFormatter = self;   //这里才是最最最最最最关键的代码
  xAxis.granularityEnabled = YES;//设置重复的值不显示
  xAxis.labelCount = 5;
  xAxis.spaceMin = 0;    //设置坐标轴额外的最小空间
  xAxis.forceLabelsEnabled = YES;
  xAxis.labelPosition = XAxisLabelPositionBottom;//设置x轴数据在底部
  xAxis.labelTextColor = [UIColor blackColor];//文字颜色
  xAxis.axisLineWidth = 0.6;
  xAxis.axisLineColor = [UIColor blackColor]; //X轴的颜色
  xAxis.gridLineDashLengths = @[@3.0f, @3.0f];//设置虚线样式的网格线
  xAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//网格线颜色
  xAxis.gridAntialiasEnabled = YES;//开启抗锯齿
  //_lineChartView.maxVisibleCount = 999;//设置能够显示的数据数量
  
  //设置浮层
  _lineChartView.drawMarkers = YES;
  ChartMarkerView * makerView = [[ChartMarkerView alloc]init];
  makerView.offset = CGPointMake(-self.subPriceView.frame.size.width,-self.subPriceView.frame.size.height/2);
  makerView.chartView = _lineChartView;
  _lineChartView.marker = makerView;
  [makerView addSubview:self.subPriceView];
 }
 return _lineChartView;
}
//折线图的数据源
- (LineChartData *)getLineData{
 
 if(self.priceTrendDataSource.count == 0) return nil;
 
 //X轴上面需要显示的数据
 NSMutableArray *xVals = [NSMutableArray array];
 
 //对应Y轴上面需要显示的数据,价格
 NSMutableArray *yVals = [NSMutableArray array];
 
 NSInteger index = 0;
 
 for (PriceTrendModel * model in self.priceTrendDataSource) {
  
  [xVals addObject:[NSString stringWithFormat:@"%@",model.trend_X]];
  
  ChartDataEntry *entry_Y = [[ChartDataEntry alloc] initWithX:index y:model.trend_Y];
  [yVals addObject:entry_Y];
  
  index ++;
 }
 LineChartDataSet *lineSet = [[LineChartDataSet alloc] initWithValues:yVals label:@""];
 lineSet.mode = LineChartModeCubicBezier;
 lineSet.lineWidth = 1.0f;
 lineSet.drawValuesEnabled = NO;
 lineSet.valueColors = @[[UIColor purpleColor]]; //折线上的数值的颜色
 [lineSet setColor:HEXCOLOR(0x24A5EA)]; //折线本身的颜色
 lineSet.drawSteppedEnabled = NO;//是否开启绘制阶梯样式的折线图
 lineSet.drawCirclesEnabled = NO;
 lineSet.drawFilledEnabled = NO;//是否填充颜色
 lineSet.circleRadius = 1.0f;
 lineSet.drawCircleHoleEnabled = NO;
 lineSet.circleHoleRadius = 0.0f;
 lineSet.circleHoleColor = [UIColor whiteColor];
 
 lineSet.highlightEnabled = YES;//选中拐点,是否开启高亮效果(显示十字线)
 //lineSet.highlightColor = HEXCOLOR(0xc83c23);//点击选中拐点的十字线的颜色
 lineSet.highlightColor = [HEXCOLOR(0x444444) colorWithAlphaComponent:0.5];//点击选中拐点的十字线的颜色
 lineSet.highlightLineWidth = 0.5;//十字线宽度
 //lineSet.highlightLineDashLengths = @[@5,@5]; //设置十字线的虚线宽度
 
 lineSet.valueFOnt= [UIFont systemFontOfSize:12];
 lineSet.axisDependency = AxisDependencyLeft;
 
 LineChartData *lineData = [[LineChartData alloc] initWithDataSet:lineSet];
 
 return lineData;
}

3.饼状图

//初始化饼状图
- (PieChartView *)pieChartView{
 if (!_pieChartView) {
  _pieChartView = [[PieChartView alloc] initWithFrame:CGRectZero];
  
  _pieChartView.backgroundColor = [UIColor whiteColor];
  
  //基本样式
  //[_pieChartView setExtraOffsetsWithLeft:30 top:10 right:30 bottom:10];//饼状图距离边缘的间隙
  
  [_pieChartView setExtraOffsetsWithLeft:0 top:0 right:0 bottom:0];//饼状图距离边缘的间隙
  
  _pieChartView.usePercentValuesEnabled = NO;//是否根据所提供的数据, 将显示数据转换为百分比格式
  _pieChartView.dragDeceleratiOnEnabled= YES;//拖拽饼状图后是否有惯性效果
  _pieChartView.drawSliceTextEnabled = NO;//是否显示区块文本
  
  //空心样式
  _pieChartView.drawHoleEnabled = YES;//饼状图是否是空心
  _pieChartView.holeRadiusPercent = 0.8;//空心半径占比
  _pieChartView.holeColor = [UIColor clearColor];//空心颜色
  _pieChartView.transparentCircleRadiusPercent = 0.52;//半透明空心半径占比
  _pieChartView.transparentCircleColor = [UIColor colorWithRed:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];//半透明空心的颜色
  
  //设置空心文字
  
  if (_pieChartView.isDrawHoleEnabled == YES) {
   _pieChartView.drawCenterTextEnabled = YES;//是否显示中间文字
   //普通文本
   //_pieChartView.centerText = @"资产";//中间文字
   //富文本
   NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"收支详情"];
   [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:18],
          NSForegroundColorAttributeName: HEXCOLOR(0x444444)}
        range:NSMakeRange(0, centerText.length)];
   _pieChartView.centerAttributedText = centerText;
  }
  
  //设置饼状图描述
  _pieChartView.descriptiOnText= @"";
  //_pieChartView.descriptiOnFont= [UIFont systemFontOfSize:10];
  //_pieChartView.descriptiOnTextColor= [UIColor grayColor];
  
  //设置图例样式
  _pieChartView.legend.maxSizePercent = 0;//图例在饼状图中的大小占比, 这会影响图例的宽高
  _pieChartView.legend.formToTextSpace = 5;//文本间隔
  _pieChartView.legend.yEntrySpace = 12;//10;
  _pieChartView.legend.xEntrySpace = 15;
  _pieChartView.legend.fOnt= [UIFont systemFontOfSize:10];//字体大小
  _pieChartView.legend.textColor = [UIColor grayColor];//字体颜色
  _pieChartView.legend.position = ChartLegendPositionBelowChartCenter;//图例在饼状图中的位置
  _pieChartView.legend.form = ChartLegendFormCircle;//图示样式: 方形、线条、圆形
  _pieChartView.legend.formSize = 0;//图示大小
 }
 return _pieChartView;
}
//饼状图的数据源
- (PieChartData *)getPieData{
 
 //每个区块的金额数
 NSMutableArray * mOneyArray= [NSMutableArray arrayWithArray:@[@33.33,@66.66]];
 
 //每个区块的名称或描述
 //NSArray * xVals = @[@"充值诚意金",@"充值会员费",@"赠送诚意金",@"赠送会员费",@"被冻结资金"];
// NSMutableArray * xVals = [NSMutableArray array];
 
 //每个区块的颜色
 NSMutableArray *colors = [[NSMutableArray alloc] init];
 
 switch (_forecastType) {
  case ForecastPriceTypeUp:{
   [colors addObject:HEXCOLOR(0xFF1F32)];
   [moneyArray removeAllObjects];
   [moneyArray addObject:@(self.forecastModel.upRate)];
   [moneyArray addObject:@(1 - self.forecastModel.upRate)];
   break;
  }
  case ForecastPriceTypeDown:{
   [colors addObject:HEXCOLOR(0x5FD954)];
   [moneyArray removeAllObjects];
   [moneyArray addObject:@(self.forecastModel.downRate)];
   [moneyArray addObject:@(1 - self.forecastModel.downRate)];
   break;
  }
  case ForecastPriceTypeLevel:{
   [colors addObject:HEXCOLOR(0x00D6F6)];
   [moneyArray removeAllObjects];
   [moneyArray addObject:@(self.forecastModel.rate)];
   [moneyArray addObject:@(1 - self.forecastModel.rate)];
   break;
  }
  default:
   break;
 }
 
 [colors addObject:HEXCOLOR(0xF2F2F2)];
 
 //每个区块的数据
 NSMutableArray *yVals = [[NSMutableArray alloc] init];
 
 for (int i = 0; i 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。


推荐阅读
author-avatar
mobiledu2502921963
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有