本篇文章給大家分享的是有關(guān)iOS中怎么實(shí)現(xiàn)一個(gè)精美的圖表，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)新津縣,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575
1.集成Charts
這里只是做一個(gè)簡(jiǎn)略說(shuō)明,具體的可以參考官方的集成方法 Charts
如果使用的Swift開(kāi)發(fā),可以直接import Charts
如果使用OC開(kāi)發(fā),則需要混編,建立ProjectName-Bridging-Header.h橋接文件,這里詳細(xì)介紹混編開(kāi)發(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 = @"暫無(wú)此產(chǎn)品的價(jià)格趨勢(shì)";
_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, 則強(qiáng)制繪制制定數(shù)量的label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO;//不強(qiáng)制繪制指定數(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軸進(jìn)行上下翻轉(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;//開(kāi)啟抗鋸齒
//設(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è)置重復(fù)的值不顯示
xAxis.labelCount = 5;
xAxis.spaceMin = 0; //設(shè)置坐標(biāo)軸額外的最小空間
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;//開(kāi)啟抗鋸齒
//_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];
//對(duì)應(yīng)Y軸上面需要顯示的數(shù)據(jù),價(jià)格
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;//是否開(kāi)啟繪制階梯樣式的折線圖
lineSet.drawCirclesEnabled = NO;
lineSet.drawFilledEnabled = NO;//是否填充顏色
lineSet.circleRadius = 1.0f;
lineSet.drawCircleHoleEnabled = NO;
lineSet.circleHoleRadius = 0.0f;
lineSet.circleHoleColor = [UIColor whiteColor];
lineSet.highlightEnabled = YES;//選中拐點(diǎn),是否開(kāi)啟高亮效果(顯示十字線)
//lineSet.highlightColor = HEXCOLOR(0xc83c23);//點(diǎn)擊選中拐點(diǎn)的十字線的顏色
lineSet.highlightColor = [HEXCOLOR(0x444444) colorWithAlphaComponent:0.5];//點(diǎn)擊選中拐點(diǎn)的十字線的顏色
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;//圖例在餅狀圖中的大小占比, 這會(huì)影響圖例的寬高
_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{
//每個(gè)區(qū)塊的金額數(shù)
NSMutableArray * moneyArray = [NSMutableArray arrayWithArray:@[@33.33,@66.66]];
//每個(gè)區(qū)塊的名稱或描述
//NSArray * xVals = @[@"充值誠(chéng)意金",@"充值會(huì)員費(fèi)",@"贈(zèng)送誠(chéng)意金",@"贈(zèng)送會(huì)員費(fèi)",@"被凍結(jié)資金"];
// NSMutableArray * xVals = [NSMutableArray array];
//每個(gè)區(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)];
//每個(gè)區(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ū)塊時(shí), 放大的半徑
dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名稱位置
dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//數(shù)據(jù)位置
//數(shù)據(jù)與區(qū)塊之間的用于指示的折線樣式
dataSet.valueLinePart1OffsetPercentage = 0.85;//折線中第一段起始位置相對(duì)于區(qū)塊的偏移量, 數(shù)值越大, 折線距離區(qū)塊越遠(yuǎn)
dataSet.valueLinePart1Length = 0.5;//折線中第一段長(zhǎng)度占比
dataSet.valueLinePart2Length = 0.4;//折線中第二段長(zhǎng)度最大占比
dataSet.valueLineWidth = 1;//折線的粗細(xì)
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;
}以上就是iOS中怎么實(shí)現(xiàn)一個(gè)精美的圖表，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
