前言
iOS端畫圖表的庫很多,今天給大家介紹一款很有名的庫 - Charts
借助Charts,我們可以畫出很精美的折線圖、柱狀圖、餅狀圖、K線、雷達、混合圖表等等
1.集成Charts
這里只是做一個簡略說明,具體的可以參考官方的集成方法 Charts
如果使用的Swift開發,可以直接import Charts
如果使用OC開發,則需要混編,建立ProjectName-Bridging-Header.h橋接文件,這里詳細介紹混編開發
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 < 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;//是否繪制顯示數據 dataSet.colors = colors;//區塊顏色 dataSet.sliceSpace = 3;//相鄰區塊之間的間距 dataSet.selectionShift = 2;//選中區塊時, 放大的半徑 dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名稱位置 dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//數據位置 //數據與區塊之間的用于指示的折線樣式 dataSet.valueLinePart1OffsetPercentage = 0.85;//折線中第一段起始位置相對于區塊的偏移量, 數值越大, 折線距離區塊越遠 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;//小數位數 formatter.multiplier = @1.f; formatter.paddingPosition = kCFNumberFormatterPadBeforeSuffix; formatter.positiveSuffix = @"元"; //[data setValueFormatter:formatter];//設置顯示數據格式 [data setValueTextColor:[UIColor brownColor]]; [data setValueFont:[UIFont systemFontOfSize:10]]; return data;}
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答