iOS-Charts--餅狀形數(shù)據(jù)分析

效果圖先上:

前言:

? ? ? ? 需求是要出一個數(shù)據(jù)分析的餅狀形數(shù)據(jù)分析肝谭,然后找了N多demo。最后發(fā)現(xiàn)charts的效果比其他的都要更強勢一些赖晶,更優(yōu)美一些俄占,所以就選擇了這個框架 ?Charts的git地址鏈接

感受:

? ? ? ? 這玩意是個折磨人的小妖精,中間反復(fù)就不多提了直接說問題和注意事項:

? ? ? ? ? ? ? ? xcode10.0 下操作

第一步:集成charts葡缰,這里放上:參考地址鏈接亏掀,遇到問題的再補充一下


這里要提一下目錄千萬不要錯了,如果錯了就gg

然后繼續(xù)

? ??

這里和參考文章一樣

因為項目是OC泛释,而Charts是swift寫的滤愕,所以要橋接文件

這個swift文件的名字隨便取一個


在橋接文件里面寫上 ?@importCharts;


第二步:配置搞好了那么就開始寫代碼

? ? 在你所需使用的vc里導(dǎo)入鏈接文件

寫屬性

#define BgColor [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1]#define kScreenWidth [UIScreen mainScreen].bounds.size.width#define kScreenHeight [UIScreen mainScreen].bounds.size.height

@property (nonatomic, strong) PieChartView *pieChartView;

@property (nonatomic, strong) PieChartData *data;

設(shè)置餅狀圖

-(void)creasePieChartView{

? ? self.pieChartView = [[PieChartView alloc] init];

? ? self.pieChartView.backgroundColor = BgColor;

? ? [self.view addSubview:self.pieChartView];

? ? [self.pieChartView mas_makeConstraints:^(MASConstraintMaker *make) {

? ? ? ? make.size.mas_equalTo(CGSizeMake(kScreenWidth, 200));

? ? ? ? make.top.equalTo(104);

? ? ? ? make.left.equalTo(0);

? ? }];

? ? [self.pieChartView setExtraOffsetsWithLeft:5 top:10 right:70 bottom:5];//餅狀圖距離邊緣的間隙

? ? self.pieChartView.usePercentValuesEnabled = YES;//是否根據(jù)所提供的數(shù)據(jù), 將顯示數(shù)據(jù)轉(zhuǎn)換為百分比格式

? ? self.pieChartView.dragDecelerationEnabled = YES;//拖拽餅狀圖后是否有慣性效果

? ? self.pieChartView.drawSlicesUnderHoleEnabled= NO;//

? ? self.pieChartView.chartDescription.enabled = NO;//餅狀圖描述

? ? self.pieChartView.drawHoleEnabled = YES;//餅狀圖是否是空心

? ? self.pieChartView.holeRadiusPercent = 0.5;//空心半徑占比

? ? self.pieChartView.holeColor = [UIColor grayColor];//空心顏色

? ? self.pieChartView.transparentCircleRadiusPercent = 0.55;//半透明空心半徑占比

? ? self.pieChartView.transparentCircleColor = [UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:0.3];//半透明空心的顏色

? ? if (self.pieChartView.isDrawHoleEnabled == YES) {

? ? ? ? self.pieChartView.drawCenterTextEnabled = YES;//是否顯示中間文字

? ? ? ? //普通文本

?? ? ? ? self.pieChartView.centerText = @"數(shù)據(jù)分析";//中間文字

? ? ? ? //富文本

//? ? ? ? NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"餅狀圖bbb\n餅狀圖aaa"];

//? ? ? ? [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16],

//? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? NSForegroundColorAttributeName: [UIColor orangeColor]}

//? ? ? ? ? ? ? ? ? ? ? ? ? ? range:NSMakeRange(0, centerText.length)];

//? ? ? ? self.pieChartView.centerAttributedText = centerText;

? ? }

? ? self.pieChartView.legend.maxSizePercent = 1;//圖例在餅狀圖中的大小占比, 這會影響圖例的寬高

? ? self.pieChartView.legend.formToTextSpace = 5;//文本間隔

? ? self.pieChartView.legend.font = [UIFont systemFontOfSize:10];//字體大小

? ? self.pieChartView.legend.textColor = [UIColor grayColor];//字體顏色

? ? // self.pieChartView.legend.position = ChartLegendPositionBelowChartCenter;//圖例在餅狀圖中的位置

? ? self.pieChartView.legend.horizontalAlignment = ChartLegendHorizontalAlignmentRight;

? ? self.pieChartView.legend.verticalAlignment = ChartLegendVerticalAlignmentTop;

? ? self.pieChartView.legend.orientation = ChartLegendOrientationVertical;

? ? self.pieChartView.legend.form = ChartLegendFormCircle;//圖示樣式: 方形、線條怜校、圓形

? ? self.pieChartView.legend.formSize = 8;//圖示大小

? ? [self.pieChartView setRotationEnabled:true];//禁止拖拽

? ? [selfsetData];

}


最后設(shè)置給餅狀圖設(shè)置數(shù)據(jù)

-(PieChartData*)setData{

? ? //每個區(qū)塊的數(shù)據(jù)

? ? //每個區(qū)塊的名稱或描述

? ? NSArray *arr =@[@"12.3",@"10",@"12.7",@"25.6",@"24.4"]; //[[NSMutableArray alloc]init];

? ? NSArray *nameArr = @[@"通碼業(yè)務(wù)",@"銀行充值",@"手機充值",@"Q幣充值",@"包裹代收"];//[[NSMutableArray alloc]init];


//? ? for (pieChart *model in _pieCharModel.pieChart) {

//? ? ? ? [arr addObject:model.totalamt];//@[@"8.54",@"3.26",@"2"];

//? ? ? ? [nameArr addObject:model.typename];

//? ? }

? ? NSMutableArray *values = [[NSMutableArray alloc] init];

? ? // IMPORTANT: In a PieChart, no values (Entry) should have the same xIndex (even if from different DataSets), since no values can be drawn above each other.

? ? for(inti =0; i < arr.count; i++){

? ? ? ? NSString* aaa = arr[i];

? ? ? ? doublebb = aaa.doubleValue;

? ? ? ? [valuesaddObject:[[PieChartDataEntryalloc]initWithValue: bblabel: nameArr[i]]];

? ? }

? ? //dataSet

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

? ? dataSet.drawValuesEnabled = YES;//是否繪制顯示數(shù)據(jù)

? ? NSMutableArray *colors = [[NSMutableArray alloc] init];

? ? [colorsaddObjectsFromArray:ChartColorTemplates.vordiplom];

? ? [colorsaddObjectsFromArray:ChartColorTemplates.joyful];

? ? [colorsaddObjectsFromArray:ChartColorTemplates.colorful];

? ? [colorsaddObjectsFromArray:ChartColorTemplates.liberty];

? ? [colorsaddObjectsFromArray:ChartColorTemplates.pastel];

? ? [colorsaddObject:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];

? ? dataSet.colors= colors;//區(qū)塊顏色

? ? dataSet.sliceSpace=3;//相鄰區(qū)塊之間的間距

? ? dataSet.selectionShift=8;//選中區(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= [UIColorbrownColor];//折線顏色

? ? //data

? ? PieChartData*data = [[PieChartDataalloc]initWithDataSet:dataSet];

? ? NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];

? ? formatter.numberStyle = NSNumberFormatterPercentStyle;

? ? formatter.maximumFractionDigits = 1;//小數(shù)位數(shù)

? ? formatter.multiplier=@1.f;

? ? [datasetValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:formatter]];//設(shè)置顯示數(shù)據(jù)格式

? ? [datasetValueTextColor:[UIColor brownColor]];

? ? [datasetValueFont:[UIFontsystemFontOfSize:10]];

? ? self.pieChartView.data = data;

? ? [self.pieChartView setNeedsDisplay];

? ? returndata;

}


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末间影,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子茄茁,更是在濱河造成了極大的恐慌魂贬,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件裙顽,死亡現(xiàn)場離奇詭異付燥,居然都是意外死亡,警方通過查閱死者的電腦和手機锦庸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門机蔗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事萝嘁“鸬В” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵牙言,是天一觀的道長酸钦。 經(jīng)常有香客問我,道長咱枉,這世上最難降的妖魔是什么卑硫? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮蚕断,結(jié)果婚禮上欢伏,老公的妹妹穿的比我還像新娘。我一直安慰自己亿乳,他們只是感情好硝拧,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著葛假,像睡著了一般障陶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上聊训,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天抱究,我揣著相機與錄音,去河邊找鬼带斑。 笑死鼓寺,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的遏暴。 我是一名探鬼主播侄刽,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼朋凉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起醋安,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤杂彭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后吓揪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體亲怠,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年柠辞,在試婚紗的時候發(fā)現(xiàn)自己被綠了团秽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖习勤,靈堂內(nèi)的尸體忽然破棺而出踪栋,到底是詐尸還是另有隱情,我是刑警寧澤图毕,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布夷都,位于F島的核電站,受9級特大地震影響予颤,放射性物質(zhì)發(fā)生泄漏囤官。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一蛤虐、第九天 我趴在偏房一處隱蔽的房頂上張望党饮。 院中可真熱鬧,春花似錦驳庭、人聲如沸劫谅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽捏检。三九已至,卻和暖如春不皆,著一層夾襖步出監(jiān)牢的瞬間贯城,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工霹娄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留能犯,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓犬耻,卻偏偏與公主長得像踩晶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子枕磁,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 前面幾篇文章是《charts框架的集成》《charts柱狀圖》《charts折線圖》渡蜻,建議大家結(jié)合起來看,這樣更詳...
    不夠果斷是種癌閱讀 5,299評論 1 7
  • 可以繪制柱狀圖计济、折線圖茸苇、K線圖、餅狀圖等Charts沦寂,且和Android一致的圖表界面MPAndroidChart...
    求長生閱讀 10,813評論 2 2
  • OC中如何配置 Chart 近期項目需要使用到K線圖学密、折線圖等圖表功能,因此接觸到了Charts這個框架传藏,不得不說...
    Peter_song閱讀 5,107評論 1 7
  • 有些人走著走著腻暮,就散了彤守! 有些人聊著聊著,就緘默了哭靖! 有些人看著看著具垫,就陌生了! 此類種種款青,無疑透露著一個主題:失聯(lián)做修。
    灼之炎閱讀 199評論 0 0
  • java中子類繼承父類程序執(zhí)行順序問題 Java中,new一個類的對象抡草,類里面的靜態(tài)代碼塊饰及、非靜態(tài)代碼、無參構(gòu)造方...
    AIDE_Cking閱讀 806評論 0 0