美文网首页
iOS-Charts--饼状形数据分析

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

作者: 丶逝水流年 | 来源:发表于2018-10-31 16:32 被阅读90次

效果图先上:

前言:

        需求是要出一个数据分析的饼状形数据分析,然后找了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;

}

相关文章

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

    效果图先上: 前言: 需求是要出一个数据分析的饼状形数据分析,然后找了N多demo。最后发现charts的...

  • 常见的6种数据分析图表,告诉你如何更好地分析它们

    作者| 诸葛君 你知道哪些做数据分析的图表?柱状图、饼状图、折线图、散点图,数据分析图表有很多,用excel就可以...

  • iOS CGContextRef

    一、绘制饼状图 饼状图的简单实现代码:

  • 饼状图

    最近在重构项目,里面涉及到饼状图,就自己写了个,在这里分享一下:github地址 展示一下效果图: 大致思路如下:...

  • 饼状图

  • 饼状图

  • 饼状图

    1、基础数据 2、饼状图下的{a}{b}{c}{d}{a}:series下的name{b}:series下的dat...

  • 瓣状甲

    瓣状甲又叫,饼趾 [ pi á n zhi ] 饼趾,又称“复甲”、“饼甲”,在医学上称作瓣状( petaloid...

  • Echarts

    http://echarts.baidu.com/api.html#echarts 柱状图: 饼状图: 饼状图2:...

  • 美森网校BEC商务英语入门:书面用语高大上的技巧

    本期我们就一起来看看如何描述饼状图的几大高招,从而轻松智取图表作文饼状图高分!www.mison.cn 饼状图的描...

网友评论

      本文标题:iOS-Charts--饼状形数据分析

      本文链接:https://www.haomeiwen.com/subject/bkvatqtx.html