Charts 3.0.1集成

一、下載Charts后可以到里面的內容

將下載后解壓后的整個文件夾復制到工程里

但是只導入

工程Charts.xcodeproj-->

二、配置

三、橋接

如果刪除了橋接文件,需要重新創建的不僅僅要刪除橋接,還要刪除路徑

其他配置

上面這兩個選項一般都是默認設置好的,不需要修改,以防萬一可以看下。

刪除Bridging.swift里的

importFoundation

最后在用到的地方調入這個兩個文件

三、如何使用(很多地方都有變動,特別是X軸的設置)

3.1餅圖的創建和數據

- (PieChartView *)createPieChart

{

PieChartView * pieView = [[PieChartView alloc]initWithFrame:CGRectMake(0,0, kWidth,CGRectGetHeight(_contentView.frame))];

[pieViewsetExtraOffsetsWithLeft:5top:5right:5bottom:5];//餅狀圖距離邊緣的間隙pieView.usePercentValuesEnabled =YES;//是否根據所提供的數據, 將顯示數據轉換為百分比格式

pieView.dragDecelerationEnabled =YES;//拖拽餅狀圖后是否有慣性效果pieView.drawSliceTextEnabled =NO;//是否顯示區塊文本

pieView.drawHoleEnabled =YES;//餅狀圖是否是空心pieView.noDataText =@"暫無數據";

pieView.holeRadiusPercent =0.5;//空心半徑占比pieView.holeColor = [UIColorclearColor];//空心顏色pieView.transparentCircleRadiusPercent =0.52;//半透明空心半徑占比pieView.transparentCircleColor = [UIColorcolorWithRed:210/255.0green:145/255.0blue:165/255.0alpha:0.3];//半透明空心的顏色pieView.descriptionText =@"";

pieView.descriptionTextAlign =NSTextAlignmentLeft;

pieView.descriptionFont = [UIFontboldSystemFontOfSize:15];

pieView.descriptionTextColor = [UIColordarkGrayColor];

pieView.centerText =@"餅圖";//圓中心字[pieViewanimateWithXAxisDuration:1.1easingOption:ChartEasingOptionEaseOutBack];

ChartLegend *legend = pieView.legend;

legend.enabled =YES;

legend.maxSizePercent =1;//圖例在餅狀圖中的大小占比, 這會影響圖例的寬高legend.formToTextSpace =5;//文本間隔

legend.font = [UIFontsystemFontOfSize:13];//字體大小legend.textColor = [UIColorgrayColor];//字體顏色

legend.position = ChartLegendPositionRightOfChartCenter ;//圖例在餅狀圖中的位置legend.form = ChartLegendFormSquare;//圖示樣式: 方形、線條、圓形legend.formSize =8;//圖示大小returnpieView;

}

- (PieChartData *)getPieChartData

{NSMutableArray*values = [[NSMutableArrayalloc] init];for(inti =0; i <5; i++) {NSString* str = [NSStringstringWithFormat:@"測試%d",i];

[valuesaddObject:[[PieChartDataEntry alloc]initWithValue:0.2label:str]];

}

PieChartDataSet *dataSet = [[PieChartDataSet alloc]initWithValues:valueslabel:@""];

dataSet.sliceSpace =1;

dataSet.valueTextColor = [UIColordarkGrayColor];

dataSet.valueLinePart1OffsetPercentage =0.85;//折線中第一段起始位置相對于區塊的偏移量, 數值越大, 折線距離區塊越遠

dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名稱位置dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//數據位置dataSet.drawValuesEnabled =YES;//是否繪制百分比dataSet.valueLinePart1Length =0.45;//折線中第一段長度占比dataSet.valueLinePart2Length =0.3;//折線中第二段長度最大占比

dataSet.valueLineWidth =1;//折線的粗細dataSet.valueTextColor = [UIColorbrownColor];

dataSet.valueLineColor = [UIColorbrownColor];//折線顏色NSMutableArray*colors = [[NSMutableArrayalloc] init];

[colorsaddObjectsFromArray:ChartColorTemplates.vordiplom];

[colorsaddObjectsFromArray:ChartColorTemplates.joyful];

[colorsaddObjectsFromArray:ChartColorTemplates.colorful];

[colorsaddObjectsFromArray:ChartColorTemplates.liberty];

[colorsaddObjectsFromArray:ChartColorTemplates.pastel];

[colorsaddObject:[UIColorcolorWithRed:51/255.f green:181/255.fblue:229/255.falpha:1.f]];

dataSet.colors = colors;

PieChartData *datas = [[PieChartData alloc]initWithDataSet:dataSet];NSNumberFormatter*pFormatter = [[NSNumberFormatteralloc] init];

pFormatter.numberStyle =NSNumberFormatterPercentStyle;

pFormatter.maximumFractionDigits =1;

pFormatter.multiplier = @1.f;

pFormatter.percentSymbol =@" %";

[datassetValueFormatter:[[ChartDefaultValueFormatter alloc]initWithFormatter:pFormatter]];

[datassetValueFont:[UIFontfontWithName:@"HelveticaNeue-Light"size:11.f]];returndatas;

}

3.2柱狀圖的創建和數據

- (BarChartView *)createBarChart

{//柱狀圖BarChartView * barChartView = [[BarChartView alloc] initWithFrame:CGRectMake(0,0, kWidth,CGRectGetHeight(_contentView.frame))];//基本樣式barChartView.backgroundColor = [UIColorwhiteColor];

barChartView.noDataText =@"暫無數據";//沒有數據時的文字提示barChartView.drawValueAboveBarEnabled =YES;//數值顯示在柱形的上面還是下面barChartView.drawBarShadowEnabled =NO;//是否繪制柱形的陰影背景//barChartView的交互設置barChartView.scaleYEnabled =NO;//取消Y軸縮放barChartView.doubleTapToZoomEnabled =YES;//取消雙擊縮放barChartView.dragEnabled =YES;//啟用拖拽圖表barChartView.dragDecelerationEnabled =YES;//拖拽后是否有慣性效果barChartView.dragDecelerationFrictionCoef =0.9;//拖拽后慣性效果的摩擦系數(0~1),數值越小,慣性越不明顯

barChartView.leftAxis.axisMaxValue =10;//設置Y軸的最大值//X軸樣式ChartXAxis *xAxis = barChartView.xAxis;

xAxis.axisLineWidth =1;//設置X軸線寬xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置,默認是顯示在上面的xAxis.drawGridLinesEnabled =NO;//不繪制網格線

xAxis.labelTextColor = [UIColorbrownColor];//label文字顏色xAxis.shouldGroupAccessibilityChildren =NO;

xAxis.granularity =1.0;//保證放大的時候X軸就一個值//左邊Y軸ChartYAxis *leftAxis = barChartView.leftAxis;

barChartView.rightAxis.enabled =NO;//不繪制右邊軸

leftAxis.forceLabelsEnabled =NO;//不強制繪制制定數量的

labelleftAxis.axisMinValue =0;//設置Y軸的最小值

leftAxis.inverted =NO;//是否將Y軸進行上下翻轉

leftAxis.axisLineWidth =0.5;//Y軸線寬

leftAxis.axisLineColor = [UIColorblackColor];//Y軸顏色leftAxis.labelCount =5;

leftAxis.forceLabelsEnabled =NO;//設置Y軸上標簽的樣式

leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置leftAxis.labelTextColor = [UIColorbrownColor];//文字顏色

leftAxis.labelFont = [UIFontsystemFontOfSize:10.0f];//文字字體體//設置Y軸上網格線的樣式

leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設置虛線樣式的網格線leftAxis.gridColor = [UIColorcolorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網格線顏色

leftAxis.gridAntialiasEnabled =YES;//開啟抗鋸齒/*

在Y軸上添加限制線

ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制線"];

limitLine.lineWidth = 2;

limitLine.lineColor = [UIColor greenColor];

limitLine.lineDashLengths = @[@5.0f, @5.0f];//虛線樣式

limitLine.labelPosition = ChartLimitLabelPositionRightTop;//位置

[leftAxis addLimitLine:limitLine];//添加到Y軸上

leftAxis.drawLimitLinesBehindDataEnabled = YES;//設置限制線繪制在柱形圖的后面

*/barChartView.legend.enabled =NO;//不顯示圖例說明

barChartView.descriptionText =@"";returnbarChartView;

}

- (NSString*)stringForValue:(double)value axis:(ChartAxisBase *)axis

{//X軸上面需要顯示的數據return[NSStringstringWithFormat:@"測試%d",(int)value];

}

- (BarChartData *)getBarChartData

{//對應Y軸上面需要顯示的數據NSMutableArray*yVals = [[NSMutableArrayalloc] init];for(inti =0; i <5; i++) {

BarChartDataEntry *entry = [[BarChartDataEntry alloc]initWithX:i yValues:@[@6] label:@""];

[yVals addObject:entry];

}//創建BarChartDataSet對象,其中包含有Y軸數據信息,以及可以設置柱形樣式BarChartDataSet * set1 = [[BarChartDataSet alloc]initWithValues:yVals];

set1.drawValuesEnabled =YES;//是否在柱形圖上面顯示數值

set1.highlightEnabled =NO;//點擊選中柱形圖是否有高亮效果,(雙擊空白處取消選中)

[set1 setColors:ChartColorTemplates.material];//設置柱形圖顏色//將BarChartDataSet對象放入數組中NSMutableArray* dataSets = [[NSMutableArrayalloc] init];

[dataSets addObject:set1];//創建BarChartData對象, 此對象就是barChartView需要最終數據對象

BarChartData * datas = [[BarChartData alloc] initWithDataSet:set1];

[datas setValueFont:[UIFontfontWithName:@"HelveticaNeue-Light"size:10.f]];//文字字體[datas setValueTextColor:[UIColororangeColor]];//文字顏色returndatas;

}

X軸的設置和以前不一樣了,是放到一個代理方法里面了。

3.3折線圖圖 的創建和數據

- (LineChartView *)createLineChart{ LineChartView * lineChartView = [[LineChartView alloc]initWithFrame:CGRectMake(0,0, kWidth,CGRectGetHeight(_contentView.frame))];?

?lineChartView.noDataText =@"暫無數據";

//設置交互

lineChartView.scaleYEnabled =NO;//取消Y軸縮放lineChartView.doubleTapToZoomEnabled =YES;//取消雙擊縮放lineChartView.dragEnabled =YES;//啟用拖拽圖標lineChartView.dragDecelerationEnabled =YES;//拖拽后是否有慣性效果lineChartView.dragDecelerationFrictionCoef =0.9;//拖拽后慣性效果的摩擦系數(0~1),數值越小,慣性越不明顯

lineChartView.descriptionText =@"";

?lineChartView.xAxis.granularity =1.0;//保證放大的時候X軸就一個值lineChartView.legend.enabled =NO;//是否顯示圖例lineChartView.leftAxis.axisMaxValue =5;//設置Y軸的最大值//設置X軸ChartXAxis *xAxis = lineChartView.xAxis; xAxis.axisLineWidth =1;//設置X軸線寬

xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置,默認是顯示在上面的xAxis.drawGridLinesEnabled =NO;//不繪制網格線

xAxis.spaceMax =0;//設置label間隔

xAxis.labelCount =12; xAxis.axisLineColor = [UIColorlightGrayColor]; xAxis.labelTextColor = [UIColordarkGrayColor];//label文字顏色//設置Y軸lineChartView.rightAxis.enabled =NO;//不繪制右邊軸

ChartYAxis *leftAxis = lineChartView.leftAxis;//獲取左邊Y軸

leftAxis.labelCount =5;//Y軸label數量,數值不一定,如果forceLabelsEnabled等于YES, 則強制繪制制定數量的label, 但是可能不平均

leftAxis.forceLabelsEnabled =NO;//不強制繪制指定數量的

labelleftAxis.axisMinValue =0;//設置Y軸的最小值

leftAxis.inverted =NO;//是否將Y軸進行上下翻轉

leftAxis.axisLineWidth =1;//Y軸線寬

leftAxis.axisLineColor = [UIColorlightGrayColor];//Y軸顏色

leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置leftAxis.labelTextColor = [UIColordarkGrayColor];//文字顏色

leftAxis.labelFont = [UIFontsystemFontOfSize:10.0f];//文字字體//設置網格leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設置虛線樣式的網格線leftAxis.gridColor = [UIColorcolorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網格線顏色

leftAxis.gridAntialiasEnabled =YES;//開啟抗鋸齒

returnlineChartView;

}

- (NSDictionary*)getLineChartData{

NSMutableArray* lines = [NSMutableArrayarray];//多條折線(本模塊就一條)

//設置X軸數據

NSMutableArray* xValues = [NSMutableArrayarray];for(inti =0; i <5; i++)

?{

?????[xValues addObject:[NSStringstringWithFormat:@"%d月",i+1]]; }//設置Y軸數據 ? ? ? ? ? NSArray* numArr = @[@5,@2,@4,@3,@2];

NSMutableArray* yValues = [NSMutableArrayarray];

for(inti =0; i <5; i++)?

{

NSIntegernum = [numArr[i] integerValue];?

?ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:num];

?[yValues addObject:entry];?

?}?

?LineChartDataSet * dataSet = [[LineChartDataSet alloc] initWithValues:yValues label:@""];

?dataSet.circleRadius =4;?

?dataSet.drawCircleHoleEnabled =YES;//描點是否空心

dataSet.circleHoleRadius =3;//描點空心半徑

dataSet.drawFilledEnabled =YES;//是否繪制線填充色

dataSet.fillColor = [UIColororangeColor];//繪制線填充色

dataSet.circleColors = @[[UIColorwhiteColor]];//圓點顏色

dataSet.circleHoleColor = [UIColororangeColor];//圓點空心顏色

[dataSet setColor:[UIColororangeColor]];?

?dataSet.mode = LineChartModeLinear;//折線樣式

dataSet.drawValuesEnabled =NO;

?[lines addObject:dataSet];

?LineChartData *data = [[LineChartData alloc] initWithDataSets:lines];

return@{@"XValue":xValues,@"Data":data};}

X軸設置通過這個方法

lineCharView.xAxis.valueFormatter =[[ChartIndexAxisValueFormatter alloc] initWithValues:[dic objectForKey:@"XValue"]];//設置X軸

lineCharView.data = [dic objectForKey:@"Data"];

Demo鏈接:https://pan.baidu.com/s/1mirDFgk

提取:qb4x

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容

  • 最近公司項目中要加一個折線圖的需求因為是金融項目考慮到后期可能會有大量的餅狀和折線圖的需求,仔細搜索一番覺得用個成...
    約翰丶碼農閱讀 19,200評論 10 24
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,140評論 5 13
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 轉載;http://www.lxweimin.com/p/bb934ca504d1 1. CAShapeLayer ...
    F麥子閱讀 1,151評論 0 0
  • 一、實驗目的 學習使用 weka 中的常用分類器,完成數據分類任務。 二、實驗內容 了解 weka 中 explo...
    yigoh閱讀 8,622評論 5 4