iOS-Charts--饼状形数据分析

效果图先上:

前言:

        需求是要出一个数据分析的饼状形数据分析,然后找了N多demo。最后发现charts的效果比其他的都要更强势一些,更优美一些,所以就选择了这个框架  Charts的git地址链接

感受:

        这玩意是个折磨人的小妖精,中间反复就不多提了直接说问题和注意事项:

                xcode10.0 下操作

第一步:集成charts,这里放上:参考地址链接,遇到问题的再补充一下


这里要提一下目录千万不要错了,如果错了就gg

然后继续

    

这里和参考文章一样

因为项目是OC,而Charts是swift写的,所以要桥接文件

这个swift文件的名字随便取一个


在桥接文件里面写上  @importCharts;


第二步:配置搞好了那么就开始写代码

    在你所需使用的vc里导入链接文件

写属性

#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;

设置饼状图

-(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;//是否根据所提供的数据, 将显示数据转换为百分比格式

    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 = @"数据分析";//中间文字

        //富文本

//        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];

}


最后设置给饼状图设置数据

-(PieChartData*)setData{

    //每个区块的数据

    //每个区块的名称或描述

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

    NSArray *nameArr = @[@"通码业务",@"银行充值",@"手机充值",@"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;//是否绘制显示数据

    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;//区块颜色

    dataSet.sliceSpace=3;//相邻区块之间的间距

    dataSet.selectionShift=8;//选中区块时, 放大的半径

    dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名称位置

    dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//数据位置

    //数据与区块之间的用于指示的折线样式

    dataSet.valueLinePart1OffsetPercentage = 0.85;//折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远

    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;//小数位数

    formatter.multiplier=@1.f;

    [datasetValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:formatter]];//设置显示数据格式

    [datasetValueTextColor:[UIColor brownColor]];

    [datasetValueFont:[UIFontsystemFontOfSize:10]];

    self.pieChartView.data = data;

    [self.pieChartView setNeedsDisplay];

    returndata;

}


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • 前面几篇文章是《charts框架的集成》《charts柱状图》《charts折线图》,建议大家结合起来看,这样更详...
    不够果断是种癌阅读 5,257评论 1 7
  • 可以绘制柱状图、折线图、K线图、饼状图等Charts,且和Android一致的图表界面MPAndroidChart...
    求长生阅读 10,760评论 2 2
  • OC中如何配置 Chart 近期项目需要使用到K线图、折线图等图表功能,因此接触到了Charts这个框架,不得不说...
    Peter_song阅读 5,069评论 1 7
  • 有些人走着走着,就散了! 有些人聊着聊着,就缄默了! 有些人看着看着,就陌生了! 此类种种,无疑透露着一个主题:失联。
    灼之炎阅读 188评论 0 0
  • java中子类继承父类程序执行顺序问题 Java中,new一个类的对象,类里面的静态代码块、非静态代码、无参构造方...
    AIDE_Cking阅读 800评论 0 0