iOS畫出精美的圖表方法示例

更新時間：2018年08月15日 10:34:20 作者：冰風v落葉

這篇文章主要給大家介紹了關(guān)于iOS如何畫出精美的圖表的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

iOS端畫圖表的庫很多,今天給大家介紹一款很有名的庫 - Charts

借助Charts,我們可以畫出很精美的折線圖、柱狀圖、餅狀圖、K線、雷達、混合圖表等等

github地址 (本地下載)

1.集成Charts

這里只是做一個簡略說明,具體的可以參考官方的集成方法 Charts

如果使用的Swift開發(fā),可以直接import Charts

如果使用OC開發(fā),則需要混編,建立ProjectName-Bridging-Header.h橋接文件,這里詳細介紹混編開發(fā)

利用CocoaPods,在Podfile文件中寫入 : pod 'Charts',然后pod install
在橋接文件中@import Charts;
在需要使用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;//設(shè)置代理
  _lineChartView.backgroundColor = [UIColor whiteColor];
  _lineChartView.noDataText = @"暫無此產(chǎn)品的價格趨勢";
  _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;//拖拽后慣性效果的摩擦系數(shù)(0~1)，數(shù)值越小，慣性越不明顯
  //描述及圖例樣式
  [_lineChartView setDescriptionText:@""];
  _lineChartView.legend.enabled = NO;
  
  //設(shè)置左側(cè)Y軸
  _lineChartView.rightAxis.enabled = YES;//繪制右邊軸
  ChartYAxis *leftAxis = _lineChartView.leftAxis;//獲取左邊Y軸
  leftAxis.labelCount = 5;//Y軸label數(shù)量，數(shù)值不一定，如果forceLabelsEnabled等于YES, 則強制繪制制定數(shù)量的label, 但是可能不平均
  leftAxis.forceLabelsEnabled = NO;//不強制繪制指定數(shù)量的labe
  leftAxis.axisLineWidth = 0.6;  //設(shè)置Y軸線寬
  leftAxis.axisLineColor = [UIColor blackColor]; //設(shè)置Y軸顏色
  // leftAxis.axisMinValue = 0;//設(shè)置Y軸的最小值
  //leftAxis.axisMaxValue = 105;//設(shè)置Y軸的最大值
  leftAxis.inverted = NO;//是否將Y軸進行上下翻轉(zhuǎn)
  leftAxis.axisLineColor = [UIColor blackColor];//Y軸顏色
  leftAxis.labelPosition = YAxisLabelPositionInsideChart;//label位置
  leftAxis.labelTextColor = [UIColor blackColor];//文字顏色
  leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字體
  //leftAxis.valueFormatter = [[SymbolsValueFormatter alloc]init];//設(shè)置y軸的數(shù)據(jù)格式
  leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線
  leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色
  leftAxis.gridAntialiasEnabled = YES;//開啟抗鋸齒
  
  //設(shè)置Z軸
  ChartYAxis *rightAxis = _lineChartView.rightAxis;//獲取右邊Z軸
  rightAxis.axisLineWidth = 0.6;
  rightAxis.axisLineColor = [UIColor blackColor];//Z軸顏色
  rightAxis.drawGridLinesEnabled = NO;
  rightAxis.drawLabelsEnabled = NO;
  
  //設(shè)置X軸
  ChartXAxis *xAxis = _lineChartView.xAxis;
  xAxis.valueFormatter = self;   //這里才是最最最最最最關(guān)鍵的代碼
  xAxis.granularityEnabled = YES;//設(shè)置重復的值不顯示
  xAxis.labelCount = 5;
  xAxis.spaceMin = 0;    //設(shè)置坐標軸額外的最小空間
  xAxis.forceLabelsEnabled = YES;
  xAxis.labelPosition = XAxisLabelPositionBottom;//設(shè)置x軸數(shù)據(jù)在底部
  xAxis.labelTextColor = [UIColor blackColor];//文字顏色
  xAxis.axisLineWidth = 0.6;
  xAxis.axisLineColor = [UIColor blackColor]; //X軸的顏色
  xAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線
  xAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色
  xAxis.gridAntialiasEnabled = YES;//開啟抗鋸齒
  //_lineChartView.maxVisibleCount = 999;//設(shè)置能夠顯示的數(shù)據(jù)數(shù)量
  
  //設(shè)置浮層
  _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;
}

//折線圖的數(shù)據(jù)源
- (LineChartData *)getLineData{
 
 if(self.priceTrendDataSource.count == 0) return nil;
 
 //X軸上面需要顯示的數(shù)據(jù)
 NSMutableArray *xVals = [NSMutableArray array];
 
 //對應(yīng)Y軸上面需要顯示的數(shù)據(jù),價格
 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]]; //折線上的數(shù)值的顏色
 [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]; //設(shè)置十字線的虛線寬度
 
 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;//是否根據(jù)所提供的數(shù)據(jù), 將顯示數(shù)據(jù)轉(zhuǎn)換為百分比格式
  _pieChartView.dragDecelerationEnabled = YES;//拖拽餅狀圖后是否有慣性效果
  _pieChartView.drawSliceTextEnabled = NO;//是否顯示區(qū)塊文本
  
  //空心樣式
  _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];//半透明空心的顏色
  
  //設(shè)置空心文字
  
  if (_pieChartView.isDrawHoleEnabled == YES) {
   _pieChartView.drawCenterTextEnabled = YES;//是否顯示中間文字
   //普通文本
   //_pieChartView.centerText = @"資產(chǎn)";//中間文字
   //富文本
   NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"收支詳情"];
   [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:18],
          NSForegroundColorAttributeName: HEXCOLOR(0x444444)}
        range:NSMakeRange(0, centerText.length)];
   _pieChartView.centerAttributedText = centerText;
  }
  
  //設(shè)置餅狀圖描述
  _pieChartView.descriptionText = @"";
  //_pieChartView.descriptionFont = [UIFont systemFontOfSize:10];
  //_pieChartView.descriptionTextColor = [UIColor grayColor];
  
  //設(shè)置圖例樣式
  _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;
}

//餅狀圖的數(shù)據(jù)源
- (PieChartData *)getPieData{
 
 //每個區(qū)塊的金額數(shù)
 NSMutableArray * moneyArray = [NSMutableArray arrayWithArray:@[@33.33,@66.66]];
 
 //每個區(qū)塊的名稱或描述
 //NSArray * xVals = @[@"充值誠意金",@"充值會員費",@"贈送誠意金",@"贈送會員費",@"被凍結(jié)資金"];
// NSMutableArray * xVals = [NSMutableArray array];
 
 //每個區(qū)塊的顏色
 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)];
 
 //每個區(qū)塊的數(shù)據(jù)
 NSMutableArray *yVals = [[NSMutableArray alloc] init];
 
 for (int i = 0; i < moneyArray.count; i++) {
  
  double randomVal = [moneyArray[i] doubleValue];
  
  //BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithValue:randomVal xIndex:i];
  
  //ChartDataEntry * entry = [[ChartDataEntry alloc] initWithValue:randomVal xIndex:i];
  
  ChartDataEntry * entry = [[ChartDataEntry alloc] initWithX:i y:randomVal];
  
  [yVals addObject:entry];
 }
 
 //dataSet
 //PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithYVals:yVals label:@""];
 PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithValues:yVals label:@""];
 dataSet.drawValuesEnabled = NO;//是否繪制顯示數(shù)據(jù)
 dataSet.colors = colors;//區(qū)塊顏色
 dataSet.sliceSpace = 3;//相鄰區(qū)塊之間的間距
 dataSet.selectionShift = 2;//選中區(qū)塊時, 放大的半徑
 dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名稱位置
 dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//數(shù)據(jù)位置
 //數(shù)據(jù)與區(qū)塊之間的用于指示的折線樣式
 dataSet.valueLinePart1OffsetPercentage = 0.85;//折線中第一段起始位置相對于區(qū)塊的偏移量, 數(shù)值越大, 折線距離區(qū)塊越遠
 dataSet.valueLinePart1Length = 0.5;//折線中第一段長度占比
 dataSet.valueLinePart2Length = 0.4;//折線中第二段長度最大占比
 dataSet.valueLineWidth = 1;//折線的粗細
 dataSet.valueLineColor = [UIColor brownColor];//折線顏色
 dataSet.valueLineVariableLength = YES;
 
 //data
 //PieChartData *data = [[PieChartData alloc] initWithXVals:xVals dataSet:dataSet];
 PieChartData *data = [[PieChartData alloc] initWithDataSet:dataSet];
 NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
 formatter.numberStyle = kCFNumberFormatterDecimalStyle;//NSNumberFormatterPercentStyle;
 [formatter setPositiveFormat:@"###,##0.00;"];
 formatter.maximumFractionDigits = 2;//小數(shù)位數(shù)
 formatter.multiplier = @1.f;
 formatter.paddingPosition = kCFNumberFormatterPadBeforeSuffix;
 formatter.positiveSuffix = @"元";
 //[data setValueFormatter:formatter];//設(shè)置顯示數(shù)據(jù)格式
 [data setValueTextColor:[UIColor brownColor]];
 [data setValueFont:[UIFont systemFontOfSize:10]];
 
 return data;
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: